{
  "id": 11680997,
  "title": "Miraiclip: an open-source engine for building video editors in the browser",
  "url": "https://urgent.news/2026/10/03/miraiclip-an-open-source-engine-for-building-video-editors-in-the",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-03T12:31:24.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/vinamrasareen/miraiclip-an-open-source-engine-for-building-video-editors-in-the-browser-1eo0"
  },
  "original_language": "en",
  "account": "Miraiclip is an open-source (MIT) engine for creating video editors that operate in web browsers. This engine provides the underlying components, such as project state, a microsecond timeline, undo/redo functionality, a WebGL renderer, and export capabilities. Users can build the user interface with technologies like React, Vue, Svelte, or plain JavaScript.\n\nTo create a new project, developers can use the `createProject` function from the `@miraiclip/core` package. For example, the following code snippet creates a project with a width of 1920 pixels, a height of 1080 pixels, and a frame rate of 30 frames per second:\n\n```javascript\nconst project = createProject({\nwidth: 1920,\nheight: 1080,\nfps: 30\n});\n```\n\nNext, commands can be dispatched to modify the project. These commands include adding assets, tracks, and clips, as well as performing various edits like splitting or moving clips. For instance, adding a video asset and a video track, and creating a clip from the asset:\n\n```javascript\nproject.dispatch({\ntype: 'asset/add',\npayload: {\nid: 'intro',\nkind: 'video',\nsrc: '/intro.mp4',\ndurationUs: 12_000_000\n}\n});\n\nproject.dispatch({\ntype: 'track/add',\npayload: {\nid: 'v1',\nkind: 'video'\n}\n});\n\nproject.dispatch({\ntype: 'clip/add',\npayload: {\nkind: 'video',\nid: 'c1',\ntrackId: 'v1',\nassetId: 'intro',\nstartUs: 0,\ndurationUs: 5_000_000\n}\n});\n```\n\nEdits can be made to clips, such as splitting or moving them. The `undo` method allows for undoing the last change, and every change is represented as JSON patches for synchronization and collaboration. The preview and export processes utilize the same compositor, ensuring consistency between the preview and the exported file. The export process uses WebCodecs for decoding, WebGL (PixiJS) for compositing, and reuses the preview's compositor. The exported file can be saved as an MP4 with high quality.\n\nOther features include overlays created with HTML and CSS, which can function as form fields. The editor demo also allows for template hydration, enabling personalized video creation. Multiple videos can be personalized using a single template. Finally, Miraiclip can import data from various sources, such as JSON, NDJSON, or CSV files, and can also be utilized by machine learning models for automated editing tasks.",
  "summary": "I've been building Miraiclip, an open-source (MIT) engine for video editors that run in the browser. It isn't an editor app. It's the part underneath: project state, a microsecond timeline, undo/redo, a WebGL renderer and export. You build the UI in React, Vue, Svelte or plain JS. Here's a 90-second demo of an editor built on it: https://comaniacs.github.io/miraiclip/#demo A project is a store,…",
  "key_points": [
    "Miraiclip is an open-source engine for building video editors in browsers",
    "Provides project state, timeline, undo/redo, WebGL renderer, and export",
    "Users can build UI with React, Vue, Svelte or plain JavaScript"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}