Canvas Timeline

React Registry

componentTrack@techsquidtv/canvas-timeline-react

Track

Timeline rows and optional DOM headers that size themselves from track state.

Track preview

A focused row layout showing track lanes and nested clip content.

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

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


export function VideoTrack() {
  return (
    <div className="grid grid-cols-[12rem_minmax(0,1fr)]">
      <Timeline.TrackHeaderList>
        <Timeline.TrackHeader trackId="video-1" />
      </Timeline.TrackHeaderList>
      <Timeline.Track trackId="video-1" />
    </div>
  );
}

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

Track

Timeline rows and optional DOM headers that size themselves from track state.

Exports

NameReferenceDescription
Timeline.TrackAPI referenceTrack row element bound to a track id and synchronized row height.
Timeline.TrackHeaderListAPI referenceStatic left-column container for DOM track headers.
Timeline.TrackHeaderAPI referenceDOM track header row bound to one track id and synchronized row height.
Timeline.TrackHeaderResizeHandleAPI referencePointer-captured handle for resizing a track from its header row.

Props and Inputs

NameTypeDescription
trackIdstringId of the track row or header that should bind to timeline state.