React Timeline Editor Component - @techsquidtv/canvas-timeline

Installation

pnpm add @techsquidtv/canvas-timeline

npm install @techsquidtv/canvas-timeline

yarn add @techsquidtv/canvas-timeline

bun add @techsquidtv/canvas-timeline

When to use it

You are building a standard React timeline editor and want an integrated, batteries-included starter experience.

You prefer importing the core engine, state managers, DOM interaction controls, and canvas renderers from a single wrapper package.

You want one import path before splitting your integration across focused package entrypoints.

Common imports

import {
  CanvasRenderer,
  Timeline,
  TimelineEngine,
  TimelineProvider,
  fromSeconds,
} from '@techsquidtv/canvas-timeline';

import '@techsquidtv/canvas-timeline/styles.css';

import '@techsquidtv/canvas-timeline/base.css';

import { TimelineEngine } from '@techsquidtv/canvas-timeline/core';
import { TimelineProvider } from '@techsquidtv/canvas-timeline/react';
import { CanvasRenderer } from '@techsquidtv/canvas-timeline/renderer';

Usage notes

•Provides a single batteries-included entry point containing core, React, renderer, and utils APIs, simplifying initial installation and setup.
•Supports subpath imports (e.g., `@techsquidtv/canvas-timeline/core`) to allow incremental refinement toward focused package boundaries without modifying dependencies.
•Use `styles.css` when your app defines shadcn-compatible semantic tokens; it themes the reusable timeline surface, interaction chrome, scrollbars, and optional shell/control utilities while product chrome remains application CSS.

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

ClassTimelineEngine

The central orchestrator and coordinator for the high-performance timeline editor. Maintains state (tracks, clips, markers, playhead position, zoom scale, scrolls, snaps), builds dynamic snap indexes for magnetic snap guidance, handles split and edit actions, and publishes state events to trigger low-latency canvas renderings and lightweight React layouts.

FunctionTimelineProvider

Sets up a bridge between the central event-driven `TimelineEngine` model and standard React functional layouts. Subscribes to settled state, selection, playback, content, and clipboard changes, pushing lightweight state updates downwards into hooks.

VariableTimeline

Namespace of timeline UI components for composing an editor surface.

FunctionCanvasRenderer

Renders the timeline canvas layer using an offscreen worker.

FunctionfromSeconds

Converts seconds to rational timeline time at the requested tick rate.

HooksuseTimeline

Reads the timeline engine and synchronized state from React context. Use this hook inside components wrapped by `TimelineProvider` when you need to call imperative engine commands and read the latest React-rendered state in the same component. Prefer narrower hooks such as `useTimelineState`, `useTimelinePlayback`, or `useTimelineClips` when a component only needs one slice of timeline behavior.

Subpath Imports

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

Import Path	Description
@techsquidtv/canvas-timeline	Common public APIs from core, React, renderer, and utils.
@techsquidtv/canvas-timeline/core	Core state and editing engine re-exports.
@techsquidtv/canvas-timeline/react	React provider, hooks, and components re-exports.
@techsquidtv/canvas-timeline/html-media	Native single-element HTML media/audio timeline media adapter re-export.
@techsquidtv/canvas-timeline/renderer	Canvas renderer and theme re-exports.
@techsquidtv/canvas-timeline/utils	Rational time and shared math re-exports.
@techsquidtv/canvas-timeline/base.css	Structural interaction geometry without default visuals.
@techsquidtv/canvas-timeline/theme.css	Shadcn-token-driven visual theme for interaction chrome and timeline tokens.
@techsquidtv/canvas-timeline/styles.css	Structural styles plus shadcn-compatible interaction chrome.

Canvas React Timeline Editor & Component