# Diffusion Studio Core: Browser-Based Video Compositing Engine

This repository profile is provided by osrepos.com, an open source repository discovery platform.

Source: osrepos.com
Repository profile: https://osrepos.com/repo/diffusionstudio-core
Generated for open source discovery and AI-assisted research.

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
OSRepos URL: https://osrepos.com/repo/diffusionstudio-core

## 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.

## Topics

- TypeScript
- Video Editing
- WebCodecs
- Browser
- Media Composition
- Canvas2D
- Video Engine
- Audio Processing

## Repository Information

Last analyzed by OSRepos: Thu Mar 12 2026 08:20:03 GMT+0000 (Western European Standard Time)
Detail views: 2
GitHub clicks: 3

## Safety Notice

OSRepos shares public repositories for knowledge and discovery only. Review source code, dependencies, licenses, and security implications before running or installing anything.

## Content

## Introduction
Diffusion 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.

## Installation
To get started with Diffusion Studio Core, you can install it via npm:

sh
npm install @diffusionstudio/core


Once installed, you can import and use it in your TypeScript project:

typescript
import * as core from "@diffusionstudio/core";

const composition = new core.Composition();


## Examples
Diffusion Studio Core offers a rich set of features for manipulating media. Here are a few examples demonstrating its capabilities:

### Concatenate two videos
typescript
const sources = await Promise.all([
  core.Source.from<core.VideoSource>('/intro.webm'),
  core.Source.from<core.VideoSource>('/outro.mp4'),
]);

const layer = await composition.add(
  new core.Layer({
    mode: 'SEQUENTIAL'
  })
);

await layer.add(
  new core.VideoClip(sources[0], {
    range: [2, 8],
  })
);

await layer.add(
  new core.VideoClip(sources[1], {
    range: [2, 12],
  })
);


### Apply basic transitions
typescript
new core.VideoClip(/** source **/, {
  transition: {
    duration: 1,
    type: 'dissolve',
  }
})


### Mask an image
typescript
const mask = new core.RectangleMask({
  width: 640,
  height: 1080,
  radius: 100,
});

new core.ImageClip(/** source **/, { mask });


### Animate your clips with key frames
typescript
new core.TextClip({
  text: "Hello World",
  align: 'center',
  baseline: 'middle',
  position: 'center',
  animations: [
    {
      key: 'rotation',
      frames: [
        { time: 0, value: 0 },
        { time: 2, value: 720 },
      ],
    },
  ]
});


### Add basic effects to visual clips
typescript
new core.RectangleClip({
  position: 'center',
  delay: 6,
  duration: 4,
  effects: [
    {
      type: 'blur',
      value: 10,
    },
    {
      type: 'hue-rotate',
      value: 90
    }
  ]
})


## Why use Diffusion Studio Core
Diffusion 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.

## Links
*   GitHub Repository: [diffusionstudio/core](https://github.com/diffusionstudio/core)
*   Documentation: [Diffusion Studio Docs](https://docs.diffusion.studio/docs)
*   Discord: [Join the Discord](https://discord.com/invite/zPQJrNGuFB)