{"name":"Diffusion Studio Core: Browser-Based Video Compositing Engine","description":"Diffusion Studio Core is a powerful, browser-based video compositing engine built with TypeScript. It leverages WebCodecs and Canvas2D for hardware-accelerated media processing directly within the browser. Designed for developers building non-linear editors, it supports both interactive playback for editing and high-fidelity rendering for final output across video, audio, and image workloads.","github":"https://github.com/diffusionstudio/core","url":"https://osrepos.com/repo/diffusionstudio-core","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/diffusionstudio-core","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/diffusionstudio-core.md","json":"https://osrepos.com/repo/diffusionstudio-core.json","topics":["TypeScript","Video Editing","WebCodecs","Browser","Media Composition","Canvas2D","Video Engine","Audio Processing"],"keywords":["TypeScript","Video Editing","WebCodecs","Browser","Media Composition","Canvas2D","Video Engine","Audio Processing"],"stars":null,"summary":"Diffusion Studio Core is a powerful, browser-based video compositing engine built with TypeScript. It leverages WebCodecs and Canvas2D for hardware-accelerated media processing directly within the browser. Designed for developers building non-linear editors, it supports both interactive playback for editing and high-fidelity rendering for final output across video, audio, and image workloads.","content":"## Introduction\nDiffusion Studio Core is a powerful, browser-based video compositing engine written in TypeScript. It provides a robust framework for fast media composition, optimized for video, audio, and image workloads. Leveraging the WebCodecs API and Canvas2DContext, it taps directly into hardware-accelerated processing within the browser, enabling both interactive playback for editing and high-fidelity rendering for final output. Developers often use it to build non-linear editors or other timeline-based media applications.\n\n## Installation\nTo get started with Diffusion Studio Core, you can install it via npm:\n\nsh\nnpm install @diffusionstudio/core\n\n\nOnce installed, you can import and use it in your TypeScript project:\n\ntypescript\nimport * as core from \"@diffusionstudio/core\";\n\nconst composition = new core.Composition();\n\n\n## Examples\nDiffusion Studio Core offers a rich set of features for manipulating media. Here are a few examples demonstrating its capabilities:\n\n### Concatenate two videos\ntypescript\nconst sources = await Promise.all([\n  core.Source.from<core.VideoSource>('/intro.webm'),\n  core.Source.from<core.VideoSource>('/outro.mp4'),\n]);\n\nconst layer = await composition.add(\n  new core.Layer({\n    mode: 'SEQUENTIAL'\n  })\n);\n\nawait layer.add(\n  new core.VideoClip(sources[0], {\n    range: [2, 8],\n  })\n);\n\nawait layer.add(\n  new core.VideoClip(sources[1], {\n    range: [2, 12],\n  })\n);\n\n\n### Apply basic transitions\ntypescript\nnew core.VideoClip(/** source **/, {\n  transition: {\n    duration: 1,\n    type: 'dissolve',\n  }\n})\n\n\n### Mask an image\ntypescript\nconst mask = new core.RectangleMask({\n  width: 640,\n  height: 1080,\n  radius: 100,\n});\n\nnew core.ImageClip(/** source **/, { mask });\n\n\n### Animate your clips with key frames\ntypescript\nnew core.TextClip({\n  text: \"Hello World\",\n  align: 'center',\n  baseline: 'middle',\n  position: 'center',\n  animations: [\n    {\n      key: 'rotation',\n      frames: [\n        { time: 0, value: 0 },\n        { time: 2, value: 720 },\n      ],\n    },\n  ]\n});\n\n\n### Add basic effects to visual clips\ntypescript\nnew core.RectangleClip({\n  position: 'center',\n  delay: 6,\n  duration: 4,\n  effects: [\n    {\n      type: 'blur',\n      value: 10,\n    },\n    {\n      type: 'hue-rotate',\n      value: 90\n    }\n  ]\n})\n\n\n## Why use Diffusion Studio Core\nDiffusion Studio Core is ideal if you are building a timeline-based application, such as a Non-Linear Editor (NLE), that requires in-browser video rendering. It's perfect for composing multiple assets into video or audio outputs and offers a framework-agnostic, efficient video engine compatible with popular frameworks like Svelte, Vue, Solid, and Angular.\n\n## Links\n*   GitHub Repository: [diffusionstudio/core](https://github.com/diffusionstudio/core)\n*   Documentation: [Diffusion Studio Docs](https://docs.diffusion.studio/docs)\n*   Discord: [Join the Discord](https://discord.com/invite/zPQJrNGuFB)","metrics":{"detailViews":2,"githubClicks":3},"dates":{"published":null,"modified":"2026-03-12T08:20:03.000Z"}}