EditableFrames™

Generate video with AI. Edit with simple clicks.

Create videos with code. Give every clip its own editing panel. Change a detail without starting over.

EditableFrames is an open-source framework for human and AI video creators. Your code defines the scene; optional, typed controls expose the details worth editing—colors, shapes, cameras, timing, media and more. People and agents use the same reversible edit history.

Beta 0.1 · MIT framework · Runs locally · Model-neutral

Built by parent company Stitchable. For a complete video editing application, explore Stitchable Pro Studio →.

Get started · Agent setup · Architecture · Beta scope · Website & Cloudflare setup

Change the scene. Keep the code.

Watch: grow the towers → remove the trees → undo twice → redo. The controls beside the scene are generated from that clip’s schema. This is the working film-study editor, captured at explicit source times; its edits can be downloaded. Project previews also save edits to disk.

Still image · How this demo was captured

Edit a 3D scene locally

Select actors, move XYZ arrows, rotate, scale, adjust lights and camera framing, and save clean reference images. The Scene Studio example includes drama blocking and a procedural robot-versus-ape scene, with keyframes and reversible edits. Run npm run build:scene then npm run dev:scene. This standalone editor is an opt-in integration example; native Stitchable integration remains separate.

One framework, many visual styles

Actual output from the included studies, effects and device viewer. Click any image to see it larger. Run the local studio to play and edit the examples.

3D castle	Skeletal dragon	Underwater railway
Scientific explainer	Grain & sunset	Isometric logistics
Paper stop motion	Storybook collage	Ink animation
Kinetic showreel	Product evolution	Aurora glow
Motion echo	Print texture	Graphic reveal
iPhone product shot	MacBook product shot	iMac product shot
TV product shot	iPad product shot	Ink effect

These are original code-built studies and previews, not copies of other creators’ videos. Device models retain their creators’ licenses and credits. The scientific scene is a teaching schematic, not a running neural network. Studies demonstrate creative range; they are not all packaged as interchangeable CLI export templates yet.

Why EditableFrames?

• Keep creative freedom. Use Canvas, SVG, Three.js, shaders or future libraries. Controls describe what can be edited; they do not restrict what code can draw.
• Give each clip the right controls. Expose a camera for a 3D scene, colors for a title, or media timing for an embedded speaker. Panels support conditional fields, presets and numeric macros.
• Let people and agents refine the same work. Stable anchors, validated changes, saved history and undo/redo make targeted edits practical.
• Bring video into the scene. Import an MP4 as an editable media port, with timing, playback speed and audio controls. Export an opaque video or a transparent overlay.
• Choose your model and host. No Stitchable account, Remotion dependency or model API key is required by the framework. The shared skill and CLI are available for Claude Code, Codex and other tool-capable agents, including Grok; host-specific setup is documented separately.

Try it

Clone the MIT source, with Node 22 or later:

git clone https://github.com/Stitchable-ai/editable-frames.git
cd editable-frames
npm ci
npm run dev

Open the local URL printed by the command (default http://127.0.0.1:8790). The studio includes:

• 24 scoped browser effects and six composed looks: glow, distortion, grading, wipes, mattes and source-time effects.
• 11 creative studies: scientific U-Net schematic, grain film, paper animation, ink, isometric logistics, castle, skeletal dragon, underwater train and kinetic promos.
• 55-device catalog with five included GLBs, shared HDR product lighting, default satin aluminium chassis, camera controls and screen calibration. Install the separate complete pack to load all 55.

Interactive website

The included website offers 12 editable studies, including a real iPhone product demo with phone swaps, app screens and camera controls. It uses Astro for searchable pages and the framework’s command/history engine for edits. Run it locally with npm ci --prefix website followed by npm run dev --prefix website.

The playground is live at editableframes.stitchable.ai. See the setup guide. The browser playground exports frames and edit recipes; the local SDK provides supported video exports.

The canonical package, CLI and agent skill use editableframes. The original editableframe CLI entry point and saved-project identifiers remain compatible.

Make your own clip

node bin/editableframes.mjs init /path/to/my-clip --renderer
node bin/editableframes.mjs inspect /path/to/my-clip
node bin/editableframes.mjs preview /path/to/my-clip

Edit clip.mjs to define the visual. The renderer starter exports defineRenderer from editableframes/renderer: arbitrary DOM, Canvas, SVG or WebGL code renders into its own root at explicit source time. Optional controls expose editable props; scenes with no controls work too. Read the portable renderer contract for a complete example and the exact host services. The original init Canvas-template starter and --media remain supported.

After editing source, run node bin/editableframes.mjs rebind /path/to/my-clip to retain compatible edits. Use --reset only when deliberately replacing the schema and starting from defaults. Prior project and source snapshots are retained under .editableframe/; source rebind is separate from property undo/redo.

Use the exact IDs and revision from inspect in a proposal:

{
  "baseRevision": "revision-from-inspect",
  "command": {
    "type": "set",
    "clip": "clip-id-from-inspect",
    "anchor": "orb",
    "property": "color",
    "value": "#ff8866",
    "label": "Warm coral palette"
  }
}

node bin/editableframes.mjs apply /path/to/my-clip proposal.json
node bin/editableframes.mjs undo /path/to/my-clip
node bin/editableframes.mjs redo /path/to/my-clip

The CLI and project preview share atomic disk writes, stale-revision checks and saved history. Preview edits persist immediately; Download snapshot makes a portable copy. Standalone film studies without a project server still download their edits.

Render an MP4

Install FFmpeg on your system, then:

npx playwright install chromium
node bin/editableframes.mjs render /path/to/my-clip output.mp4

The beta exporter produces H.264 MP4 with embedded-port audio, transparent ProRes 4444 MOV, or RGBA PNG sequences with WAV audio. It records the source binding, project revision, asset hashes and rational frame clock. Existing outputs are never overwritten. This is a trusted local-code runtime, not an untrusted-code sandbox. See the beta contract for media imports, transparency, validation and limits.

node bin/editableframes.mjs init ./media-study --media
node bin/editableframes.mjs preview ./media-study
node bin/editableframes.mjs render ./media-study ./overlay.mov

Use from an agent

Read agent installation. The canonical SKILL.md works through the model-neutral CLI. A Claude plugin manifest is included; Codex and Grok can install the same skill into their discovery folders. Nothing is automatically added to your global agent configuration.

Open devices

Download the complete 55-model device pack from the beta 1 release, with its receipt and SHA-256 checksum. The source checkout includes five starters. See assets and licensing for sources, starter models, attribution, integrity checks and release instructions. Models retain their own CC BY, CC0 or MIT licenses; they are not relicensed under the framework's license.

What is implemented

Renderer-independent authoring, stable anchors, typed validation, keyframes, transactional commands, undo/redo, saved history, optional generated panels, source bindings, a CLI, browser examples, shader effects and a reusable Three.js lighting adapter.

The device viewer currently has its own look history/profile. It is not yet unified with the generic clip CLI. General layer/depth host services, production streaming decode, audio automation, optical flow, distributed rendering and an EffectCraft WASM adapter remain future work. Local PTS-indexed MP4 decoding and static-port audio mixing are implemented in beta 1. See architecture and roadmap.

Golden rule: new libraries and more sophisticated generated code must remain possible. The control schema is an editing interface, not a fixed visual language.

Motion desk study

Try per-object animation tracks with a real 3D phone and a Canvas explainer: npm run dev:motion. Edit keyframe diamonds and temporal Bezier curves, swap phones, and undo people/agent edits through the same history engine. This standalone proof is not yet native Stitchable timeline integration. Read the scope and test guide and generation prompt.

Develop

npm run build
npm test
npm run test:beta
npm run test:renderer
npm run test:browser
npm run test:render
npm run check:assets
npm run check:public

Tests require the prerequisites described above. See CONTRIBUTING.md. The 0.1 beta is for trusted local code; APIs remain provisional and source changes invalidate bindings until you explicitly rebind. Rich schema migrations remain future work.

Maintainers: publish under the Stitchable organization.

Original code: MIT. Third-party resources: NOTICE.md.