{"slug": "show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps", "title": "Show HN: FableCut – A browser video editor AI agents can drive (zero deps)", "summary": "FableCut, a browser-based non-linear video editor, exposes its entire timeline as a JSON document, allowing AI agents to edit video via MCP/REST while humans work simultaneously. The zero-dependency tool features Premiere-style editing, keyframe animation, AI background removal, and reference video analysis, with live timeline updates through server-sent events.", "body_md": "**A browser video editor that AI agents can drive.**\n\nFableCut 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.\n\nZero npm dependencies. One `node server.js`\n\n. That's it.\n\nMost \"AI video\" tools hide the edit behind an API. FableCut flips that: the\n**project file is the interface**. `project.json`\n\ndescribes media, clips,\ntracks, effects, keyframes and transitions — any process that can write JSON\ncan edit video, and the open browser UI hot-reloads within ~150 ms via\nserver-sent events. A human and an agent can work on the same timeline at the\nsame time.\n\n**Editing**\n\n- 4 video tracks + 3 audio tracks, drag/trim/split/snap, undo/redo\n**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\n`M` on the beat during playback) with edge snapping - Real decoded audio waveforms on clips\n- Canvas aspect presets (16:9, 9:16 reels, 4:5, 1:1) + safe-area guides\n\n**Look**\n\n- 12 one-click filter presets (cinematic, teal-orange, noir, vintage, cyberpunk…)\n**Adjustment layers**— one clip grades everything below it, Premiere-style- Full grade controls: brightness/contrast/saturation/hue,\n**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\n**Chroma key**(green screen) with tolerance/softness + spill suppression** AI background removal**(person cut-out, in-browser via MediaPipe)\n\n**Motion**\n\n- Keyframe animation on ~25 properties with easing\n**Speed ramps**— keyframe`speed`\n\nand 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,\nwhip-pan,\n**glitch**,** pop**\n\n**Text**\n\n- Kinetic captions: typewriter, word-pop, word-slide, karaoke,\n**letter-pop**,** wave**,** bounce**,** shake** **Neon glow** for that TikTok caption look- Font editor: system fonts, drop-in custom fonts (\n`library/fonts/`\n\n), and**any Google Font by name**— loaded automatically - Gradient fills, outline, background pills, letter-spacing, line-height, weights, italic, uppercase, alignment, soft shadows\n\n**Animated SVG clips**\n\n- A first-class\n`svg`\n\nclip kind: CSS-`@keyframes`\n\n-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`\n\nfiles. Starters included.\n\n**Remake a reference video**\n\n- Give it a reference edit (a reel you like) and get back an\n**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`\n\n,`POST /api/analyze`\n\n, or the`fablecut_analyze_reference`\n\nMCP tool.\n\n**Asset library**\n\n`library/`\n\nfolders surface as tabs in the UI:**Elements**(overlay art),** Sound FX**,** SVG**— drop files in, the open editor refreshes live\n\n**Export**\n\n- Fast export: browser renders every frame + an offline audio mix, ffmpeg encodes a frame-accurate CRF-18 MP4 (keeps rendering if you switch tabs)\n- Realtime MediaRecorder fallback when ffmpeg isn't available\n\n```\ngit clone https://github.com/ronak-create/FableCut.git\ncd FableCut\nnode server.js        # → http://localhost:7777\n```\n\nRequirements: **Node 18+** and a Chromium-based browser. **ffmpeg on PATH** is\noptional but recommended (fast export + upload remuxing). AI background\nremoval fetches its model from a CDN on first use.\n\nDrop media into the window (or `./media/`\n\n), drag clips onto the timeline, edit,\nexport.\n\nEverything an agent needs is in ** CLAUDE.md** — the complete\nschema, semantics and recipes. Point any capable model at that file and it can\noperate the editor end to end.\n\nThree equivalent control surfaces:\n\n-\n**MCP**(best for Claude Code / Claude Desktop) — register the bundled zero-dependency MCP server once:\n\n```\nclaude mcp add -s user fablecut -- node \"<path-to>/fablecut/mcp-server.js\"\n```\n\nTools:\n\n`fablecut_status`\n\n(auto-starts the editor),`fablecut_docs`\n\n,`fablecut_get_project`\n\n,`fablecut_set_project`\n\n,`fablecut_patch_project`\n\n,`fablecut_import_media`\n\n,`fablecut_analyze_reference`\n\n.The surface is\n\n**token-efficient by design**: agents patch the timeline with small ops (`fablecut_patch_project`\n\n) instead of round-tripping the whole document, read a compact one-line-per-clip summary (`fablecut_get_project {compact:true}`\n\n), and fetch only the manual sections they need (`fablecut_docs {section:\"props\"}`\n\n). -\n**The file**— read`project.json`\n\n, modify, bump`revision`\n\n, write. The UI live-reloads. -\n**REST**—`GET/PUT /api/project`\n\n,`POST /api/upload`\n\n,`GET /api/library`\n\n, SSE at`/api/events`\n\n. See CLAUDE.md for the full list.\n\nExample: ask Claude Code *\"cut these six clips to the beat markers, add a\nteal-orange grade, put a word-pop caption on top and a whoosh on every cut\"* —\nand watch the timeline rebuild itself.\n\nOr hand it a reference: *\"here's a reel I like — analyze it and remake it with\nmy clips, same music\"*. The agent calls `fablecut_analyze_reference`\n\n, gets the\nblueprint (cuts, beats, BPM, energy, drop, extracted music), and rebuilds the\nstructure shot-for-shot with your footage.\n\n**Conflict-safe concurrent editing**: the UI, the MCP tools, and direct\n`project.json`\n\nwrites all agree on a `revision`\n\ncounter. If you edit a clip in\nthe UI while an agent is mid-task, the agent's next write is rejected (409 from\nthe REST API / a conflict error from `fablecut_set_project`\n\n) instead of\nsilently overwriting your change. The UI similarly detects when an agent write\nsupersedes a not-yet-saved local tweak and tells you with a toast instead of\ndropping it silently.\n\n```\nserver.js        zero-dependency HTTP server: static hosting, REST API, SSE,\n                 ffmpeg export pipeline\napp.js           the editor: timeline UI, compositor, keyframes, text engine,\n                 SVG rasterizer, chroma key, exporters\nindex.html       single-page UI\nstyle.css        dark editor theme\nmcp-server.js    stdio MCP server exposing the editor to AI agents\nanalyze.js       reference-video analyzer: shots, beats/BPM, energy, drop,\n                 music extraction (module + CLI)\nCLAUDE.md        the agent manual (schema + recipes) — also served by fablecut_docs\nproject.json     your timeline (created on first run; gitignored)\nmedia/           project footage (gitignored)\nanalysis/        cached edit blueprints from /api/analyze (gitignored)\nlibrary/         default assets: elements/ sfx/ svg/ fonts/\nexports/         finished renders (gitignored)\n```\n\nSVGs animate with plain CSS `@keyframes`\n\n. One convention: never hardcode\n`animation-delay`\n\n— set `--d: 0.4s`\n\ninstead, and the compositor drives time by\npausing all animations and rebasing their delays. Full rules + a skeleton in\n[CLAUDE.md](/ronak-create/FableCut/blob/main/CLAUDE.md#authoring-animated-svgs-the-svg-clip-kind); working\nexamples in [ library/svg/](/ronak-create/FableCut/blob/main/library/svg).\n\n- The repo ships with\n**20 Google Fonts**(`library/fonts/`\n\n, OFL — see`LICENSES.md`\n\nthere) and a set of self-authored SVG overlays and animated elements (`library/elements/`\n\n,`library/svg/`\n\n, MIT like the rest of the repo). `library/sfx/`\n\nis 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`\n\nlists good free sources.- Export runs in the browser because the compositor\n*is*the browser; agents ask you to click Export (or render directly with ffmpeg from`media/`\n\n).", "url": "https://wpnews.pro/news/show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps", "canonical_source": "https://github.com/ronak-create/FableCut", "published_at": "2026-07-09 13:23:10+00:00", "updated_at": "2026-07-09 13:36:57.130217+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-agents", "computer-vision"], "entities": ["FableCut", "Claude Code", "Claude Desktop", "MediaPipe", "Google Fonts", "ffmpeg"], "alternates": {"html": "https://wpnews.pro/news/show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps", "markdown": "https://wpnews.pro/news/show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps.md", "text": "https://wpnews.pro/news/show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps.txt", "jsonld": "https://wpnews.pro/news/show-hn-fablecut-a-browser-video-editor-ai-agents-can-drive-zero-deps.jsonld"}}