Getting started

From a working environment to your first exported file, this is the whole path.

1. Prepare the environment

Item	Requirement
Node.js	20 or newer
pnpm	10.x, pinned by packageManager in the root package.json
ffmpeg	Required for video export; the bundled LGPL build has no libx264, so MP4 needs your own

Install dependencies from the repository root. One install serves all packages:

pnpm install

To export video, also fetch the bundled ffmpeg:

pnpm ffmpeg:fetch

2. Start the editor

pnpm dev

This starts three processes: the editor on 9000, the render service on 9001 and the BFF on 9002. Open http://127.0.0.1:9000 for the editor. If any process exits, the orchestrator stops the others.

You can also start the editor alone, though export and other API calls need the BFF:

pnpm --filter @dwp/editor start

3. Get to know the interface

• Top bar: project name, canvas info, project settings, AI+, Export and the menus.
• Left asset panel: Media, Elements, Text, Fonts, Subtitles, Effects, IK Character and other categories.
• Canvas: the stage in the middle, with playback, progress, fullscreen, zoom and undo/redo below it.
• Timeline: at the bottom, with fixed row headers and tracks for layers, shots, subtitles and audio.
• Right dock: appears when something is selected, with tabs such as Properties, Keyframes and Effects.

There is no blank-project entry in this version: open a project from the library or import a project JSON. The built-in sample project is ready to edit.

4. Make a first animation

1. Pick an asset under Media, Elements or Text and drag it onto the canvas. The layer starts at the playhead.
2. Select the layer, put the playhead on the start frame, change position, scale or opacity in Properties, and click the diamond on the right of the row to set a keyframe.
3. Move the playhead to the end frame and change the property again. With Auto-key on in project settings, changing a value sets the keyframe automatically.
4. Drag keyframe diamonds to adjust the pacing, and press Ctrl+K to split a clip at the playhead.
5. Press space to play the preview. If the pacing is off, keep adjusting keyframes and easing.

5. Voiceover and subtitles

1. Go to AI+ → AI voiceover (TTS), enter the script and generate voiceover. The audio lands on the current scene's default audio track.
2. Select that audio clip and click Generate subtitles at the bottom of the dock to split and align cues.
3. Adjust the shared size, position, stroke and safe area under Subtitles on the left rail. Override individual cues in the dock.
4. If a character needs lip sync, select the character layer, choose the same clip in Lip sync, enter the script and click Generate lip sync.

6. Export

1. Click Export in the top bar and choose MP4, WebM, GIF or PNG sequence.
2. Confirm resolution and frame rate, then fill in the options for that format.
3. Click export. When the progress bar finishes, preview and download the file.
4. To get subtitles on their own, download SRT or WebVTT from the lower part of the panel.

Shortcuts

Action	Shortcut
Undo / redo	Ctrl+Z / Ctrl+Shift+Z
Split at playhead	Ctrl+K
Copy / paste clip	Ctrl+C / Ctrl+V
Delete / ripple delete	Delete / Shift+Delete
Timeline zoom	Ctrl+wheel, Ctrl+= / Ctrl+-
Fit window / fit selection	Shift+Z / Z
Fit canvas view	Shift+F
Open shortcut help	Shift+/

Troubleshooting

The page reports /api/... 502. The BFF is not running or the ports do not match. Check the [bff] startup line in the pnpm dev output, or open http://127.0.0.1:9002/api/health.

Export says no usable ffmpeg was found. Run pnpm ffmpeg:fetch first, or point FFMPEG_PATH / FFMPEG_DIR at a local build.

MP4 is disabled. The bundled LGPL build has no libx264. Use WebM, or provide a local ffmpeg with libx264 for MP4.

Shortcuts do nothing. Inputs, text areas, open dropdowns and dialogs swallow shortcuts. Click an empty part of the canvas and try again.

---

Next: browse Typical use cases, or go through Core capabilities one by one.