Skip to main content

<Composition>

This is the component to use to register a video to make it renderable and make it show up in the sidebar of the Remotion development interface.

A composition represents the video you want to create, as a collection of clips (for example, several <Sequence>) that will play back to back to form your video.

src/Root.tsx
tsx
import { Composition } from "remotion";
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
component={Component}
durationInFrames={300}
width={1080}
height={1080}
fps={30}
id="test-render"
defaultProps={{}}
/>
{/* Additional compositions can be rendered */}
</>
);
};
src/Root.tsx
tsx
import { Composition } from "remotion";
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
component={Component}
durationInFrames={300}
width={1080}
height={1080}
fps={30}
id="test-render"
defaultProps={{}}
/>
{/* Additional compositions can be rendered */}
</>
);
};

API

A <Composition /> should be placed within a fragment of the root component (which is registered using registerRoot()).

The component takes the following props:

id

ID of the composition, as shown in the sidebar and also a unique identifier of the composition that you need to specify if you want to render it. The ID can only contain letters, numbers and -.

fps

At how many frames the composition should be rendered.

durationInFrames

How many frames the composition should be long.

height

Height of the composition in pixels.

width

Width of the composition in pixels.

component or lazyComponent

Pass the component in directly or pass a function that returns a dynamic import. Passing neither or both of the props is an error.

note

If you use lazyComponent, Remotion will use React Suspense to load the component. Components will be compiled by Webpack as they are needed, which will reduce startup time of Remotion. If you use lazyComponent, you need to use a default export for your component. This is a restriction of React Suspense.

defaultProps

optional

Give your component default props. Default props can be overriden using the Props editor and with Input Props.

Props must be an object that contains only pure JSON-serializable values.
Functions, classes, and other non-serializable values will be lost while rendering.
(This restriction does not apply to the <Player>, where you are allowed to pass functions as props.)

You may in addition use Date, Map, Set and staticFile() in your default props and Remotion will guarantee the proper serialization.

note

Type your components using the React.FC<{}> type and the defaultProps prop will be typesafe.

note

Passing huge objects to defaultProps can be slow. Learn how to avoid it.

note

Use a type, not an interface to type your defaultProps. Learn why

calculateMetadata

See: calculateMetadata()

schema

Pass a Zod schema which your default props must satisfy. By doing so, you enable visual editing. See: Define a schema

Example using component

tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
component={MyComp}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};
tsx
import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
component={MyComp}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};

Example using lazyComponent

tsx
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
lazyComponent={() => import("./LazyComponent")}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};
tsx
export const MyVideo = () => {
return (
<>
<Composition
id="my-comp"
lazyComponent={() => import("./LazyComponent")}
width={1080}
height={1080}
fps={30}
durationInFrames={3 * 30}
/>
</>
);
};

Organize compositions using folders

You can use the <Folder /> component to organize your compositions in the sidebar.

tsx
import { Composition, Folder } from "remotion";
 
export const Video = () => {
return (
<>
<Folder name="Visuals">
<Composition
id="CompInFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</Folder>
<Composition
id="CompOutsideFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</>
);
};
tsx
import { Composition, Folder } from "remotion";
 
export const Video = () => {
return (
<>
<Folder name="Visuals">
<Composition
id="CompInFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</Folder>
<Composition
id="CompOutsideFolder"
durationInFrames={100}
fps={30}
width={1080}
height={1080}
component={Component}
/>
</>
);
};

See also