@timelinx/react API

Engine

TimelineEngine

The React engine wraps @timelinx/core dispatch with subscriptions, history, tools, snapping, playback, keyboard handling, provisional state, and stable snapshots.

import { TimelineEngine } from '@timelinx/react';
import { createTimeline, createTimelineState, toFrame, frameRate } from '@timelinx/core';

const engine = new TimelineEngine({
  initialState: createTimelineState({
    timeline: createTimeline({
      id: 'tl-1',
      name: 'My Edit',
      fps: frameRate(30),
      duration: toFrame(9000),
    }),
  }),
});

TimelineEngineOptions

Constructor options for initial state, history, custom tools, playback pipeline, dimensions, clocks, zoom callbacks, and error handling.

EngineSnapshot

The stable snapshot read by hooks.

Providers

TimelineProviderProps

Props for the TimelineProvider component.

Hooks

Context hooks read the engine from TimelineProvider. Engine-first hooks accept a TimelineEngine argument, which is useful for multiple editor instances or external inspectors.

useEngine

Returns the engine instance from context. Throws if used outside TimelineProvider.

useTimeline

Subscribes to timeline metadata and structure.

useTrackIds

Subscribes to track ordering.

useTrack

Subscribes to one track by ID.

useClip

Subscribes to a specific clip's data. Returns Clip | null.

useHistory

Subscribes to { canUndo, canRedo }.

useSelectedClipIds

Subscribes to the set of selected clip IDs. Returns ReadonlySet<string>.

usePlayheadFrame

Subscribes to the current playhead frame. Returns TimelineFrame.

useIsPlaying

Subscribes to the playback state. Returns boolean.

useTimelineWithEngine

Subscribes to the timeline metadata (duration, fps, etc.). Returns Timeline.

useClipEffects

Subscribes to a clip's effects array. Returns readonly Effect[].

Tool Router

createToolRouter

Creates pointer/key handlers that translate host UI events into engine tool calls.

useToolRouter

React hook for using a tool router in custom timeline surfaces.

useVirtualWindow

Subscribes to the visible timeline window for virtualized rendering.

useVisibleClips

Subscribes to clips visible in the current frame range.