{"slug": "the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor", "title": "The project file is the interface: letting AI agents drive a video editor", "summary": "A developer open-sourced FableCut, a browser-based video editor designed for AI agents to operate via a JSON project file. The entire timeline lives in a single document, allowing any tool that writes JSON to edit video, with a simple concurrency model based on integer revisions. The editor uses SSE for lightweight change notifications and deterministic CSS animations for export.", "body_md": "Last week I open sourced [FableCut](https://github.com/ronak-create/FableCut),\n\na Premiere-style video editor that runs in the browser and that AI agents can\n\noperate. It hit the front page of Hacker News\n\n([thread](https://news.ycombinator.com/item?id=48845422)), and the questions\n\nthere made me realize the interesting part isn't the editor. It's one design\n\ndecision: **the project file is the interface.**\n\nMost AI video tools hide the edit behind an API. You call `addClip()`\n\n,\n\n`applyFilter()`\n\n, and the tool owns the state. If you want a human to touch the\n\nresult, you build a whole collaboration layer.\n\nFableCut does the opposite. The entire timeline lives in one JSON document,\n\n`project.json`\n\n: media, clips, tracks, keyframes, transitions, markers. The\n\neditor UI reads it. The export renders it. And anything that can write JSON\n\ncan edit video: Claude Code through MCP, a Python script, `jq`\n\n, or you with a\n\ntext editor.\n\n```\n{\n  \"id\": \"c_title\", \"kind\": \"text\", \"track\": \"V3\",\n  \"start\": 0, \"duration\": 2.2,\n  \"props\": { \"text\": \"HANDMADE\", \"font\": \"Bebas Neue\",\n             \"glow\": 45, \"textAnim\": \"letter-pop\" }\n}\n```\n\nThat clip is a glowing kinetic caption. There is no API call that creates it.\n\nWriting it into the file IS creating it.\n\nThe first question on HN was \"what's the benefit of SSE here?\" Fair question,\n\nbecause the SSE channel does almost nothing, and that's the point.\n\nThe server watches the project file with `fs.watch`\n\n, debounces 150ms, and\n\npushes the literal string `change`\n\nto the browser. No payload. The browser\n\nre-fetches the project and re-renders. The whole mechanism is about 15 lines\n\non a bare `node:http`\n\nserver.\n\nWhy not WebSockets? Because the data only flows one way. Everything that\n\nwrites (the UI, an agent, a shell script) goes through REST or the\n\nfilesystem. The browser only ever needs to hear \"something changed, go look.\"\n\nAn event with no payload can't arrive out of order, and a missed event costs\n\nnothing because the next fetch has the latest state anyway.\n\nThe file carries an integer revision. Every write must bump it. If a write\n\narrives with a `revision`\n\nthat isn't newer than what's on disk, the server\n\nrejects it with a 409.\n\nThis one integer is the entire concurrency model. If I drag a clip in the UI\n\nwhile an agent is mid-edit, the agent's stale write bounces, it re-reads,\n\nre-applies its change on top of mine, and writes again. No operational\n\ntransforms, no CRDTs, no lock files. It works because edits are coarse\n\n(a whole document) and rare (human speed), so last-writer-wins with a\n\nstaleness check is enough.\n\nFableCut has animated SVG overlays (lower thirds, confetti, sparkles) that\n\nare plain `.svg`\n\nfiles animated with CSS `@keyframes`\n\n. The problem: a video\n\ncompositor needs to render the animation state at an exact time, and export\n\nisn't realtime. You can't just let the animation play.\n\nThe solution: pause every animation and drive time by hand. The compositor\n\nsets `animation-delay: calc(var(--d, 0s) - t)`\n\nwhere `t`\n\nis the clip's local\n\ntime. A negative delay means \"you started in the past,\" so a paused animation\n\nwith delay `-1.3s`\n\ndisplays exactly its 1.3 second frame. Deterministic,\n\nscrubbable, identical in preview and export. The only rule for SVG authors is\n\nto never hardcode `animation-delay`\n\nand use the `--d`\n\ncustom property for\n\nstaggering instead.\n\nSomeone said this on HN and it deserves a straight answer. For trims,\n\nconcats, and batch transcodes: yes, absolutely, do that.\n\nThe difference is the creative loop. ffmpeg is write-only. The agent builds a\n\nfilter graph, renders for minutes, and cannot see what it made. You give\n\nfeedback, everything re-renders. In FableCut an edit is a JSON diff, the open\n\nbrowser updates in 150ms, and the timeline stays editable instead of being\n\nbaked into a filter string. It's not a replacement for ffmpeg anyway: the\n\nexport pipeline renders frames in the browser and pipes them to ffmpeg for\n\nencoding. FableCut is the state and preview layer between the agent and\n\nffmpeg.\n\nThe compositor is the browser, so export needs a browser open (headless\n\nexport is not there yet). It's Chromium-first. And an AI can misjudge a cut\n\njust fine, which is why the human-in-the-loop part matters more than the AI\n\npart: the agent does the labor, you do the taste.\n\nFull disclosure since HN asked: Claude helped write the README, and large\n\nparts of the editor were built in collaboration with it. That felt fitting\n\nfor a tool whose primary user is an AI agent, but the architecture decisions\n\nabove are the ones I'd defend in person.\n\nRepo: [https://github.com/ronak-create/FableCut](https://github.com/ronak-create/FableCut). It's MIT, zero dependencies,\n\none `node server.js`\n\n. If you build something weird with it, I want to see it.", "url": "https://wpnews.pro/news/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor", "canonical_source": "https://dev.to/ronak_parmar_033c50d168b5/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor-58hd", "published_at": "2026-07-09 15:54:17+00:00", "updated_at": "2026-07-09 16:05:39.237240+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "ai-tools", "generative-ai"], "entities": ["FableCut", "Claude Code", "MCP", "Hacker News"], "alternates": {"html": "https://wpnews.pro/news/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor", "markdown": "https://wpnews.pro/news/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor.md", "text": "https://wpnews.pro/news/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor.txt", "jsonld": "https://wpnews.pro/news/the-project-file-is-the-interface-letting-ai-agents-drive-a-video-editor.jsonld"}}