supervision-js

Roboflow Supervision for the browser

Render computer vision media as one synchronized scene.

supervision is a browser-native TypeScript library for interactive computer vision media. A media session keeps the visible frame, detections, styles, interaction, and playback on one timing reference.

npm install supervision

Get started Open the demo

Interactive playground

See detections move with the media—not above it.

This looping basketball fixture combines segmentation masks, detection boxes, labels, and pose skeletons. Toggle layers and tune the presentation while the same browser media session keeps every annotation in sync.

The playground is a small consumer of supervision, using the same session, detection, and style contracts available to your application. Learn about detection rendering

Quick start

Create one session for one media item.

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

The parts of a serious CV viewer, kept in one system.

Use the common session API first; use the deeper data, media, and editing APIs when the integration needs them.

Media and playback

Images, video, and browser media streams with preparation, normalization, seeking, stepping, rate control, and current-frame refresh.

Media preparation

Detection rendering

Boxes, masks, polygons, polylines, keypoints, labels, class colors, and presentation styles selected from canonical media timing.

Detections and rendering

Interaction and editing

Renderer-synchronized picking plus host-owned editing engines, persistence, undo/redo policy, and annotation commits.

Interactive picking

Architecture

Portable semantics, platform-specific rendering.

The public browser package is built around a small platform-neutral core. Rendering and media engines stay behind that boundary so applications depend on session, detection, and style contracts—not renderer objects.

Private semantic core

`supervision-js-core`

Detections, geometry, masks, timelines, styles, sources, picking, editing vocabulary, lifecycle contracts, and pure utilities.

Published browser package

`supervision`

createMediaSession(), browser media preparation, playback, render preparation, storage adapters, and the first 2D renderer.

Private experiment

`supervision-js-react-native`

Native session and rendering experiments that share core semantics but are not part of the browser package or its compatibility promise.

Semantic data

Detection frames and compact masks come from memory, chunks, IndexedDB, or your own source.

Prepared window

A bounded set of nearby frames is parsed and prepared for rendering without retaining an entire video in memory.

Active scene

Media and annotations are selected by the same media timing reference and presented together.

Public boundary

Start with the session. Keep implementation details private.

The public API is deliberately smaller than the implementation. It gives applications the media, detections, styles, interaction, state, and lifecycle primitives they need without coupling them to a scene graph, decoder, worker protocol, or prepared-artifact format.

Explore the public API

Applications work with

sessions · detections · styles · sources · state

Applications do not need to know

Pixi scenes · media adapters · workers · prepared artifacts

Keep learning