@openvideo/studio

High-Performance React 19 & Tailwind v4 Studio for Pixi.js Video Compositions.
An interactive visual studio featuring multi-track timelines, live parametric props inspection, frame-stepping player controls, and client-side WebCodecs MP4 rendering.

🌟 Key Features

• 🎞️ Multi-Track Timeline: Visualizes Sequence, View, Series, Audio, and Video layers with duration pills, track toggles, and millisecond scrubbing.
• 🎛️ Live PropsInspector: Tweak strings, colors, numbers, booleans, and selects defined in your schema: { ... } with instant hot-reloading.
• 📐 Interactive Viewport Stage: Fluid zoom (fit, 50%, 100%, 200%), panning, SMPTE timecode readout, and frame-accurate stepping.
• 🎬 WebCodecs MP4 Export Drawer: Render and download bit-exact MP4 videos directly from the browser with configurable bitrate, FPS, and progress reporting.
• ⚡ Zero CSS Friction: Self-contained CSS injection or optional standalone stylesheet export.
• 🛡️ Resilient Error Boundary: Traps runtime exceptions in user compositions with clean code-frame overlays without crashing the studio.

📦 Installation

# Using pnpm
pnpm add @openvideo/studio @openvideo/engine pixi.js react react-dom

# Using npm
npm install @openvideo/studio @openvideo/engine pixi.js react react-dom

🚀 Quickstart

Method 1: Zero-Config Mount (mountStudio)

Ideal for standalone HTML pages or Vite entrypoints (src/main.ts):

import { mountStudio } from "@openvideo/studio";
import { myComposition } from "./projects/my-video.video";

mountStudio({
  projects: [myComposition],
  defaultProjectId: "my-composition",
});

Method 2: Embedded React Component (<Studio />)

Embed the complete editor inside an existing React 19 application:

import React from "react";
import { Studio } from "@openvideo/studio";
import "@openvideo/studio/style.css";
import { allProjects } from "./projects";

export function App() {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <Studio
        projects={allProjects}
        defaultProjectId="stomp-typography"
        theme="dark"
      />
    </div>
  );
}

🎛️ Parametric Props & The Studio Inspector

Export a schema: { ... } in your defineVideo({ ... }) composition to automatically generate visual controls in the Studio sidebar:

import { defineVideo } from "@openvideo/engine";

export default defineVideo({
  id: "hero-banner",
  size: "1080p",
  duration: "5s",
  schema: {
    headline: {
      type: "string",
      label: "Headline",
      default: "BUILD DETERMINISTIC CINEMA",
    },
    accentColor: {
      type: "color",
      label: "Accent Color",
      default: "#38bdf8",
    },
    speedMultiplier: {
      type: "number",
      label: "Animation Speed",
      default: 1.0,
      min: 0.5,
      max: 3.0,
      step: 0.1,
    },
    showCrosshairs: {
      type: "boolean",
      label: "Show Grid Overlay",
      default: true,
    },
  },
  setup({ stage, props, width, height, onFrame }) {
    // Access props live as they are changed in the studio inspector
    console.log(props.headline, props.accentColor);
  },
});

⌨️ Keyboard Shortcuts

| Shortcut | Action | | :--- | :--- | | Space | Toggle Play / Pause | | Left Arrow / Right Arrow | Step backward / forward 1 frame | | Shift + Left / Right | Step backward / forward 10 frames | | Home / End | Jump to start / end of timeline | | Cmd / Ctrl + E | Open Export MP4 Drawer | | Cmd / Ctrl + 0 | Fit stage to viewport |

📄 License

MIT © OpenVideo Contributors