cd /news/computer-vision/beyond-default-boxes-custom-annotati… · home › topics › computer-vision › article
[ARTICLE · art-159933] src=dev.to ↗ pub= topic=computer-vision verified=true sentiment=↑ positive

Beyond Default Boxes: Custom Annotation Styles for Computer Vision Datasets in FiftyOne

A developer built the Annotation Styles plugin for FiftyOne, which brings Roboflow supervision-style annotation rendering into the FiftyOne App as an interactive panel. The plugin lets users pick a drawing style per label field and restyle the native viewer live, so switching a 6,000-sample dataset from Box to Corner Box restyles all 120 visible grid thumbnails in the same frame, with no re-rendering, preprocessing, or dataset modifications. The style catalog mirrors supervision's annotators, and segmentation masks are traced to per-class contour loops colored from the App's own mask pixels.

by read6 min views3 publishedOct 28, 2026

You've trained your model, run inference, and loaded your predictions into FiftyOne. And then you're staring at the same blue rectangles you've always stared at. The default bounding box is a blunt instrument. It works, but it doesn't tell you much about confidence, class density, mask shape, or anything else that actually matters when you're trying to understand your data. The fix isn't a better default box, it's the freedom to change annotation styles on the fly, right inside the dataset viewer.

Roboflow's supervision library solved this for export pipelines. Its annotator module — BoxAnnotator, HaloAnnotator, BlurAnnotator, MaskAnnotator, and a dozen others — became the go-to for rendering predictions into images and video. But supervision's annotators bake styles into pixels: great for producing artifacts, less useful when you're still in the exploration phase and want to change your mind five times in a minute.

What if you could apply those same visual styles directly inside FiftyOne's dataset viewer — live, per field, with zero preprocessing and nothing written to disk? That's what the Annotation Styles plugin does. It brings supervision-style annotation rendering into the FiftyOne App as an interactive panel, so your entire dataset grid and the sample modal restyle in real time as you change a dropdown.

Supervision is Roboflow's open-source Python library for working with computer vision model outputs. If you've used it, you know the annotator module: a clean, composable API for rendering detection results with fine-grained control over how they look.

Its most-used annotators include: The challenge: every annotator call produces a new image. That's perfect for a training pipeline or a demo video, but when you're exploring a 10,000-sample dataset and want to switch from BoxAnnotator to HaloAnnotator to see which one surfaces model failures more clearly, re-rendering everything is a non-starter.

FiftyOne is an open-source dataset curation and model evaluation platform built for computer vision. It's the place practitioners spend time actually understanding their data: samples, filtering by tag or prediction, visualizing model outputs, running embeddings, and curating subsets for retraining.

Its browser-based App includes a grid view (your dataset at scale), a sample modal (individual sample inspection), and a sidebar for filtering. Label fields — detections, keypoints, polylines, segmentation masks — are rendered as interactive overlays on the native viewer canvas.

The one thing it didn't have: any control over how those overlays are drawn. Color scheme, yes. Geometry style, no. Until now.

The Annotation Styles plugin is a FiftyOne panel that lets you pick a drawing style for each label field on your dataset — and applies it live to the App's own native viewer. No new images. No pipeline changes. No dataset modifications.

The key distinction is interactivity at dataset scale. When you switch a 6,000-sample dataset from Box to Corner Box, all 120 visible grid thumbnails restyle in the same frame. When you open a sample with 42 detections and switch to Halo, you see the effect on all 42 annotations in milliseconds. There's no waiting for renders and no stale previews.

The plugin's style catalog maps closely to supervision's annotator lineup — by design. If you're familiar with supervision's API, the styles below will feel immediately familiar.

Segmentation masks are traced to per-class contour loops, colored from the App's own painted mask pixels — so whatever color scheme you've configured in FiftyOne is automatically reflected.

FiftyOne's App is a React application. Its label overlays — boxes, keypoints, polylines, masks — are drawn on HTML canvases by an internal module called the looker. The looker's overlay classes (DetectionOverlay, KeypointOverlay, PolylineOverlay, SegmentationOverlay) each have a draw() method that runs every frame.

Plugins run in the same JavaScript context as the App. The looker module is exposed to plugins as a global, which means a plugin can access its prototype objects directly. The Annotation Styles plugin wraps the draw() method on each overlay class with a guarded pass-through: if no style is configured for that overlay's field, the original draw() runs unchanged. If a style is configured, the plugin's style registry takes over.

Because the patch runs inside the App's own render pipeline, everything native — colors, label headers, selection indicators, sidebar filters, hover hit-testing — continues to work exactly as before. The style registry only changes the geometry of how each label is drawn.

For segmentation masks, the plugin traces per-class contours using a boundary-edge marching squares algorithm and simplifies them with Douglas–Peucker. Contours are cached per mask (computed once, reused across every hover frame), and colors are sampled directly from the App's painted bitmap — so whatever color scheme you've set in FiftyOne's settings is automatically reflected in the contour style. fiftyone plugins download https://github.com/harpreetsahota204/annotation_styles

Then:

Supervision's annotators changed how practitioners think about annotation visualization. But they operate at the image level — their output is pixels, not interaction.

FiftyOne's dataset explorer is where you spend time actually understanding your data at scale. The Annotation Styles plugin brings these two worlds together: supervision-style rendering, applied live inside FiftyOne, across your entire dataset.

Install the plugin, try a few styles on your next dataset, and let us know what you build. If you create a visualization that makes your data tell a clearer story — or just a striking one — we'd love to see it.

Does the Annotation Styles plugin modify my dataset or write new files?

No. It restyles labels live inside the FiftyOne App's native viewer, with nothing written to disk and no changes to your dataset. Pick a style and the grid thumbnails and open sample update in place, and Reset returns every field to default rendering.

Is it free and open source?

Yes. The plugin is open source and installs with a single fiftyone plugins download command from its GitHub repo, and it runs on any labeled FiftyOne dataset.

How is this different from Roboflow supervision's annotators?

Supervision's annotators render styles into pixels, producing a new image every time, which is ideal for export pipelines and demo videos. The Annotation Styles plugin applies the same visual styles live inside FiftyOne's viewer instead, so you can switch styles across thousands of samples with no re-rendering and nothing saved to disk.

Which label types does it support?

Detections (bounding boxes), keypoints, polylines, and segmentation masks. Fields are auto-detected and grouped by type when you open the panel, so each label field gets its own style dropdown.

Can different fields use different styles at the same time?

Yes. Each field can have its own style, which is handy for side-by-side comparison. For example, render ground_truth as Corner Box and predictions as Halo on the same image.

How do I install the Annotation Styles plugin?

Run fiftyone plugins download https://github.com/harpreetsahota204/annotation_styles, then launch FiftyOne on a labeled dataset, open the + panel menu, choose Annotation Styles, and pick a style for any field.

── more in #computer-vision 4 stories · sorted by recency
── more on @fiftyone 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
→ Live at https://your-agent.zahid.host ✓
Get free account → Pricing
from €0/mo · no card required
LIVE [news/beyond-default-boxes…] indexed:0 read:6min 2026-10-28 · —