Canvas Timeline
Package

Timeline Editor Core Engine

UI-agnostic state, editing, snapping, playback, and markers.

Use the core package when your integration needs the timeline model and editing operations without React or canvas rendering concerns.

Overview

The core package is the timeline model and editor brain without a view layer. It owns tracks, clips, markers, selections, edits, playback state, snapping, history, and active-content queries.

Use it directly when React is not the right boundary, or when you want tests and non-visual logic to run without pulling in DOM components.

Install

pnpm
pnpm add @techsquidtv/canvas-timeline-core

Reach for core when

  • You are building a timeline in another UI framework or platform.
  • You want isolated tests for edits, snapping, history, or playback behavior.
  • You need to keep timeline state serializable and separate from app-owned media metadata.

Usage

Own the model, bring your own UI

Instantiate TimelineEngine with plain timeline data, then call engine commands from your UI or service layer. Keep media URLs, files, waveforms, and transcripts in application storage keyed by stable ids such as clip.sourceId.

  1. 1Represent all times as RationalTime values, usually created with helpers from @techsquidtv/canvas-timeline-utils.
  2. 2Use stable ids for tracks and clips; do not derive ids from array positions.
  3. 3Use engine commands to preview, commit, cancel, undo, and redo edits.
  4. 4Subscribe to engine events when your UI needs to react to state changes.

Example

Preview and commit an edit
import { TimelineEngine } from '@techsquidtv/canvas-timeline-core';
import { fromSeconds } from '@techsquidtv/canvas-timeline-utils';


const engine = new TimelineEngine({ tracks: [] });


const preview = engine.previewEdit({
  type: 'move',
  clipId: 'clip-intro',
  startTime: fromSeconds(4),
});


if (preview.valid) {
  engine.commitEdit(preview.command);
}