packages/docs/docs/composition.mdx
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.
const Component: React.FC = () => null;
// ---cut---
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={{}} />
</>
);
};
A <Composition /> should be placed within a fragment of the root component (which is registered using registerRoot()).
The component takes the following props:
idID 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 -.
fpsAt how many frames the composition should be rendered.
durationInFramesHow many frames the composition should be long.
heightHeight of the composition in pixels.
widthWidth of the composition in pixels.
component or lazyComponentPass 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?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
:::
calculateMetadataSee: calculateMetadata()
schemaPass a Zod schema which your default props must satisfy. By doing so, you enable visual editing. See: Define a schema
component// @allowUmdGlobalAccess
// @filename: ./MyComp.tsx
export const MyComp = () => <></>;
// @filename: index.tsx
// ---cut---
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} />
</>
);
};
lazyComponentexport const MyVideo = () => {
return (
<>
<Composition id="my-comp" lazyComponent={() => import('./LazyComponent')} width={1080} height={1080} fps={30} durationInFrames={3 * 30} />
</>
);
};
You can use the <Folder /> component to organize your compositions in the sidebar.
import React from 'react';
const Component: React.FC = () => null;
// ---cut---
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} />
</>
);
};