OpenFilm Turns Your Coding Agent Into a Video Editor That Writes HTML

An open-source tool lets Claude Code or Codex make a short video as a folder of web pages, then hand you a real timeline to fix it. Here is how it works and where it stops.

AI video has a revision problem. You type a prompt, a model renders a clip, and the clip comes back as pixels. If the logo is two frames late or the caption has a typo, there is nothing to edit. You prompt again and hope the next roll of the dice keeps everything else the same.

Coding agents have the opposite habit. Everything they make is text you can open, read and change. A typo in a React component is a one-line fix, not a re-render of the whole app.

OpenFilm, an MIT-licensed project in the top dozen of Trendshift's daily GitHub board on November 13 (#11 when read mid-afternoon Eastern), puts those two facts together. It lets your coding agent write a video as a set of web pages, then opens the result in a local editor with a real timeline. The video stays source code until the moment you export it.

That one design choice changes what "making a video with AI" means for a builder. You are not asking a model to imagine footage. You are asking an agent to write a small program whose output happens to be frames. The video becomes software, with everything that implies: diffs, versions, review.

What OpenFilm is, in one paragraph

The README calls it "the open source AI video agent" and sums it up as "One HTML file, one function, one real editor." In practice it is three things. A file format for films made of web pages. A command-line tool that renders those pages into video. And Studio, a browser-based editor that runs on your machine and shows the film taking shape while your agent works. It installs as an agent skill (a packaged set of instructions a coding agent can load), and the README names Codex and Claude Code, plus "any coding agent."

How a film becomes a folder of web pages

Here is the mental model, and it is simpler than it sounds.

A film is a folder with a film.html file at its center. That file is a timeline. Each <section> inside it is a track, like a layer in a video editor, and the first track sits on top. Each clip on a track is one of four things: another web page, a video file, a picture, or an audio file. Clips are placed with ordinary CSS (left, top, width, height), and timing rides on the address. The README's example title.html#t=0,4 means "this page, seconds 0 to 4."

The interesting part is inside each shot page. It defines one JavaScript object, window.film, with a frame(t) function, a duration, and the width and height. Give it a time, it draws that moment.

And there is exactly one rule. In the README's words: "the same t always draws the same picture, whatever was drawn before."

Here is a simplified sketch of that shape, written for this article rather than copied from the project (the README's object also carries a ready field, so check the examples before you build on this):

window.film = {
  duration: 4,          // seconds
  width: 1920,
  height: 1080,
  frame(t) {
    // fade the title in over the first second, every time, from t alone
    const title = document.querySelector("h1");
    title.style.opacity = Math.min(t, 1);
  },
};

Notice what the function does not do. It does not remember the last frame, count ticks, or wait for an animation to finish. It looks at t and sets the page to match.

If you have written a pure function (one whose output depends only on its input), you already know why that matters. The renderer can ask for frame 412 before frame 3, ask for ten frames at once, or ask for frame 412 again tomorrow, and it always gets the same picture. The README says frames are requested out of order and in parallel, which is how a headless browser (a copy of Chromium running with no window) can chew through a render without playing the video in real time.

Inside that function you can draw with almost anything the browser can draw: the README lists three.js, WebGL, canvas, SVG, CSS, GSAP and video. It also says, pointedly, "No framework (like Remotion or HyperFrames)." There is no special component library to learn. If your agent can write a web page, it can write a shot.

Things a browser cannot make, such as a Blender scene, a Python chart or a clip from a video model, "come in as video or images." They become clips on the timeline like any other file.

Why this is a good fit for coding agents

Coding agents are good at three things that matter here. They write HTML and JavaScript fluently. They follow strict rules when the rules are stated clearly. And they can fix their own mistakes when the mistake is visible in text.

OpenFilm leans on all three. The format is web pages, the one rule is easy to state and easy to check, and every fix is a diff. "Move the logo up 40 pixels and hold it half a second longer" becomes a CSS change and a number in an address, not a fresh generation.

The editable part goes past your agent. Studio is a real editor, and the README lists exports that slot into human workflows: MP4, GIF, separate audio stems (each sound layer as its own file), subtitles, stills, slides, transparent video, and timelines for Final Cut Pro, Premiere Pro and DaVinci Resolve. So a designer can take the agent's rough cut into the editor they already know.

Put this into practice

The quickest path takes a few minutes, assuming you already use a coding agent.

1. Check the requirements. The README asks for Node 22.2 or newer and ffmpeg (the standard command-line video tool), on macOS, Windows or Linux, plus git if you want Studio's saved versions. The first run downloads a headless Chromium of about 100 MB. If ffmpeg -version prints nothing, install it first.

2. Install the skill and ask for a video.

npx skills add openfilm/openfilm

Then, in your agent, try the README's own prompt: "Make a 20-second launch video for my CLI, with music." If your agent does not support skills, the README says to run npx -y openfilm@latest and follow what it prints.

3. Open an example before you write your own. The project keeps a sample film you can open directly:

npx -y openfilm@latest open https://github.com/openfilm/examples/tree/main/one-prompt

Reading one finished film.html and one shot page teaches the format faster than any explanation, including this one.

4. Render. With the CLI installed globally (npm i -g openfilm), openfilm render writes an MP4. The README lists flags for 4K (--4k), motion blur (--blur), a transparent background (--alpha, as .webm or .mov) and loudness normalization, which evens out volume (--loudness=-14). You can also render a range, which the README writes as render [a-b], handy when only one scene changed.

5. Edit like a programmer. When something is off, ask the agent for the specific change ("the title card should fade out over 0.5 seconds starting at 3.5"), then re-render that range. Commit the film folder to git. Your video now has history, diffs and code review, which no prompt-to-video tool gives you.

6. Bring in generated media only where you need it. Making, editing and rendering films needs no account, and the README says OpenFilm's library of music, sounds, voices, stickers, transitions and effects is free. Generated voice, music, images or video clips need your own provider keys (the README names ElevenLabs, OpenAI, Google, OpenRouter, fal and others) or an OpenFilm sign-in.

There is also a desktop app for macOS and Windows that bundles ffmpeg and the headless browser, if you would rather not touch a terminal.

What to expect, honestly

This is a young project. The latest release when this was written was v0.3.2, tagged November 9, and the repo had about 6,400 stars and 271 commits. Expect sharp edges and fast changes.

It is motion graphics, not cinematography. Everything a browser draws is graphics: type, shapes, charts, 3D scenes, screen recordings. That is perfect for product explainers, changelog videos, data stories and title sequences. It will not give you a photoreal person walking down a street. For that you still need a video model or a camera, and OpenFilm treats the result as just another clip.

The one rule binds your code. Same time, same picture means no hidden state. If a shot uses random particles, the random numbers have to be generated from t (seeded) (or fixed up front), or two renders of the same frame will disagree. Animations that depend on what happened in the previous frame have to be rewritten to compute each moment from scratch. Your agent will get this wrong sometimes. When a render looks jittery, check this first.

Studio wants Chromium. The README says to run Studio in a Chromium browser such as Chrome or Edge. Safari and Firefox users will need to switch.

Render speed is your hardware's problem. The README does not publish render times, and a headless browser drawing WebGL at 4K is real work. Try a short range before you commit to a long film.

The sign-in path is a service. Keyless generation through an OpenFilm sign-in is convenient, and openfilm.dev says it draws on account credits, while direct provider use is billed by each provider. Neither the README nor the landing page spells out which provider handles your prompts or how client material is kept, so ask before you send anything sensitive through it. The hosted service is also separate from the MIT-licensed local tools.

Example media has its own licenses. The code is MIT, but the project's examples repository says media can carry separate licenses listed in each example's CREDITS.md, and the OpenFilm name and logo are trademarks. Check before you ship a sample's music in a client video.

The bigger point

Most AI video tools try to replace the editor. OpenFilm keeps the editor and replaces the blank timeline. The agent writes a first draft as source code, you shape it with real tools, and every change is something you can read.

That will not suit everyone. If you need footage, you need footage. But for the large, boring, constant demand for short explainer videos that every software team has, a film you can diff might be worth more than a clip you can only re-roll. Run the example, read one shot page, and decide whether you want your next launch video to be a prompt or a pull request.

Sources: openfilm/openfilm on GitHub · OpenFilm README at v0.3.2, the latest release on November 13, 2026 · OpenFilm releases · Trendshift daily board · openfilm.dev