Canvas Timeline
Package

Canvas React Timeline Editor UI Bindings

React provider, hooks, context, and interaction components.

Use the React package when you want to bind a TimelineEngine to React controls while keeping rendering choices flexible.

Overview

The React package connects a TimelineEngine to React components and hooks. It provides the provider, timeline namespace components, interaction layers, scrollbars, range controls, and focused hooks that product UI can compose.

It does not force a particular renderer. Pair it with the canvas renderer for the default high-performance surface, or use the hooks and interaction primitives with custom rendering.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline-react

Use React bindings for

  • You already have a TimelineEngine and want React components to observe and control it.
  • You need package-owned interaction chrome such as playhead grabbers, clip handles, range controls, or scrollbars.
  • You want headless hooks for editing, selection, keyframes, playback, viewport, and track state.

Usage

Bind the engine to React

Wrap your editor in TimelineProvider, render Timeline.Root, then add the package components that match your surface. Keep dense clip and ruler rendering on canvas; use React for low-count controls and active affordances.

  1. 1Create or receive a TimelineEngine instance outside the leaf interaction components.
  2. 2Wrap the editor with TimelineProvider.
  3. 3Use Timeline components for playhead, range, track, scrollbar, and clip interaction chrome.
  4. 4Use hooks when your product toolbar, inspector, or shortcuts need direct state and commands.

Example

React interaction layer
import type { TimelineEngine } from '@techsquidtv/canvas-timeline-core';
import {
  Timeline,
  TimelineProvider,
  useTimeline,
} from '@techsquidtv/canvas-timeline-react';
import '@techsquidtv/canvas-timeline-react/styles.css';


function Tracks() {
  const { state } = useTimeline();


  return (
    <Timeline.TrackList>
      {state.tracks.map((track) => (
        <Timeline.Track key={track.id} trackId={track.id} />
      ))}
    </Timeline.TrackList>
  );
}


export function TimelineChrome({ engine }: { engine: TimelineEngine }) {
  return (
    <TimelineProvider engine={engine}>
      <Timeline.Root>
        <Timeline.PlayheadArea />
        <Timeline.PlayheadGrabber />
        <Tracks />
        <Timeline.ClipInteractionLayer />
        <Timeline.RangeSelector />
      </Timeline.Root>
    </TimelineProvider>
  );
}