Canvas Timeline

React Registry

componentPlayhead@techsquidtv/canvas-timeline-react

Playhead

Scrub and marker interactions for moving through timeline time.

Playhead preview

A scrub lane with the playhead line and grabber separated from editor chrome.

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

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


export function PlayheadLayer() {
  return (
    <>
      <Timeline.PlayheadArea className="absolute inset-0" />
      <Timeline.PlayheadGrabber />
    </>
  );
}

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

Playhead

Scrub and marker interactions for moving through timeline time.

Exports

NameReferenceDescription
Timeline.PlayheadAreaAPI referenceTransparent scrub area for moving the playhead and marker actions.
Timeline.PlayheadGrabberAPI referenceDraggable playhead handle with double-click marker behavior.

Props and Inputs

NameTypeDescription
onDoubleClick(time, engine, event) => voidOptional handler for double-click or double-tap marker behavior.