Installation
VideoFlow is split into small, independent packages. You always need @videoflow/core (the builder that compiles to VideoJSON) plus at least one renderer that turns the JSON into frames.
# Core builder + the renderer you need
npm install @videoflow/core @videoflow/renderer-browser
# Optional — add any renderer you need
npm install @videoflow/renderer-server # MP4 output on Node
npm install @videoflow/renderer-dom # live preview inside a DOM node
# Optional — drop-in editor UI
npm install @videoflow/react-video-editorWhat each package does
| Package | Purpose |
|---|---|
@videoflow/core | Fluent builder, Time parser, VideoJSON compiler. |
@videoflow/renderer-browser | Encodes MP4 from a browser tab using WebCodecs + WebWorkers. |
@videoflow/renderer-server | Renders to an MP4 file or buffer from Node — no ffmpeg dependency by default; opt in with { ffmpeg: true }. |
@videoflow/renderer-dom | Seekable 60 fps preview painted into a real DOM element. |
@videoflow/react-video-editor | Ready-made editor UI — timeline, preview, inspector. |
Requirements
- Node ≥ 20 for the server renderer and for building the browser renderer bundle.
- Modern Chromium / Firefox / Safari for
renderer-browser. WebCodecs is used under the hood. - ESM everywhere — VideoFlow ships ESM only. Use
"type": "module"or a bundler (Vite, Next, etc).
Next
Skim Quick start for runnable examples, or jump to Core concepts for the mental model.