About
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.html cuts 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.
Install
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/openfilm
Then 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-prompt
Commands
Your 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 issue
openfilm <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
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.
Skills
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.
How it works
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>
This is the beginning of the README. Read the rest at the original. Read the full README ↗
