Canvas Timeline
Package

Canvas React Timeline Editor & Component

React timeline editing toolkit.

Start here when you want the common Canvas Timeline experience without choosing lower-level package boundaries up front.

Overview

The main package is the easiest way to start a Canvas Timeline editor. It re-exports the core engine, React bindings, renderer, and time utilities from one dependency so early app code can stay focused on the editor experience.

As your project grows, you can keep using this package or switch individual imports to the focused packages below. The runtime pieces are the same; the split package paths are there when you want sharper ownership boundaries.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline

Start here when

  • You are building a React timeline editor and want the common engine, UI bindings, renderer, and utilities together.
  • You want one install path while you are still proving out the editor shape.
  • You expect to use the default React interaction chrome and canvas renderer.

Usage

Start with the assembled editor surface

Create a TimelineEngine, provide it with TimelineProvider, render the canvas with CanvasRenderer, and layer the React interaction components above it. Import styles.css when you want the packaged structural CSS plus the default token-driven chrome.

  1. 1Create the engine with your initial tracks, clips, markers, and duration.
  2. 2Wrap the editor UI in TimelineProvider.
  3. 3Render Timeline.Root, CanvasRenderer, and the timeline interaction components your product needs.
  4. 4Import @techsquidtv/canvas-timeline/styles.css once in the app entry or demo source.

Example

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


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


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