Hooks & commands

The editor exposes its Zustand store via hooks. For reads, call useEditor(selector) — it subscribes only to the slice you pick. For writes that should be undoable, dispatch commands instead of calling setState directly.

Reading state

import { useEditor } from '@videoflow/react-video-editor';

function LayerCount() {
  const count = useEditor((s) => s.video.layers.length);
  return <span>{count} layers</span>;
}

Commands

A command is a pure function that returns an Immer patch plus metadata. Dispatching a command pushes a history entry (undoable, merge-aware) and triggers onChange.

import { useEditorStore, commands } from '@videoflow/react-video-editor';

function NudgeRight() {
  const dispatch = useEditorStore((s) => s.dispatch);
  return (
    <button onClick={() => dispatch(commands.moveLayersCommand({ ids, dx: 10 }))}>
      Move right 10px
    </button>
  );
}

Available commands

History model

• Up to 200 entries retained per session.
• Merges within an 800 ms window — rapid inputs collapse into one undo step.
• Cmd+Z / Cmd+Shift+Z hooked up automatically.

Renderer bridge

For advanced programmatic control, reach the underlying DomRenderer via state.bridge:

const { bridge } = useEditorStore.getState();
await bridge.seek(120);
await bridge.renderFrame(120);