Welcome to the documentation for Canvas Timeline. This library is designed to make it simple to build high-performance, frame-accurate, and fully customizable video, audio, or animation timelines in React.
pnpm add @techsquidtv/canvas-timelineWhere to start?
Follow a curated path depending on your goals and familiarity with the library:
🚀 Getting Started
Learn how to install the packages, create a timeline engine instance, and render a basic interactive timeline surface in React.
🧩 System Architecture
Understand the serializable state model, rendering layer boundaries, and how to decouple your heavy media metadata from timeline state.
📦 Package Boundaries
Explore the monorepo sub-packages (Core, React hooks, Canvas Renderer, Time Utils) and learn when to split or drop down for customizations.
🎮 Live Demos
Explore fully interactive, source-backed timeline configurations (basic timelines and media adapter sync demos) and inspect their code tabs.
Architectural Pillars
Canvas Timeline is built from the ground up around four main design principles:
State-First Serialization
The timeline is modeled as a pure serializable JSON state. This structure makes features like infinite undo/redo, real-time collaboration, and sequence saving simple to implement.
Precision via RationalTime
All time values are stored as fractions (integers value and rate). This eliminates floating-point rounding errors that accumulate over large audio/video editing sequences.
Canvas-Driven High Performance
Visual components (tracks, ruler, markers, clips) are drawn on double-buffered HTML5 Canvas. Drawing keeps rendering at a smooth 60fps even with hundreds of clips on screen.
Frictionless React Hooks
Low-frequency overlays, drag-handles, inspectors, and menus are built in standard React. Our state provider handles automatic reactivity so your components stay in sync.
Reference & Code Details
Looking for generated API references or details on individual workspaces?