A fast, browser based video compositing engine powered by WebCodecs
npm install @diffusionstudio/core-v4



Diffusion Studio Core is a browser based video engine built in TypeScript for fast media composition. Think of it like a game engine that is optimized for video, audio and image workloads. It supports both interactive playback for editing and a high fidelity rendering mode for final output. Developers often use it to build non linear editors or other timeline based media applications (e.g. Diffusion Studio Pro). Under the hood it takes advantage of Canvas2DContext and the WebCodecs API to tap directly into hardware accelerated processing in the browser.
https://github.com/user-attachments/assets/3878f293-ab1b-4bb1-8088-b9493546180a
sh
npm install @diffusionstudio/core
`Recommended usage:
`typescript
import * as core from "@diffusionstudio/core";const composition = new core.Composition();
`Features
A few highlights: declarative timeline compositions, layering, splitting, shapes, captions, rich text, silence removal, effects, transitions, keyframing, bounding boxes, masking, audio ramps, font management, checkpoints, realtime playback and hardware accelerated rendering.Let’s look at some of these in action.
$3
`typescript
const sources = await Promise.all([
core.Source.from('/intro.webm'),
core.Source.from('/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],
})
);
`$3
`typescript
new core.VideoClip(/ source /, {
transition: {
duration: 1,
type: 'dissolve',
}
})
`$3
`typescript
const mask = new core.RectangleMask({
width: 640,
height: 1080,
radius: 100,
});new core.ImageClip(/ source /, { mask });
`$3
`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 },
],
},
]
});
`$3
`typescript
new core.RectangleClip({
position: 'center',
delay: 6,
duration: 4,
effects: [
{
type: 'blur',
value: 10,
},
{
type: 'hue-rotate',
value: 90
}
]
})
``You can use the engine for free as long as you keep the "Made with Diffusion Studio" watermark on the rendered video. To remove the watermark, you can purchase a license key.
No. It’s a one time purchase and your key stays valid forever.
There is no license server. Your key is a signed payload created with our private key. The library includes a public key that verifies it locally so it works even without an internet connection.
We can regenerate it any time. Just email contact |at| diffusion.studio.
You can’t share your key with other organizations. Other than that, feel free to use it across as many of your own apps or domains as you need.