preview

The preview command starts a local Vite dev server and opens your composition in the browser.

npx editframe preview

If you scaffolded your project with npm create @editframe, npm start is aliased to this command.

Usage

# Start preview server (opens browser automatically)
npx editframe preview

# Preview a specific file
npx editframe preview path/to/composition.html

Port and other server options are controlled by your project's vite.config.js. To change the port, add:

// vite.config.js
export default {
  server: { port: 3000 }
}

The scrubber

The preview UI includes a timeline scrubber at the bottom of the page. Click anywhere on the scrubber to jump to that point in time. This lets you inspect any frame without rendering the full video.

The preview saves your scrubber position across hot reloads, so you can edit your composition and immediately see the result at the same timestamp.

Hot reload

The server watches your composition file. When you save, the browser reloads automatically — no manual refresh needed.

Preview vs. final render

The browser preview and the final render output are not identical:

• Fonts: web-safe fonts load reliably in both; custom fonts may differ if not embedded.
• Video sources: remote video URLs play in the browser but must be accessible to the headless renderer at render time.
• Timing: the preview runs at the browser's native frame rate; the rendered output steps at exactly the fps you specify.

Use preview for rapid iteration and render to verify the final output.