Make your first video
on your own computer.
Write a composition in HTML or React, preview it in your browser, and render it to MP4 with the CLI. Local evaluation needs no account.
Set up a project with an AI coding agent or with the CLI. For guided setup in a live local editor, install the agent plugin for Codex, Cursor, or Claude.
Use an AI agent
Copy a prompt and paste it into Claude, Cursor, Codex, or any AI coding tool. Your agent installs the skills, then scaffolds a new project or integrates into an existing one.
Create a project with the CLI
Requires Node.js 22.12 or later.
Scaffold a project
Run the create command to generate a starter composition and configure the CLI.
Choose the html template for plain HTML and CSS, or react for TypeScript and React.
Edit your composition
Open the generated project directory in your editor.
HTML: Edit index.html to change the composition.
React: Edit src/Video.tsx to change the composition.
HTML example
<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>Add images, video, audio, and CSS animations. Anything the browser can render can appear in the video.
Preview in the browser
From the generated project directory, start the dev server.
It prints a localhost URL and reloads the preview when you save.
Render to MP4
Render the composition to an MP4 file on your computer.
The CLI opens the composition in a headless browser, which encodes the frames with WebCodecs and writes output.mp4.