Canvas Timeline

Canvas Timeline is a canvas-based React timeline editor engine for video, audio, and animation tools. It combines a headless timeline engine, React interaction layers, and a worker-backed canvas renderer so dense editing surfaces can stay smooth while your app owns the product UI around them.

Start Here

• Documentation
• Getting started
• Live demos
• Package docs
• React registry
• Support & troubleshooting
• Changelog
• NPM package

Install

pnpm add @techsquidtv/canvas-timeline

import {
  CanvasRenderer,
  Timeline,
  TimelineEngine,
  TimelineProvider,
  fromSeconds,
} from '@techsquidtv/canvas-timeline';
import '@techsquidtv/canvas-timeline/styles.css';

const engine = new TimelineEngine({
  duration: fromSeconds(15),
  tracks: [],
});

export function EditorTimeline() {
  return (
    <TimelineProvider engine={engine}>
      <Timeline.Root>
        <CanvasRenderer />
        <Timeline.ClipInteractionLayer />
        <Timeline.PlayheadArea />
        <Timeline.PlayheadGrabber />
      </Timeline.Root>
    </TimelineProvider>
  );
}

Compatibility

Canvas Timeline currently targets Node >=24, React ^19.2.7, and modern Chromium, Firefox, and Safari browsers. Headless imports from core and utils are safe for server-side code; React components, renderer components, media adapters, and worker-backed canvas rendering belong behind client/browser boundaries.

The README quick start is covered by the release package gate: every public package is packed, installed into a clean Vite/React fixture from tarballs, typechecked, built, and checked for headless Node imports.

Packages

Use @techsquidtv/canvas-timeline for the common React + canvas path, or install focused packages when you need a lower-level layer:

Package	Purpose	README
@techsquidtv/canvas-timeline	React timeline editing toolkit.	README
@techsquidtv/canvas-timeline-core	Headless state, editing, playback, history, snapping, and markers.	README
@techsquidtv/canvas-timeline-react	Provider, hooks, and delegated interaction layers.	README
@techsquidtv/canvas-timeline-renderer	Canvas drawing, theme resolution, and worker-backed rendering.	README
@techsquidtv/canvas-timeline-utils	Rational time and shared timeline math.	README
@techsquidtv/canvas-timeline-html-media-adapter	Native HTML media element sync.	README
@techsquidtv/canvas-timeline-mediabunny-adapter	Optional Mediabunny-powered media integration.	README

Repository

This monorepo contains the package source, local demos, and the Astro docs site published at canvastimeline.com.

vp install
vp run dev
vp run dev:www
vp run repo:check
vp test

See Contributing for package boundaries, validation, changesets, and release publishing.