Open Video Editor

An open-source, agent-friendly video editor. Compose videos as plain HTML on a timeline, drop in your own media (logos, product demos), preview with a scrubbable playhead, and render to MP4.

Built on HyperFrames (HTML → MP4, Apache-2.0) — so there's no proprietary timeline format and no per-seat license. A composition is just HTML: humans can tweak it, and AI agents can author it end to end.

Why

Most programmatic video tools lock you into a component framework or a paid license. Here a video is HTML you already know — elements positioned on tracks with simple data-* timing attributes, animated with GSAP/CSS/Lottie/Three.js. That makes it trivial for an agent to generate, and trivial for a person to read and adjust.

Features

• Timeline editor — tracks, clips, a time ruler, and a draggable playhead that scrubs the preview. Clips are parsed straight from your composition's timing attributes.
• Live preview — see the composition animate as you edit; one master clock keeps the preview and the timeline in sync.
• Bring your own media — upload logos and product-demo clips and reference them by path (assets/your-logo.png) right in the HTML.
• One-click render — produces a real MP4, stored and played back in the gallery.
• Agent-ready — a clean REST API (/api/compositions, /api/assets, /api/renders) and an agent.md so an AI agent can author and render videos without a human in the loop.

How a composition works

A composition is one HTML fragment. The root carries the canvas size; timed elements get class="clip" plus data-start / data-duration (seconds) / data-track-index, and animations are registered on a paused GSAP timeline:

<div id="root" data-composition-id="promo" data-width="1920" data-height="1080">
  <img src="assets/logo.png" class="clip" data-start="0" data-duration="6" data-track-index="0" />
  <h1 id="title" class="clip" data-start="0.5" data-duration="6" data-track-index="0"
      style="position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:90px">
    Introducing Northwind
  </h1>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { opacity: 0, y: 40, duration: 1 }, 0.5);
    window.__timelines = { promo: tl };
  </script>
</div>

The editor reads those clips into the timeline automatically.

Quickstart

pnpm install
pnpm dev        # editor UI + API, with a local database & storage

Open the editor, hit New composition for a starter, edit the HTML in the Compose tab, drop media in Media, scrub the timeline, and render from Renders.

Deploy

This is a Clawnify app — deploy it to your org with the CLI:

npx clawnify deploy

Rendering runs on Clawnify's managed render service, so deployed instances need no local video toolchain.

Project layout

src/
  client/app.tsx     # editor UI: compositions, timeline, media, renders
  server/            # REST API (compositions, assets, renders) + preview
agent.md             # how an AI agent authors and renders videos

License

MIT for this app. HyperFrames is Apache-2.0.