One HTML file, one function, one real editor.
OpenFilm lets your coding agent make videos, and lets you edit them.
Ask Codex, Claude Code or any coding agent to make a film. It writes the film as web pages, and Studio, a local editor that runs in your browser, shows it taking shape. Then change anything you like, by hand or by asking.
- One HTML file.
film.htmlcuts animated web pages, footage, pictures and sound together on tracks, styled with CSS. Nothing new to learn: your agent already knows the web. - One function. Each shot is a web page that draws any moment with
frame(t), using anything a browser can draw: three.js, WebGL, canvas, SVG, CSS, GSAP, video and more. No framework (like Remotion or HyperFrames): one function is enough. - One real editor. Move, scale and rotate any element inside a page, change its text, color and style; place, crop and restyle every clip, trim and cut them on the timeline.
▶ Watch the 1:42 launch video, made with OpenFilm from start to finish.
Requires Node 22.2+ and ffmpeg, on macOS, Windows or Linux (git too, for Studio's saved versions); the first run downloads a headless Chromium (about 100 MB).
npx skills add openfilm/openfilmThen ask your agent for a film:
Make a 20-second launch video for my CLI, with music.
It opens the film in Studio and you watch it take shape. If your agent has no skills, tell it: "Run
npx -y openfilm@latest and follow what it prints."
Or download the desktop app for macOS or Windows from openfilm.dev or Releases: Studio with a chat beside it for the agents you have. It comes with ffmpeg and the headless browser, so there is nothing else to install.
Making, editing and rendering films needs no account, and OpenFilm's library of music, sounds, voices, stickers, transitions, effects and templates is free to use. For generated voice, music, images and video, connect the services you use (ElevenLabs, OpenAI, Google, OpenRouter, fal and others) with your own keys in Studio's Settings → Services, or sign in to OpenFilm there to make them without keys of your own.
To start from a finished film, open one of the examples:
npx -y openfilm@latest open https://github.com/openfilm/examples/tree/main/one-promptYour agent runs them; so can you, with npx -y openfilm@latest <command> or npm i -g openfilm.
openfilm # what a film is, and OpenFilm's own skills: where an agent starts
openfilm open [folder | url] # show a film in Studio: a new one, an existing one, one from GitHub, else this one or the last
openfilm look [what] [t | a-b] # check the film, a page or a media file: a contact sheet, one frame, or a range
openfilm render [a-b] # the MP4; --4k, --blur (motion blur), --alpha (.webm / .mov), --loudness=-14
openfilm get [what] # media: free from OpenFilm's library first, else made by a connected service
openfilm canvas [apply <steps>] # the canvas beside the edit: read it, or lay out notes, files and what to make
openfilm skills # the skills a film can be made with; `openfilm skill <name>` prints one
openfilm doctor # what this computer has for OpenFilm, to paste into an issueopenfilm <command> --help lists a command's options; openfilm get alone lists what can be made, what the library
has, and how to connect a service in Studio.
Studio runs on your machine, in your browser: use one built on Chromium (Chrome, Edge), the engine films are drawn and exported with, so the preview is what you export. Everything in the film can be changed: text and layers in the picture, clips on the timeline, their place, look, volume and speed, and the subtitles. Your edits are saved to the film's files, so the agent sees and keeps them, and you can save named versions to go back to. Export a video, a GIF, the sound or its stems, subtitles, stills, slides, a transparent video, or the timeline itself for Final Cut Pro, Premiere Pro and DaVinci Resolve.
Beside the edit is the canvas (⌘E switches between them): a board where you and the agent lay out notes, pictures, clips, voice-over, music and sound, wire them into each other, make each with your services, and send what you made to the timeline in order. A project can have several, each also seen as a storyboard. The library, in the assets drawer, holds footage, voices, sounds, music, text, stickers, filters, effects, transitions and templates, and the skills.
The desktop app (apps/desktop) is Studio with a chat beside it, for Claude Code, Codex and the other agents, or its own agent with your own key.
How a film is made lives in skills, not in the tool. openfilm prints one page: what a film is, and OpenFilm's own
skills, which hold the rest: edit (the project, film.html and pages, and checking them), media (the library and
the services) and canvas. An agent reads the one a task needs with openfilm skill <name>.
Every other skill is a way of making a kind of film, known by its full name, owner/name. Studio's library lists
OpenFilm's and the community's under Discover, from openfilm/skills, which also
says how to write one; install one there, try it in a conversation without installing it, or add your own from a link
or a folder (openfilm skill add <link>). An installed skill is offered to every agent.
A film is a folder with a film.html: tracks of clips cut together.
<meta name="viewport" content="width=1920, height=1080">
<style>
.card { object-fit: cover; border-radius: 24px; }
</style>
<section>
<iframe src="title.html#t=0,4"></iframe>
</section>
<section>
<video src="assets/footage.mp4#t=12,18" at="4" speed="0.5" class="card" style="left: 160px; top: 90px; width: 1600px; height: 700px"></video>
</section>
<section>
<audio src="assets/music.mp3" volume="0.6"></audio>
</section>Each <section> is a track, in the order the timeline shows them: the first on top. A clip is an element: a page,
a video, a still picture or a sound. Which part of its file plays is a media fragment (#t=12,18), where it starts
is at, where it sits is its style's left, top, width and height, and how it looks is CSS. Every sound is a
clip of its own. overrides hold your changes to elements of a page, and agents keep them when they edit.
A page is a web page that draws any moment of itself, and that is the whole contract:
<script type="module">
window.film = {
frame(t) { /* draw the complete picture at t seconds, with anything */ },
duration: 4, // optional: its own length, in seconds
ready: loadFonts(), // optional: a Promise for fonts, images, models, data
width: 480, height: 320, // optional: a page that is only a part of the picture
};
</script>The one rule: the same t always draws the same picture, whatever was drawn before. Frames are asked for out of
order, in parallel and between frames (for motion blur), so a page that keeps the rule renders the same at any size,
on any machine. Anything else that makes pictures (Python, Blender, a video model) comes in as video or images.
OpenFilm spends its effort where models fail: checking the film. look draws every frame of its sheet twice, in two
shuffled orders, and names any that changed, along with page errors, fonts that failed to load, missing sound files,
and text cut off by the frame.
MANUAL.md is the page openfilm prints, and
packages/openfilm/manual holds OpenFilm's own skills; SPEC.md
is for anyone building a player, renderer or editor.
You need Node 22.18 or later, pnpm 9 (corepack enable gives you the version this repository names), ffmpeg on the
PATH, and git.
git clone https://github.com/openfilm/openfilm && cd openfilm
pnpm install
pnpm dev # Studio from this checkout, with a sample film, beside an installed OpenFilm
pnpm testTell your coding agent to run packages/openfilm/.dev/bin/openfilm and it makes films with your checkout, in that
Studio. Every OpenFilm, installed or from source, keeps its projects in the same library.
pnpm dev:desktop runs the desktop app from source, and pnpm typecheck, pnpm build and pnpm audit:public do
what they say.
CONTRIBUTING.md has the details of each package.
Questions, ideas and films you made go to Discussions: ask in
Q&A, share your film in Show and tell. Bugs go to Issues, with the
report from Studio's Settings → Developer → Copy report (or npx openfilm doctor).
See CONTRIBUTING.md. To report a security issue, see SECURITY.md.
The format, the CLI, Studio and the desktop app are MIT. The OpenFilm name and logo are trademarks: see TRADEMARK.md.