Passing props to a composition

twoslash

type Props = {
  propOne: string;
  propTwo: number;
}

export const MyComponent: React.FC<Props> = ({propOne, propTwo}) => {
  return (
    <div>props: {propOne}, {propTwo}</div>
  );
}
// - MyComponent

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:

tsx

// @include: example-MyComponent

Define default props

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

tsx

// organize-imports-ignore

// @filename: MyComponent.tsx
import React from 'react';
export const MyComponent: React.FC<{
  propOne: string;
  propTwo: number;
}> = () => null;

// @filename: Root.tsx

// ---cut---
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<AvailableFrom v="4.0.0"/>

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.

bash

npx remotion render HelloWorld out/helloworld.mp4 --props='{"propOne": "Hi", "propTwo": 10}'

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

const serveUrl = '/path/to/bundle';
const outputLocation = '/path/to/frames';
// ---cut---
import {renderMedia, selectComposition} from '@remotion/renderer';

const inputProps = {
  titleText: 'Hello World',
};

const composition = await selectComposition({
  serveUrl,
  id: 'my-video',
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  outputLocation,
  inputProps,
});

You should pass your inputProps to both selectComposition() and renderMedia().

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'

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

// @include: example-MyComponent
// ---cut---
<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:

tsx

// @include: example-MyComponent
const AnotherComponent: React.FC = () => {
  return null;
};
// ---cut---
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>.