Skip to main content

Parametrized rendering

Parametrized rendering is the idea of creating a video template once and then render as many videos as you want with different parameters. Just like in regular React, we use props to reuse and customize components!

Defining accepted props​

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

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

Define default props​

When registering the component as a sequence, you can define the default props:

tsx
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,
        }}
      />
    </>
  );
};
tsx
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,
        }}
      />
    </>
  );
};

By using React.FC, you can ensure type safety and avoid errors caused by typos.

Input props​

Input props are props that are passed in externally while rendering that can replace or override the default props

Passing input props in the CLI​

When rendering (for example using the npm run build script defined in package.json), you can override some or all default props by passing a CLI flag. It must be either valid JSON or a path to a file that contains valid JSON. Using this technique, type safety cannot be guaranteed.

Using inline JSON

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

Using a file path:

bash
npx remotion render src/index.tsx HelloWorld out/helloworld.mp4 --props=./path/to/props.json
bash
npx remotion render src/index.tsx HelloWorld out/helloworld.mp4 --props=./path/to/props.json

See also: CLI flags

Passing input props when server rendering​

When server-rendering using renderMedia(), 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 as regular React component props.

Available since v2.0.: You can also use the getInputProps() function to retrieve props that you have given as an input. This is useful if you need to retrieve the props in a position where you are not inside your component, such as when determining the video duration, dimensions or frame rate.

You can still use components as normal​

Even if you have registered a component as a composition, you can still use it normally in your videos and pass its props directly. Default props don't apply in this case.

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

See also​