Skip to main content

registerRoot()

registerRoot is a function that registers the root component of the Remotion project. In the root component, one or multiple compositions should be returned (in the case of multiple compositions, they should be wrapped in a React Fragment).

info

registerRoot() should live in a file that is separarate from the list of compositions. This is because when using React Fast Refresh, all the code in the file that gets refreshed gets executed again, however, this function should only be called once.

Example​

src/index.ts
tsx
import { registerRoot } from "remotion";
import { RemotionVideo } from "./Video";
 
registerRoot(RemotionVideo);
src/index.ts
tsx
import { registerRoot } from "remotion";
import { RemotionVideo } from "./Video";
 
registerRoot(RemotionVideo);
src/Video.tsx
tsx
import MyComponent from "./MyComponent";
import MyOtherComponent from "./MyOtherComponent";
 
export const RemotionVideo = () => {
  return (
    <>
      <Composition
        id="comp"
        fps={30}
        height={1080}
        width={1920}
        component={MyComponent}
      />
      <Composition
        id="anothercomp"
        fps={30}
        height={1080}
        width={1920}
        component={MyOtherComponent}
      />
    </>
  );
};
src/Video.tsx
tsx
import MyComponent from "./MyComponent";
import MyOtherComponent from "./MyOtherComponent";
 
export const RemotionVideo = () => {
  return (
    <>
      <Composition
        id="comp"
        fps={30}
        height={1080}
        width={1920}
        component={MyComponent}
      />
      <Composition
        id="anothercomp"
        fps={30}
        height={1080}
        width={1920}
        component={MyOtherComponent}
      />
    </>
  );
};

See also​