Installation
Add the core and the renderer to your app.
npm install @miraiclip/core @miraiclip/renderer| Package | Runs in | What it does |
|---|---|---|
@miraiclip/core | Browser, worker, Node | State, commands, history, events, AI tools |
@miraiclip/renderer | Browser | Playback, preview, stills and export (WebCodecs + WebGL) |
Optional packages:
| Package | Add it for |
|---|---|
@miraiclip/server-export | Exporting from Node, plus a CLI |
@miraiclip/templates | Parameterized videos and batch rendering |
@miraiclip/audio-sources | Stock and AI-generated audio with licenses |
@miraiclip/assistant | An AI editing assistant, any model |
@miraiclip/mcp | An MCP server for agents |
Framework setup
No extra setup. Import from @miraiclip/core and @miraiclip/renderer in any ES module.
No adapter is needed. Create the project once (outside components, or in a ref), pass it down as a prop, and read state with useSyncExternalStore. See Reading state. A @miraiclip/react package with ready-made hooks is planned.
No adapter is needed. Create the project once, pass it down as a prop, and mirror the slices you render into shallowRefs. See Reading state. A @miraiclip/vue package with composables is planned.
No adapter is needed. Create the project once, pass it down as a prop, and mirror the slices you render into $state inside an $effect. See Reading state. A @miraiclip/svelte package is planned.
Requirements
- Preview and browser export need WebCodecs. Chromium-based browsers (Chrome, Edge, Arc, Opera) support everything. See Compatibility.
- The renderer is browser-only. Load it on the client only in SSR frameworks (Next.js, Nuxt, SvelteKit).
- Times are in microseconds: 1 second = 1,000,000 µs.