core: Compose and Render Video in the Browser

Overview

Diffusion Studio Core is a browser-based engine for arranging and rendering video, audio, and image assets on a timeline. It addresses the media-composition layer for developers building their own editing interfaces, rather than providing a complete editor with timeline and inspector components.

It uses WebCodecs for media decoding and encoding and Canvas 2D for drawing. This makes it a fit for client-side applications that need interactive playback or final rendering in the browser, not server-side video rendering.

Key Features

• Declarative timeline compositions with layered and sequential clips.
• Video, image, audio, text, and shape clips.
• Editing operations including splitting, transitions, masking, and keyframe animation.
• Visual effects, captions, rich text, and audio ramps.
• Interactive playback and a high-fidelity rendering mode.
• Browser media processing through WebCodecs and Canvas 2D.
• Framework-agnostic TypeScript API for use with frontend frameworks such as Svelte, Vue, and Angular.

Use Cases

• Developers building a browser-based non-linear video editor who need a rendering engine beneath their own editing UI.
• Teams creating web tools that combine user-provided video, images, audio, and text into a composed output.
• Frontend developers adding timeline-based media playback and rendering to an existing application without adopting a specific UI framework.
• Product builders who need client-side video composition and can meet the browser's media API and security-header requirements.

Project Facts

• Language: TypeScript
• License: MPL-2.0
• Stars: 1.2k
• Forks: 145
• Topics: audio, browser, canvas2d, composer, composition, engine, image, media, render, typescript, video, webcodecs
• Archived: No

Getting Started

Install the package:

npm install @diffusionstudio/core

See the README and documentation for setup and usage details.

Alternatives

• editly: Editly assembles scripted video edits through Node.js and ffmpeg, while core is a browser-based engine for interactive timeline composition and rendering.

Considerations

• This is an engine, not a ready-made editor UI. Applications need to build their own timeline and editing controls.
• It targets browser-side rendering. The README recommends Remotion for server-side rendering and Mediabunny for lower-level media processing.
• The README says the app must set Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: credentialless to enable SharedArrayBuffer and related browser APIs.
• The README describes free use with a rendered-video watermark; removing it requires a license key.
• The project is not archived, but repository activity and star counts do not by themselves establish its suitability or support guarantees.