Skip to main content

Passing props to a composition

You can parametrize the content of the videos using React properties ("props").

Defining accepted props​

To define which props your video accepts, give your component the React.FC type and pass in a generic argument describing the shape of the props you want to accept:

src/MyComponent.tsx
tsx
type Props = {
  propOne: string;
  propTwo: number;
}
 
export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>props: {propOne}, {propTwo}</div>
  );
}
src/MyComponent.tsx
tsx
type Props = {
  propOne: string;
  propTwo: number;
}
 
export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>props: {propOne}, {propTwo}</div>
  );
}

Define default props​

When registering a component that takes props as a composition, you must define default props:

src/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent } from "./MyComponent";
 
export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="my-video"
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={30}
        component={MyComponent}
        defaultProps={{
          propOne: "Hi",
          propTwo: 10,
        }}
      />
    </>
  );
};
src/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComponent } from "./MyComponent";
 
export const Root: React.FC = () => {
  return (
    <>
      <Composition
        id="my-video"
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={30}
        component={MyComponent}
        defaultProps={{
          propOne: "Hi",
          propTwo: 10,
        }}
      />
    </>
  );
};

Default props are useful so you don't preview your video with no data. Default props will be overriden by input props.

Define a schema​

You can use Zod to define a typesafe schema for your composition.

Input props​

Input props are props that are passed in while invoking a render that can replace or override the default props.

note

Input props must be an object and serializable to JSON.

Passing input props in the CLI​

When rendering, you can override default props by passing a CLI flag. It must be either valid JSON or a path to a file that contains valid JSON.

Using inline JSON
bash
npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'
Using inline JSON
bash
npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'
Using a file path
bash
npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json
Using a file path
bash
npx remotion render HelloWorld out/helloworld.mp4 --props=./path/to/props.json

Passing input props when using server-side rendering​

When server-rendering using renderMedia() or renderMediaOnLambda(), you can pass props using the inputProps option:

tsx
import { renderMedia } from "@remotion/renderer";
 
await renderMedia({
  composition,
  serveUrl,
  codec: "h264",
  outputLocation,
  inputProps: {
    titleText: "Hello World",
  },
});
tsx
import { renderMedia } from "@remotion/renderer";
 
await renderMedia({
  composition,
  serveUrl,
  codec: "h264",
  outputLocation,
  inputProps: {
    titleText: "Hello World",
  },
});

Passing input props in GitHub Actions​

See: Render using GitHub Actions

When using GitHub Actions, you need to adjust the file at .github/workflows/render-video.yml to make the inputs in the workflow_dispatch section manually match the shape of the props your root component accepts.

yaml
workflow_dispatch:
  inputs:
    titleText:
      description: "Which text should it say?"
      required: true
      default: "Welcome to Remotion"
    titleColor:
      description: "Which color should it be in?"
      required: true
      default: "black"
yaml
workflow_dispatch:
  inputs:
    titleText:
      description: "Which text should it say?"
      required: true
      default: "Welcome to Remotion"
    titleColor:
      description: "Which color should it be in?"
      required: true
      default: "black"

Retrieve input props​

Input props are passed to the component of your <Composition> directly and you can access them like regular React component props.

If you need the input props in your root component, use the getInputProps() function to retrieve input props.

You can still use components normally​

Even if a component is registered as a composition, you can still use it like a regular React component and pass the props directly:

tsx
<MyComponent propOne="hi" propTwo={10} />
tsx
<MyComponent propOne="hi" propTwo={10} />

This is useful if you want to concatenate multiple scenes together. You can use a <Series> to play two components after each other:

ChainedScenes.tsx
tsx
import { Series } from "remotion";
 
const ChainedScenes = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>
        <MyComponent propOne="hi" propTwo={10} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={90}>
        <AnotherComponent />
      </Series.Sequence>
    </Series>
  );
};
ChainedScenes.tsx
tsx
import { Series } from "remotion";
 
const ChainedScenes = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>
        <MyComponent propOne="hi" propTwo={10} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={90}>
        <AnotherComponent />
      </Series.Sequence>
    </Series>
  );
};

You may then register this "Master" component as an additional <Composition>.

See also​