Weave: A Web Video Editor that Outputs an FFmpeg Command

Weave is a browser-based timeline editor. You arrange clips on a timeline; Weave serializes that timeline to a composition JSON document and compiles it into a single ffmpeg command.

Try it live

pnpm install
pnpm run dev

1. Edit: Drag clips on a multi-track timeline (trims, fades, layouts, masks, transitions, color EQ).
2. Compose: The editor builds a CompositionDocumentthat describes layers, clip timing, and effects.
3. Preview: CompositionPreview plays that document in the browser by approximating ffmpeg behavior with React, CSS (opacity, masks, transforms), and SVG filters (e.g. color EQ).
4. Render: The same document is translated into a single ffmpeg argv. You can run it with ffmpeg.wasm in the browser, native ffmpeg via the Vite host, or copy the command and run it yourself.

Because the live preview aims to mirror the final ffmpeg output with web APIs in realtime instead of running the real filter graph, preview and export are close but not 1:1, especially regarding colors and video filters.

A short example of the timeline definition:

{
  "version": 1,
  "width": 1920,
  "height": 1080,
  "duration": 8,
  "layers": [
    {
      "id": "v1",
      "name": "V1",
      "kind": "video",
      "zIndex": 0,
      "clips": [
        {
          "id": "clip-a",
          "type": "video",
          "path": "media/intro.mp4",
          "label": "intro",
          "start": 0,
          "end": 4,
          "in": 0,
          "out": 4,
          "fadeOut": 0.5,
          "transitionOut": {
            "type": "crossfade",
            "duration": 0.5,
            "toClipId": "clip-b"
          }
        },
        {
          "id": "clip-b",
          "type": "video",
          "path": "media/main.mp4",
          "label": "main",
          "start": 3.5,
          "end": 8,
          "in": 0,
          "out": 4.5
        }
      ]
    },
    {
      "id": "a1",
      "name": "A1",
      "kind": "audio",
      "zIndex": 0,
      "clips": [
        {
          "id": "clip-music",
          "type": "audio",
          "path": "media/bed.mp3",
          "label": "bed",
          "start": 0,
          "end": 8,
          "in": 0,
          "out": 8,
          "volume": 0.6
        }
      ]
    }
  ]
}

Clips use timeline start/end and source in/out in seconds. Optional fields cover layout, fades, volume, masks, EQ, and transitions.

This README is incomplete. I may expand it later.

Big Buck Bunny (big_buck_bunny_30s.mp4):

(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
Licensed under Creative Commons Attribution 3.0
https://creativecommons.org/licenses/by/3.0/

Carefree by Kevin MacLeod (carefree_1min.mp3):

Carefree
Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 4.0 License
http://creativecommons.org/licenses/by/4.0/

This project's source code is MIT licensed.

⚠️ Please note that by default (for demonstration purposes), this application dynamically loads ffmpeg.wasm from a CDN, which ships a GNU General Public License (GPL)-licensed build of FFmpeg. This (probably) means the running app should be treated as GPL. If you want to distribute the Weave application while retaining the permissive MIT license (or a GPL-incompatible license) for the resulting work, you will (probably) want to remove the usage of ffmpeg.wasm from lib/render-api.ts and handle the FFmpeg encoding another way (e.g. a server). Not legal advice.