Roboflow Supervision for the browser
supervision is a browser-native TypeScript library for interactive computer vision media. A media session keeps the visible frame, detections, annotation renderers, interaction, and playback on one timing reference.
npm install supervision
One renderer-owned scene
The session owns composition and timing. Your application owns the surrounding UI, model calls, product workflow, and data persistence.
Interactive playground
This looping basketball fixture combines segmentation masks, detection boxes, labels, and pose skeletons. Toggle annotation renderers and tune their styles while the same browser media session keeps every annotation in sync.
The playground is a small consumer of supervision, using the same session, detection, annotation renderer, and style contracts available to your application.
Learn about detection rendering →
Give a session a container and media. It prepares the renderer, exposes state for your UI, and provides playback and detection controls without asking React or your app to run another frame loop.
Learn how media sessions work →import { createMediaSession } from "supervision"; const container = document.querySelector<HTMLElement>("#viewer");if (!container) { throw new Error("Missing #viewer container."); }
const session = await createMediaSession({ container, media: "/media/example.mp4", renderer: { autoPlay: true, loop: true }, }); session.subscribe((state) => { console.log(state.status, state.activities); });
Browser capabilities
Use the common session API first; use the deeper data, media, and editing APIs when the integration needs them.
Images, video, and browser media streams with preparation, normalization, seeking, stepping, rate control, and current-frame refresh.
Media preparation 02Annotation renderers for boxes, masks, polygons, polylines, keypoints, labels, and multi-instance regions, selected from canonical media timing.
Detections and rendering 03Renderer-synchronized picking plus host-owned editing engines, persistence, undo/redo policy, and annotation commits.
Interactive pickingArchitecture
The public browser package is built around a small platform-neutral core. Rendering and media engines stay behind that boundary so applications depend on sessions, detections, annotation renderer descriptors, and style contracts—not backend objects.
Private semantic core
Detections, geometry, masks, timelines, annotation renderer descriptors, styles, sources, picking, editing vocabulary, lifecycle contracts, and pure utilities.
Published browser package
createMediaSession(), browser media preparation, playback, render preparation, storage adapters, and the first 2D renderer.
Private experiment
Native session and rendering experiments that share core semantics but are not part of the browser package or its compatibility promise.
Detection frames and compact masks come from memory, chunks, IndexedDB, or your own source.
02A bounded set of nearby frames is parsed and prepared for rendering without retaining an entire video in memory.
03Media and annotations are selected by the same media timing reference and presented together.
Public boundary
The public API is deliberately smaller than the implementation. It gives applications media sessions, detections, annotation renderer descriptors, styles, interaction, state, and lifecycle primitives without coupling them to a scene graph, decoder, worker protocol, or prepared-artifact format.
Explore the public API →Applications work with
sessions · detections · annotation renderers · styles · sources · stateApplications do not need to know
Pixi scenes · media adapters · workers · prepared artifactsKeep learning
QuickstartInstall, mount, and render your first detections. Annotation renderersSelect and style boxes, masks, labels, polygons, pose, and regions in live playgrounds. Post processorsApply ordered tracking to streaming boxes, masks, and keypoints in a browser worker. RecipesApply focused patterns for sources, picking, lifecycle, and React.