Get started.
It's free.

Editframe lets you build videos with code — HTML + CSS compositions that render to MP4. No account required to get started.

Journey 1 — Via your agent

Copy a prompt and paste it into Claude, Cursor, Codex, or any AI coding tool. Your agent scaffolds the project and builds the video for you.

Journey 2 — By hand

Scaffold a project yourself with the CLI and follow the steps below. Full control, no surprises.

Follow the guide ↓

Zero to video in 4 steps

Requires Node.js 18+. No account, no API key.

1

Scaffold a project

Run the create command — it generates a starter project with an index.html composition and wires up the CLI for you.

$ npm create @editframe@latest

Choose the html template for plain HTML/CSS, or react for TypeScript + React.

2

Open the composition

Your composition lives in index.html. It's an HTML file with Editframe web components — the same HTML a browser renders, just captured frame-by-frame into video.

<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px] bg-black">
  <ef-timegroup mode="fixed" duration="3s" class="absolute w-full h-full">
    <ef-text class="text-white text-6xl font-bold">Hello, Editframe!</ef-text>
  </ef-timegroup>
</ef-timegroup>

Edit this freely. Add images, video, audio, CSS animations — anything the browser can render.

3

Preview in the browser

Start the dev server to see your composition live in the browser as you edit.

$ npm start

Prints a localhost URL when ready. Hot-reloads on save.

4

Render to MP4

When you're happy with the composition, render it to an MP4 file locally — no account or cloud needed.

$ npx editframe render -o output.mp4

The CLI launches a headless browser, captures frames, and encodes to MP4 using FFmpeg.