REC · The video engine for the browser

Build video editors, not video editor plumbing.

Miraiclip is the engine under your editor: timeline, commands, frame-accurate preview and export. Vanilla JS, React, Vue or Svelte. You bring the UI.

Try it now Read the quickstart
$ npm i @miraiclip/core
react.miraiclip.com
The Miraiclip editor in its default dark theme: text styles panel, preview, multi-track timeline and AI assistant
The Editor UI kit, running on Miraiclip. One engine, eight themes, one config file. theme: default · dark
SC 02On day oneTC 00:00:09:00

Twelve things your editor does on day one.

Each tile names the command or component behind it. The plumbing under all twelve is the part you don't write.

Multi-track timeline

<Timeline.Root>

Karaoke captions

clip/add · caption

Keyframes

keyframe/set

Transitions on cuts

transition/add

79 built-in effects

effect/add

Move, scale, rotate

<TransformBox>

Waveforms and fades

<Waveform>

Any aspect ratio

createProject()

Templates in batch

@miraiclip/templates

Edits in plain words

@miraiclip/assistant

Undo for every edit

project.undo()

MP4 and WebM export

exportProject()
SC 03Your stackTC 00:00:18:00

Your framework. Your markup. Same engine.

The React components ship unstyled, with data attributes for every state. Vue, Svelte and plain JS drive the same controllers directly.

PreviewPanel.tsx 
import { Preview, usePlayback } from "@miraiclip/react";

// Inside <ProjectProvider> and <PlaybackProvider>.
export function PreviewPanel() {
  const { isPlaying, toggle } = usePlayback();
  return (
    <>
      <Preview width={640} height={360} />
      <button type="button" onClick={toggle}>
        {isPlaying ? "Pause" : "Play"}
      </button>
    </>
  );
}
What it renders
00:06

The preview is the export: WebCodecs decode and a WebGL compositor, seeking to the exact frame.

SC 04EffectsTC 00:00:27:00

79 effects. 7 categories.

Every effect is a command with typed params, so it undoes, serializes and exports like any other edit. Register your own with registerEffectRenderer.

Color17
duotone · hueShift · posterize
Film21
kodachrome · noir · vintage
Stylize14
halftone · toon · pixelate
Glitch & Retro7
rgbSplit · vhs · crt
Blur & Light9
glow · tiltShift · lightLeak
Distort8
fisheye · swirl · kaleidoscope
Frame & Key3
chromaKey · letterbox

Thumbnails on this page are CSS stand-ins. The engine renders each effect in WebGL, and renderEffectThumbnails draws real ones for your effect picker.

SC 05Use casesTC 00:00:38:00

Cut for every format.

One engine underneath the editor your users need, whatever shape it takes.

16:9

In-app editors for SaaS

Ship a trimmer, captioner or full multi-track editor inside your product.

9:16

Short-form and social

Reframe, caption and export vertical clips without leaving the tab.

16:9 · batch

Personalized video at scale

Bind a template to rows of data and render each one in a worker or Node.

1:1 · MCP

AI video agents

Let an LLM edit through the same validated commands your UI uses.

4:5 · variants

E-commerce and ads

Generate product videos and ad variants straight from a catalog.

16:9 · audio-first

Learning and podcasts

Cut lectures and episodes, add karaoke captions, export locally.

SC 06Why MiraiclipTC 00:00:47:00

The engine, without the trade-offs.

Build in-houseCloud render APIMiraiclip
Works with your UI framework Yes, eventually Not your UI Vanilla, React, Vue, Svelte
Preview matches export Hard Approximate Same renderer
Export without servers Rarely No Browser, worker, Node
Undo, redo, serializable history You build it No Built in
AI tools and MCP You build it Partial From the command catalog
Time to first export Quarters Days An afternoon
Editor UI kit

Or start from a finished editor.

The full source of the editor at react.miraiclip.com. Rebrand it in one config file and ship it in your product.

  • Timeline, preview, export, captions, audio, effects and animation
  • 67 templates, a code editor for HTML blocks and an AI assistant
  • 8 themes in light and dark, plus your name, logo and accent
  • React 18, TypeScript, Vite, Tailwind · private repo with lifetime updates
Try it live Get the kit $199 one-time · SDK plan separate
The editor in the Neon dark theme The editor in the Glassmorphism dark theme The editor in the Neobrutalism light theme The editor in the Shadcn light theme
SC 07PricingTC 00:00:56:00

Free until you're a team.

Free for individuals and small teams. Unlimited renders on every plan, because export runs on your users' machines.

Under wraps

Pricing is on its way

We're finalizing pricing for teams. Interested in Miraiclip? Leave us a message and we'll get back to you.

hello@miraiclip.com

Before you install.

Something not here? Ask on Discord.

Is Miraiclip free?

Yes for individuals, companies of up to 3 people, non-profits and education. Larger teams will need a paid plan; we’re finalizing pricing now. There are no per-render fees on any plan.

Which frameworks does it support?

Vanilla JS, React, Vue and Svelte. @miraiclip/react ships unstyled components for the timeline, preview, scrubber, waveforms and transform handles; the other frameworks drive the same controllers directly.

Do I need render servers?

No. Export runs in the browser tab, in a worker or in Node. MP4 needs Chrome or Edge; elsewhere, export WebM.

Does the preview match the export?

They are the same renderer: WebCodecs decode and a WebGL compositor. What your users scrub is what they ship.

Can an AI model edit projects?

Yes. Tool definitions come straight from the command catalog, and there is an editing assistant package and an MCP server. Every AI edit is a normal command, so it undoes like any other.

What is in the Editor UI kit?

The full source of the editor at react.miraiclip.com, for $199 once with lifetime updates. Commercial use also needs the SDK plan for your company size.

Your editor, ready to render.

exportProject(project, { format: "mp4" })H.264
Read the quickstart Try it now Join Discord