openfilm: Open Source Photo & Video Editors

What is openfilm?

OpenFilm is an open-source AI video agent that turns any coding agent, such as Claude Code or Codex, into a video agent by having it write films as plain HTML pages, with a local browser-based editor called Studio for changing anything the agent makes; it is for developers and editors who already work with coding agents and the web stack rather than with a dedicated motion-graphics application.

What it is

A film in OpenFilm is a folder containing a film.html file: tracks of clips cut together, where each clip is an element such as a page, a video, a still picture or a sound. Each shot is a web page that draws any moment through a single frame(t) function, using anything a browser can draw, including three.js, WebGL, canvas, SVG, CSS, GSAP and video. Which part of a source file plays is set by a media fragment such as #t=12,18, where it starts is set by at, and where it sits comes from the left, top, width and height of its style. Studio, the editor, runs on the local machine in the browser rather than on a server.

The concrete problem it solves is that producing a video normally means either adopting a motion-graphics framework with its own abstractions or opening a timeline application that a coding agent cannot meaningfully drive. OpenFilm removes the framework stage in favour of one HTML file and one function, so there is nothing new to learn: the agent already knows the web, and CSS styles the result. It also keeps the output editable rather than one-shot. Studio changes text and layers inside the picture, clips on the timeline, their place, look, volume and speed, and the subtitles, and those edits are written back to the film's files so the agent sees and keeps them.

Key capabilities

A single film.html holds the whole film as tracks of clips that cut animated web pages, footage, pictures and sound together, styled with CSS.
Each shot is a web page that draws any moment with frame(t), using three.js, WebGL, canvas, SVG, CSS, GSAP, video and other browser drawing methods.
Studio lets an editor move, scale and rotate any element inside a page, change its text, colour and style, place, crop and restyle every clip, and trim and cut on the timeline.
The openfilm render command produces the MP4, with --4k for resolution, --blur for motion blur and --alpha for .webm and .mov output.
The openfilm look command checks the film, a page or a media file and returns a contact sheet, a single frame or a range.
The openfilm get command obtains voice-over, music, sound effects, transcripts, images and video from connected services including ElevenLabs, OpenAI, Google and fal, using the user's own keys.
Exports cover video, GIF, the sound and its stems, subtitles, stills, slides, transparent video, and the timeline itself for Final Cut Pro, Premiere Pro and DaVinci Resolve.

Who uses it and how

Developers already driving Claude Code or Codex can ask for a specific brief, such as a twenty-second launch video for a command-line tool with music, and watch the film take shape in Studio as the agent writes it.
Anyone starting from a finished film can open one of the published examples, for instance by running the CLI against the one-prompt example repository, and adapt it rather than begin from an empty folder.
Desktop users on macOS and Windows can run Studio with a chat beside it for the agents they already have, or with its own agent driven by their own key, with ffmpeg and the headless browser bundled.
Editors who finish in a conventional application can export the timeline for Final Cut Pro, Premiere Pro or DaVinci Resolve instead of rebuilding the cut by hand.
Teams that want review points can keep named versions of a film and rely on git, which Studio uses for saved versions, while the edits stay in the film's files.

Getting started

Install Node 22.2 or newer, ffmpeg and git on macOS, Windows or Linux, then run npx skills add openfilm/openfilm; the first run downloads a headless Chromium of about 100 MB. A desktop app for macOS and Windows is also available from openfilm.dev and the Releases page, bundling ffmpeg and the headless browser so there is nothing else to install.

How it compares

The closest reference points named in the project's own documentation are the framework approach of Remotion and HyperFrames, which OpenFilm positions against by arguing that no framework is needed when a single frame(t) function in a plain HTML file is enough. The distinguishing claim is legibility to a coding agent: the film is ordinary web pages styled with CSS, which such an agent already knows how to write, and Studio edits those same files rather than a separate project format.

When to use it — and when not to

A self-hoster must supply Node 22.2 or newer, ffmpeg, git for saved versions, and a headless Chromium download of roughly 100 MB, and Studio should be used in a Chromium-based browser such as Chrome or Edge so the preview matches what is exported. Making, editing and rendering need no account, but generated voice, music, images and video require connecting third-party services with your own keys, so it is not a self-contained hosted pipeline. Anyone who wants a zero-install cloud editor with storage and rendering handled elsewhere should not pick it, and the project remains small — 1,377 stars, 141 forks and 13 open issues — so support expectations should match that scale.

project readme (upstream, from github) — read inline

The open source AI video agent.

One HTML file, one function, one real editor.

English · 简体中文

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 the manual 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. For generated voice, music, images and video, connect the services you use (ElevenLabs, OpenAI, Google, fal and others) with your own keys in Studio's Settings → Providers.

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 or npm i -g openfilm.

openfilm                          # the manual: all an agent needs to know
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)
openfilm get    [what]            # voice-over, music, sound effects, transcripts, images, video, from your services
openfilm doctor                   # what this computer has for OpenFilm, to paste into an issue

openfilm --help lists a command's options; openfilm get alone lists what can be made and how to connect a service in Studio with your own key.

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.

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 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>

Each `` 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 what openfilm tells your agent; SPEC.md is for anyone building a player, renderer or editor.

From source

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 test

Tell 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.

Community

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).

Contributing

See CONTRIBUTING.md. To report a security issue, see SECURITY.md.

License

The format, the CLI, Studio and the desktop app are MIT. The OpenFilm name and logo are trademarks: see TRADEMARK.md.

Frequently asked questions

Is openfilm free to use?

openfilm is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does openfilm do?

The open source AI video agent: turns any coding agent into a video agent, with an editor to change anything it makes.

What is openfilm written in?

openfilm is primarily written in TypeScript. Its source is publicly available at https://github.com/openfilm/openfilm, and it has 1,377 GitHub stars.