Video Preview with Player

Revideo provides a React Player component (API reference) to embed Revideo projects into your React or NextJS web app. The component lets you preview videos and changes made to your variables in real-time without forcing you to export your project to mp4 beforehand. A full example of this can be found in our SaaS Template .

Passing your project to the Player

The player renders your project in the browser, so you pass it the project object itself - the value created with makeProject() and exported from your project file (usually ./src/project.ts):


import {Player} from '@revideo/player-react';
import project from '../revideo/src/project';
 
export default function Preview() {
  return <Player project={project} />;
}

Because you import the project directly, your web app bundles your Revideo project (and the scenes it imports) as part of its own build. There is no separate “serve” or “copy the build output” step anymore. What you see in the player is the same thing you see in the editor when you run npm start.

Note

Before version 0.10.0, the player instead took a src URL that pointed at a bundle served by npx revideo serve. That workflow has been removed - npx revideo serve is now a rendering endpoint (see Rendering over HTTP), and the player takes the project object directly. See the migration guide if you’re upgrading an existing app.

Passing variables

You can preview parameterized videos by passing the variables prop. Changing it re-renders the preview in real-time, which makes the player useful for building editors where users tweak inputs before exporting:


<Player project={project} variables={{title: 'Hello world'}} />

For the full list of props - controls, looping, volume, playback callbacks, and more - see the Player API reference.