Miraiclip

Build video editors, not video editor plumbing.

Quickstart · Live examples · Docs · Roadmap · Discord

_{An editor built with Miraiclip, start to export. Watch the full 90-second demo with sound →}

Miraiclip is an open source, framework-agnostic engine for video editors in the browser. You bring the UI; it brings the timeline, the commands, the renderer and the export.

What you get

• Commands, not mutations. Every edit is a validated, serializable, undoable command.
• Undo, redo, transactions. Exact history out of the box.
• Frame-accurate preview. WebCodecs + WebGL, the same pixels as export.
• Export anywhere. MP4 or WebM in the browser, a worker, or Node.
• Creative toolkit. Keyframes, 79 effects, transitions, karaoke captions.
• HTML clips. Overlays in HTML/CSS with {{params}} and CSS animation, frame-exact.
• Templates. One composition → many personalized videos.
• Audio. Stock libraries and AI generation, with licenses and credits.
• AI-native. LLM tools from the command catalog, an editing assistant, an MCP server.
• Collaboration-ready. Every change is a JSON patch.
• Headless core. No UI dependencies. React, Vue, Svelte, vanilla, or Node.

Quick start

npm install @miraiclip/core @miraiclip/renderer

import { createProject } from "@miraiclip/core";
import { exportProject } from "@miraiclip/renderer";

const project = createProject({ width: 1920, height: 1080, fps: 30 });

project.dispatch({ type: "asset/add", payload: { id: "intro", kind: "video", src: "/intro.mp4", durationUs: 12_000_000 } });
project.dispatch({ type: "track/add", payload: { id: "v1", kind: "video" } });
project.dispatch({
  type: "clip/add",
  payload: { kind: "video", id: "c1", trackId: "v1", assetId: "intro", startUs: 0, durationUs: 5_000_000 },
});

project.undo();
project.redo();

const mp4 = await exportProject(project, { format: "mp4", quality: "high" });

Times are in microseconds (1 s = 1,000,000 µs). Next: playback on a canvas, reading state, the command catalog.

Let an agent edit

import { toToolDefinitions, commandTypeForTool, tryDispatch } from "@miraiclip/core";

const tools = toToolDefinitions(project.commandCatalog()); // Anthropic or OpenAI shape

// For each tool call the model makes:
const type = commandTypeForTool(call.name, Object.keys(project.commandCatalog()));
const result = tryDispatch(project, { type: type!, payload: call.input }); // failures are machine-readable

Or plug Claude, Codex or any MCP client straight in, with frame previews it can see:

npx @miraiclip/mcp --project ./video.miraiclip.json --assets ./media

AI integration · Assistant · MCP server

Packages

Status

Pre-1.0: APIs can change between minor versions. See the changelog, the roadmap and PLAN.md.

License

MIT