FableCut

FableCut

A browser video editor that AI agents can drive.

https://github.com/user-attachments/assets/2430b854-168b-4a9a-af2e-489e5efa7543

FableCut is a Premiere-style non-linear video editor that runs entirely in yourbrowser — and exposes its whole timeline as one JSON document. Edit it by hand,from the UI, or let an AI agent (Claude Code, Claude Desktop, or anything thatspeaks MCP/REST) cut your video for you while you watch the timeline updatelive.

Zero npm dependencies. One node server.js. That's it.

Why it's interesting

Most "AI video" tools hide the edit behind an API. FableCut flips that: theproject file is the interface. project.json describes media, clips,tracks, effects, keyframes and transitions — any process that can write JSONcan edit video, and the open browser UI hot-reloads within ~150 ms viaserver-sent events. A human and an agent can work on the same timeline at thesame time.

Features

Editing

• 4 video tracks + 3 audio tracks, drag/trim/split/snap, undo/redo
• Direct manipulation on the monitor — click a clip or title on the preview tomove, resize (corner handles), or rotate (top handle, Shift-snap) it directly
• Timeline multi-select — rubber-band marquee (drag on empty track area),Ctrl/Cmd/Shift+click to add/remove clips, Ctrl+A toselect all, Esc to deselect. Drag any selected clip to move thewhole group; Delete removes all selected; S splits allselected at the playhead. Inspector shows an "N clips selected" banner.
• Beat & cue markers (tap ⇧m on the beat during playback) with edge snapping
• Press Alt+t to add an in/out transition based on the playhead position over the selected clip. The last used transition is remembered as the default. Drag the overlay triangle to adjust duration; Delete clears the focused transition.
• Real decoded audio waveforms on clips
• Canvas aspect presets (16:9, 9:16 reels, 4:5, 1:1) + safe-area guides
• Resizable workspace: drag the divider between monitor and timeline (double-click resets), plus S/M/L timeline track-density presets (S hides thumbnails for compact tracks)
• Zoom to selection (⇧z) frames all selected clips, not just one
• IN/OUT work area — set markers with i and o (⇧I / ⇧O to clear). Enabling Limit constrains playback to the marked range and maps Home / End to the IN and OUT positions rather than the full timeline. t splits clips at the markers; ⇧t trims clips to the work (between marker in and marker out) area.

Look

• 12 one-click filter presets (cinematic, teal-orange, noir, vintage, cyberpunk…)
• Adjustment layers — one clip grades everything below it, Premiere-style
• Full grade controls: brightness/contrast/saturation/hue, temperature & tint,blur, grayscale/sepia/invert, vignette, animated film grain
• Blend modes (screen, multiply, overlay…), fit modes (contain/cover/stretch),per-edge cropping, corner radius, flip H/V
• Chroma key (green screen) with tolerance/softness + spill suppression
• AI background removal (person cut-out, in-browser via MediaPipe)

Motion

• Keyframe animation on ~25 properties with easing
• Speed ramps — keyframe speed and the engine time-remaps video and theexport audio mix (the fast-into-slow-mo reel move)
• Camera shake and RGB-split/chromatic aberration, both animatable
• 17 transitions: fades, slides, wipes (4 directions), zoom, iris, spin, blur,whip-pan, glitch, pop

Text

• Title styles — one-tap cohesive looks (Impact, Elegant, Kinetic cut, Neon,Handwritten, and more); new titles vary the font, placement and animationautomatically instead of defaulting to one flat style
• Kinetic captions: typewriter, word-pop, word-slide, karaoke, letter-pop,wave, bounce, shake, clip-reveal, zoom-in, font-cut(rhythmic typeface cuts), rise-mask
• Neon glow for that TikTok caption look
• Font editor: system fonts, drop-in custom fonts (library/fonts/), and anyGoogle Font by name — loaded automatically
• Gradient fills, outline, background pills, letter-spacing, line-height,weights, italic, uppercase, alignment, soft shadows

Animated SVG clips

• A first-class svg clip kind: CSS-@keyframes-animated SVGs renderframe-accurately in preview and export (the compositor freezes theanimation at any time). Agents can author their own vector overlays —lower-thirds, confetti, sparkles — as plain .svg files. Starters included.

Remake a reference video

• Give it a reference edit (a reel you like) and get back an edit blueprint:shot boundaries, music beats + BPM, a loudness curve, per-shot energy, thedrop — plus the reference's music track extracted into your media, readyto rebuild the same idea with your own footage. Zero extra dependencies(ffmpeg does the decoding; onset/tempo detection is plain Node).node analyze.js ref.mp4, POST /api/analyze, or thefablecut_analyze_reference MCP tool.

Asset library

• library/ folders surface as tabs in the UI: Elements (overlay art),Sound FX, SVG — drop files in, the open editor refreshes live

Export

• Fast export: browser renders every frame + an offline audio mix, ffmpegencodes a frame-accurate CRF-18 MP4 (keeps rendering if you switch tabs)
• Realtime MediaRecorder fallback when ffmpeg isn't available

Quick start

git clone https://github.com/ronak-create/FableCut.git
cd FableCut
node server.js        # → http://localhost:7777

Requirements: Node 18+ and a Chromium-based browser. ffmpeg on PATH isoptional but recommended (fast export + upload remuxing). AI backgroundremoval fetches its model from a CDN on first use.

The server binds 127.0.0.1 only (v1.3.1+). To use it from another device onyour LAN, opt in explicitly: HOST=0.0.0.0 FABLECUT_ALLOWED_HOSTS=<your-ip> node server.js.

Drop media into the window (or ./media/), drag clips onto the timeline, edit,export.

Driving it with an AI agent

Everything an agent needs is in CLAUDE.md — the completeschema, semantics and recipes. Point any capable model at that file and it canoperate the editor end to end.

Three equivalent control surfaces:

1. MCP (best for Claude Code / Claude Desktop) — register the bundledzero-dependency MCP server once:

   claude mcp add -s user fablecut -- node "<path-to>/fablecut/mcp-server.js"
   

   Tools: fablecut_status (auto-starts the editor), fablecut_docs,fablecut_get_project, fablecut_set_project, fablecut_patch_project,fablecut_import_media, fablecut_analyze_reference.

   The surface is token-efficient by design: agents patch the timeline withsmall ops (fablecut_patch_project) instead of round-tripping the wholedocument, read a compact one-line-per-clip summary(fablecut_get_project {compact:true}), and fetch only the manual sectionsthey need (fablecut_docs {section:"props"}).

2. The file — read project.json, modify, bump revision, write. The UIlive-reloads.

3. REST — GET/PUT /api/project, POST /api/upload, GET /api/library,SSE at /api/events. See CLAUDE.md for the full list.

Example: ask Claude Code "cut these six clips to the beat markers, add ateal-orange grade, put a word-pop caption on top and a whoosh on every cut" —and watch the timeline rebuild itself.

Or hand it a reference: "here's a reel I like — analyze it and remake it withmy clips, same music". The agent calls fablecut_analyze_reference, gets theblueprint (cuts, beats, BPM, energy, drop, extracted music), and rebuilds thestructure shot-for-shot with your footage.

Conflict-safe concurrent editing: the UI, the MCP tools, and directproject.json writes all agree on a revision counter. If you edit a clip inthe UI while an agent is mid-task, the agent's next write is rejected (409 fromthe REST API / a conflict error from fablecut_set_project) instead ofsilently overwriting your change. The UI similarly detects when an agent writesupersedes a not-yet-saved local tweak and tells you with a toast instead ofdropping it silently.

Project layout

server.js        zero-dependency HTTP server: static hosting, REST API, SSE,
                 ffmpeg export pipeline
app.js           the editor: timeline UI, compositor, keyframes, text engine,
                 SVG rasterizer, chroma key, exporters
index.html       single-page UI
style.css        dark editor theme
mcp-server.js    stdio MCP server exposing the editor to AI agents
analyze.js       reference-video analyzer: shots, beats/BPM, energy, drop,
                 music extraction (module + CLI)
CLAUDE.md        the agent manual (schema + recipes) — also served by fablecut_docs
project.json     your timeline (created on first run; gitignored)
media/           project footage (gitignored)
analysis/        cached edit blueprints from /api/analyze (gitignored)
library/         default assets: elements/ sfx/ svg/ fonts/
exports/         finished renders (gitignored)

Authoring animated SVG overlays

SVGs animate with plain CSS @keyframes. One convention: never hardcodeanimation-delay — set --d: 0.4s instead, and the compositor drives time bypausing all animations and rebasing their delays. Full rules + a skeleton inCLAUDE.md; workingexamples in library/svg/.

Notes

• The repo ships with 20 Google Fonts (library/fonts/, OFL — seeLICENSES.md there) and a set of self-authored SVG overlays and animatedelements (library/elements/, library/svg/, MIT like the rest of the repo).
• library/sfx/ is yours to fill (gitignored): sound-effect sites typicallydon't allow redistributing their files in a public repo, so FableCut doesn't —library/sfx/README.md lists good free sources.
• Export runs in the browser because the compositor is the browser; agentsask you to click Export (or render directly with ffmpeg from media/).

License

MIT