Edit video timelines through AI-driven JSON manipulation

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 your
browser - 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 that
speaks MCP/REST) cut your video for you while you watch the timeline update
live.

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: the
project file is the interface. project.json describes media, clips,
tracks, effects, keyframes and transitions - any process that can write JSON
can edit video, and the open browser UI hot-reloads within ~150 ms via
server-sent events. A human and an agent can work on the same timeline at the
same time.

Features

Editing

• 3 video tracks + 4 audio tracks, drag/trim/split/snap, undo/redo
• Settings (cog in the top bar) - optional prefs stored in this browser via
  localStorage. Enable Link timeline and Project bin selection so picking a
  timeline clip highlights its media in Project, and clicking a Project item
  selects every timeline clip that uses it (off by default).
• Direct manipulation on the monitor - click a clip or title on the preview to
  move, 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 to
  select all, Esc to deselect. Drag any selected clip to move the
  whole group; Delete removes all selected; S splits all
  selected 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
• Project bin folders - tree view with expand/collapse; drag media or folders to nest; right-click the Project tab → New folder; drop files onto a folder to import into it
• Audio Hold - timeline toolbar toggle: while paused, loops one frame of
  audio at the playhead (useful when stepping frame-by-frame). Scrubbing or
  frame-step retargets the held slice; meters stay live. Play / Pause
  turns it off.
• Canvas aspect presets (16:9, 9:16 reels, 4:5, 1:1) + safe-area guides
• Program Monitor zoom - mouse-wheel over the preview zooms the composition
  toward the cursor (fit → up to 2 screen pixels per canvas pixel). Magnified
  view uses native scrollbars so overflow stays reachable; middle-click or
  Alt+drag pans. The Fit button (shown while zoomed) resets to the
  fit-to-stage baseline
• Preview playback speed - shuttle the monitor through 1×/1.5×/2×/4× with J/K/L
  (from a stop J/L start playback; while playing L steps faster
  and J slower, K toggles play/pause and resets to 1×); affects the
  preview player only, never the export
• 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.
• Find & close gaps - a gap is a stretch where every enabled track is empty (black frames). g jumps the playhead to the next shared gap (wraps; respects IN/OUT when both are set). ⇧G closes the gap under the playhead by pulling later clips left on all enabled tracks.
• Reset a property - Ctrl/Cmd+click an inspector label to restore that effect/prop to its default (paired fields like Crop L/R reset together). Matching keyframes for the prop are cleared too; transition labels clear the in/out transition.
• Replace media - the inspector's Source button (any video/audio/image/svg
  clip) swaps the underlying file while keeping position, trim, keyframes,
  transitions and every effect. Pick another item already in the bin or
  Browse file… to import and replace in one step. A video's linked L/R
  audio companions are swapped along with it; a shorter replacement clamps the
  trim to fit and toasts that it did so.
• Multi-channel video audio - a video with more than 2 audio channels gets
  a linked audio clip per channel, not just L/R (5.1, 7.1…). Extra audio
  tracks (A5, A6, …, capped at 16) are created automatically as needed;
  replacing a clip's media re-syncs the linked channel clips to the new
  source's channel count, adding/dropping extras and new tracks as needed.

Look

• 14 one-click filter presets (cinematic, teal-orange, noir, vintage, cyberpunk, sunset, midnight…)
• 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
• Keyframe markers on clips - diamonds on the clip body at each unique
  keyframe time (tooltip lists channels; a count badge when several share a
  time). Ctrl/Cmd+← / Ctrl/Cmd+→ jumps the playhead to
  the previous / next keyframe (selected clips first, else clips under the
  playhead)
• Keyframe graphs - toggle a property’s curve in the inspector to show an
  interpolated value graph beside the program monitor; click the graph to seek
• Speed ramps - keyframe speed and the engine time-remaps video and the
  export 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, Luxury, and more); new titles vary the font, placement and animation
  automatically 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 any
  Google Font by name - loaded automatically
• Gradient fills, outline, background pills, letter-spacing, line-height,
  weights, italic, uppercase, soft shadows
• Text layout - horizontal Align: left / center / right / justify
  (extra spaces between words). Drag a title’s corner handles to create a
  text box (boxW / boxH); further corner drags resize it (opposite
  corner stays fixed; Ctrl/Cmd resizes from center; Shift
  locks aspect). Inside a box, text wraps at the fixed font size by default;
  enable Scale to fit to shrink the font so the whole block fits. V-align
  (top / middle / bottom) places the text block vertically in the box. Set Box
  W/H to 0 to return to hug-content sizing.

Animated SVG clips

• A first-class svg clip kind: CSS-@keyframes-animated SVGs render
  frame-accurately in preview and export (the compositor freezes the
  animation 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, the
  drop - plus the reference's music track extracted into your media, ready
  to 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 the
  fablecut_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, ffmpeg
  encodes 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 is
optional but recommended (fast export + upload remuxing). AI background
removal 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 on
your 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 complete
schema, semantics and recipes. Point any capable model at that file and it can
operate the editor end to end.

📖 Browsable docs: for a conversational, auto-generated tour of the
codebase - architecture, the project.json schema, the MCP surface - see
FableCut on DeepWiki. Ask it
questions about the repo in natural language.

Three equivalent control surfaces:

1. MCP (best for Claude Code / Claude Desktop) - register the bundled
   zero-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.

   FableCut is also published on the official MCP registry as
   io.github.ronak-create/fablecut

   • each release ships an MCPB bundle (fablecut.mcpb) that MCPB-capable
     clients can install directly.

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

2. The file - read project.json, modify, bump revision, write. The UI
   live-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 a
teal-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 with
my clips, same music". The agent calls fablecut_analyze_reference, gets the
blueprint (cuts, beats, BPM, energy, drop, extracted music), and rebuilds the
structure shot-for-shot with your footage.

Conflict-safe concurrent editing: the UI, the MCP tools, and direct
project.json writes all agree on a revision counter. If you edit a clip in
the UI while an agent is mid-task, the agent's next write is rejected (409 from
the REST API / a conflict error from fablecut_set_project) instead of
silently overwriting your change. The UI similarly detects when an agent write
supersedes a not-yet-saved local tweak and tells you with a toast instead of
dropping 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 hardcode
animation-delay - set --d: 0.4s instead, and the compositor drives time by
pausing all animations and rebasing their delays. Full rules + a skeleton in
CLAUDE.md; working
examples in library/svg/.

Notes

• The repo ships with 20 Google Fonts (library/fonts/, OFL - see
  LICENSES.md there) and a set of self-authored SVG overlays and animated
  elements (library/elements/, library/svg/, MIT like the rest of the repo).
• library/sfx/ is yours to fill (gitignored): sound-effect sites typically
  don'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; agents
  ask you to click Export (or render directly with ffmpeg from media/).

Community

Questions, ideas, showing off an edit, or want to help shape what's next? Join
the FableCut Discord. Bugs and feature
requests are still best filed as GitHub issues.