Canvas Timeline
Package

React Timeline Canvas Rendering Engine

Canvas rendering and worker-backed drawing primitives.

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

Installation

pnpm
pnpm add @techsquidtv/canvas-timeline-renderer

When to use it

You need to render hundreds of clips, track lines, ticks, or markers without incurring the layout thrashing and DOM overhead of standard HTML nodes.
You want to use React and CSS for low-count interaction surfaces (scrollbars, drag handles, active overlays) while delegating high-frequency drawings to an offscreen thread.
You require pre-defined color presets, helper functions for generating stable clip colors, or automatic resolution of CSS/shadcn variables into canvas paint settings.

Common imports

Renderer and theme
import {
  CanvasRenderer,
  createTimelineRendererTheme,
  defaultTimelineRendererTheme,
  getPresetColor,
} from '@techsquidtv/canvas-timeline-renderer';
Theme-only entrypoint
import {
  createTimelineRendererTheme,
  defaultTimelineRendererTheme,
  resolveTimelineRendererThemeFromElement,
} from '@techsquidtv/canvas-timeline-renderer/theme';

Usage notes

  • •Worker-Backed Offscreen Rendering: `CanvasRenderer` automatically instantiates a Web Worker and uses `transferControlToOffscreen()` to render drawing frames off the main thread, maintaining a fluid 60 FPS.
  • •High-DPI Sizing: Uses `ResizeObserver` to monitor viewport layout changes and scales the canvas bitmap width and height by `window.devicePixelRatio` for sharp rendering on high-density displays.
  • •CSS Variable Synchronization: Resolves documented `--timeline-*` variables first, then shadcn semantic tokens such as `--background`, `--accent`, `--foreground`, `--primary`, and `--ring`, to apply application themes into canvas drawing contexts.
  • •Optimized Theme Resolution: Queries computed styles on mount or when the `themeKey` changes, avoiding expensive layout thrashing/DOM queries during live scroll, zoom, or scrub operations.
  • •Custom Theme Settings: Supports extensive canvas visual customization through the `theme` prop (covering clip backgrounds, ruler fonts, grid lines, and feedback guides).
  • •Optional Overlays: Allows hiding standard canvas overlays (`showInOutPoints`, `showSnapLines`, `showClipDropFeedback`) or opting into renderer-only In/Out endpoint strokes (`showInOutBoundaryLines`) when custom React/DOM layers are not used.

API Surface

Explore the key components, hooks, and classes exported by this package. Click any symbol to view its full TSDoc parameter signatures.

Key Entry Points

FunctionCanvasRenderer

Renders the timeline canvas layer using an offscreen worker.

InterfaceCanvasRendererProps

Props for the timeline canvas renderer layer.

FunctioncreateTimelineRendererTheme

Creates a complete renderer theme from optional nested overrides.

Subpath Imports

Import specific files or modules directly to reduce bundle size or target specialized package layers.

Import PathDescription
@techsquidtv/canvas-timeline-rendererCanvasRenderer and theme exports.
@techsquidtv/canvas-timeline-renderer/themeDefault renderer theme, color presets, and preset color helper.