Embed a video in React

Use Viewer to render an interactive composition in a React application. It plays source components in the browser; it does not download or encode an MP4.

Mount a video entry

Import a video component and its metadata, then pass both as an entry. Adjust the relative import to your application's source structure:

"use client";

import {Viewer} from "odori";
import Launch, {metadata} from "./videos/launch/video";

const entry = {component: Launch, metadata};

export function VideoPreview() {
  return (
    <Viewer
      entry={entry}
      input={{headline: "Built for teams."}}
      controls
      loop
      muted
    />
  );
}

Keep the entry object outside the component when it does not depend on props. In a server-rendered React framework, mount the interactive viewer inside a client component.

Playback options

Browser autoplay policies can block audible playback. Start muted for an automatic preview and provide a user-controlled way to enable sound.

Supply inputs and assets

input provides the video's content props. layout can supply a layout override, while assets supplies reference-to-URL mappings. Ensure fonts and local assets are reachable from the host application's public directory.

A browser viewer does not execute a Node-side prepare.ts. If the composition requires preparation, run that work on your server and pass its serializable result through the prepared prop. Keep network credentials on the server.

Choose source playback or an encoded file

Use source playback when users need live inputs, frame inspection, or interactive customization. Use an exported file with your application's video player when you need a fixed, distributable asset.

Export through the CLI using the same source and inputs to create that file. See exporting and the authoring API for lower-level playback surfaces.