Skip to main content

createCanvasController()v4.0.527

Creates a CanvasController to share between <Canvas> and your editor UI. In React components, useCanvasController() keeps one controller across renders.

warning

Experimental API: This package is not stable. Its public API may change without a major version bump.

controller.ts
import {createCanvasController} from '@remotion/canvas';

export const controller = createCanvasController();

The function takes no arguments.

Return value​

timeline​

An external store of readonly TimelineTrackData[]. Subscribe with timeline.subscribe(listener) and read with timeline.getSnapshot(). In React, pass both to useSyncExternalStore() as shown in the overview. Tracks are populated while the composition is mounted and cleared when <Canvas> unmounts.

Each track includes sequence registration data, depth, nodePathInfo, and timing fields such as cascadedStart, localStart, keyframeDisplayOffset, keyframePlaybackRate, and sequenceFrameOffset. The sequence's from and duration are its visible timeline range. nodePathInfo may be null when no source identity was registered.

selection​

A CanvasSelectionController with getSnapshot() and subscribe(listener) for reading selection. Use useCanvasSelection() in React.

select()​

select(item, interaction, allSelectableItems) applies one selection interaction. interaction has shiftKey for range selection and toggleKey for Command/Ctrl toggling. allSelectableItems is the ordered list used to calculate ranges.

setSelectedItems()​

setSelectedItems(items) replaces the selected items and uses the last item as the range anchor.

setSnapshot()​

setSnapshot({selectedItems, anchor}) replaces the complete selection state.

clear()​

clear() removes every selection item.

hover​

A CanvasHoverController with getSnapshot(), subscribe(listener), setHoveredSequence(valueOrUpdater), and clear(source). Use useCanvasSequenceHover() for a layer row or useCanvasHover() to read the current hover. clear('canvas') or clear('timeline') only clears hover from that source; clear(null) clears either source.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​