Canvas Timeline

React Registry

componentTimeline Surface@techsquidtv/canvas-timeline-react

Timeline Surface

The root interaction shell for panning, zooming, selecting, and arranging tracks.

Timeline surface preview

A compact surface with track rows, clips, a ruler, and playhead affordances.

Open full demo

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-react
  1. 1

    Install the package.

    The command above adds the React bindings and their package dependencies.

  2. 2

    Import from the React entrypoint.

    @techsquidtv/canvas-timeline-react
  3. 3

    Add the timeline styles.

    Use the full stylesheet with shadcn-compatible tokens, or base.css when your app owns the visual theme.

    Default visuals
    import '@techsquidtv/canvas-timeline-react/styles.css';
    Base geometry
    import '@techsquidtv/canvas-timeline-react/base.css';

Usage

EditorSurface.tsx
import { Timeline } from '@techsquidtv/canvas-timeline-react';


export function EditorSurface() {
  return (
    <Timeline.Root className="h-96">
      <Timeline.TrackList>
        <Timeline.Track trackId="video-1" />
      </Timeline.TrackList>
    </Timeline.Root>
  );
}

Notes

  • Render these components inside a TimelineProvider so they can read the shared TimelineEngine.
  • Import @techsquidtv/canvas-timeline-react/styles.css when your app defines shadcn-compatible semantic tokens, or base.css when supplying your own theme.
  • CSS styles interaction layers; renderer theme styles canvas-painted timeline visuals.
  • Use the theming guide when CSS tokens should drive canvas-painted colors.

API Reference

Timeline Surface

The root interaction shell for panning, zooming, selecting, and arranging tracks.

Exports

NameReferenceDescription
Timeline.RootNamespace exportProvider-aware interaction surface root for pan, zoom, and selection.
Timeline.TrackListNamespace exportScrollable container for timeline track rows.
Timeline.KeyboardScopeAPI referenceFocus-scoped wrapper for opt-in timeline keyboard shortcuts.