Annotation Styles for FiftyOne: Restyle CV Datasets Live

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.

What Is Roboflow Supervision?

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:

BoxAnnotator / RoundBoxAnnotator / BoxCornerAnnotator — box geometry variants
HaloAnnotator — glowing border effect
BlurAnnotator / PixelateAnnotator — privacy and redaction
MaskAnnotator / PolygonAnnotator — instance and semantic mask rendering
EllipseAnnotator / DotAnnotator / TriangleAnnotator — marker-style overlays
LabelAnnotator / RichLabelAnnotator / PercentageBarAnnotator — text and confidence readouts

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.

What Is FiftyOne?

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: loading 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.

Introducing the Annotation Styles Plugin for FiftyOne

GitHub README for the Annotation Styles FiftyOne plugin, showing the App grid restyled with colorful segmentation masks.

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.

Open the panel from the + menu → Annotation Styles
Your label fields are auto-detected and grouped by type: Detections, Keypoints, Polylines, Segmentation
Pick a style from any field's dropdown — the grid thumbnails and the open sample update immediately
Drag sliders to tune thickness, density, glow radius, fill opacity
Different fields can have different styles simultaneously
Reset returns every field to the App's default rendering

What Makes Annotation Styles Different

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.

Annotation Styles: A Style-by-Style Breakdown

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.

Bounding Box Annotation Styles

Keypoint Annotation Styles

Segmentation Mask Annotation Styles

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.

Annotation Styles Use Cases

Model Debugging

Switch from Box to Corner Box to reduce visual clutter on dense prediction sets
Use Filled opacity to spot overlapping detections at a glance
Crosshatch and stipple fills make class overlap readable where filled boxes would merge
Compare ground_truth (Corner Box) and predictions (Halo) on the same image — different style per field

Privacy and Data Review

Blur or Pixelate PII fields live — no new export needed
Review what gets redacted before committing to a pipeline change
Segmentation outline styles let you verify mask boundaries without covering the image

Dataset Presentation and Demos

Glow and Blink styles make live demos visually striking
The neon segmentation contour look — previously only achievable by rendering individual frames — now interactive across thousands of samples
Stipple and crosshatch fills give dataset visualizations an editorial, publication-ready feel

Annotation QA (Quality Assurance)

Outline masks to verify boundary precision without the opacity clutter of filled overlays
Dashed contours highlight borders that need review
Use per-class colors (inherited from FiftyOne's color scheme) to distinguish classes at a glance

How We Made FiftyOne’s Native Viewer Styleable

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.

Installation and Quickstart

fiftyone plugins download https://github.com/harpreetsahota204/annotation_styles

Then:

Launch FiftyOne on any labeled dataset
Open the + panel menu → Annotation Styles
Pick a style for any field — the viewer updates immediately
Use Reset to return all fields to default rendering

Try Annotation Styles on Your Next Dataset

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.

FAQ

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.

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

Talk to a computer vision expert