Canvas Timeline
Package

Timeline Canvas Rendering Engine

Canvas rendering and worker-backed drawing primitives.

Use the renderer when you want the default canvas-backed timeline visuals with shared theme helpers.

Overview

The renderer draws the dense parts of a timeline: clips, track lanes, ruler ticks, markers, snap lines, and feedback overlays. It keeps those visuals on canvas so zooming, scrolling, and playback do not create hundreds of DOM nodes.

Pair it with the React package for the default split: canvas for dense visuals, React and CSS for low-count interaction chrome.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline-renderer

Use the renderer when

  • You want the default Canvas Timeline drawing pipeline.
  • You need worker-backed rendering for dense clip and ruler surfaces.
  • You want renderer theme helpers that resolve CSS and shadcn-style tokens into canvas colors.

Usage

Render dense timeline visuals on canvas

Place CanvasRenderer inside Timeline.Root while a TimelineProvider is active. Let the renderer own repeated visual drawing and keep product controls, inspectors, and interaction affordances in React.

  1. 1Create a TimelineEngine with tracks, clips, markers, and viewport state.
  2. 2Render CanvasRenderer inside the timeline root.
  3. 3Import package styles from the React or main package so DOM chrome has structural CSS.
  4. 4Customize renderer theme options only when app-level tokens are not enough.

Example

Canvas renderer inside a timeline
import type { TimelineEngine } from '@techsquidtv/canvas-timeline-core';
import { Timeline, TimelineProvider } from '@techsquidtv/canvas-timeline-react';
import { CanvasRenderer } from '@techsquidtv/canvas-timeline-renderer';


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