Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.56
remotion-markup/compositions.mdMarkdown3 KBView on GitHub
A <Composition> defines the component, width, height, fps and duration of a renderable video.
Pass defaultProps to provide initial values for your component.
Values must be JSON-serializable (, , , and are supported).
Use for composition-wide values that should be visible and editable before the video renders.
DateMapSetstaticFile()defaultPropsFor Studio editing, keep defaultProps as an inline object literal on <Composition> or <Still>.
Do not store it in a variable, import it, spread it, create it with a helper, or wrap it in satisfies.
When scaffolding, keep the component and <Composition> registration in the same file so width, height, fps, durationInFrames, and defaultProps are visible next to the code that uses them.
Use type declarations for props rather than interface to ensure defaultProps type safety.
type Props = {
readonly title: string;
};
export const MyComposition = ({ title }: Props) => (
<h1>
{title}
</h1>
);
const defaultProps = { title: "Hello World" };
// 👍 Inline metadata and defaults
<Composition
id="MyComposition"
component={MyComposition}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
defaultProps={{ title: "Hello World" }}
/>;
// 👎 Hidden defaults cannot be saved back by Studio
<Composition
id="OtherComposition"
component={MyComposition}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
defaultProps={defaultProps}
/>;Use <Folder> to organize compositions in the sidebar.
Folder names can only contain letters, numbers, and hyphens.
import { Composition, Folder } from "remotion";
export const RemotionRoot = () => {
return (
<>
<Folder name="Marketing">
<Composition id="Promo" /* ... */ />
<Composition id="Ad" /* ... */ />
</Folder>
<Folder name="Social">
<Folder name="Instagram">
<Composition id="Story" /* ... */ />
<Composition id="Reel" /* ... */ />
</Folder>
</Folder>
</>
);
};Use <Still> for single-frame images. It does not require durationInFrames or fps.
import { Still } from "remotion";
import { Thumbnail } from "./Thumbnail";
export const RemotionRoot = () => {
return (
<Still
id="Thumbnail"
component={Thumbnail}
width={1280}
height={720}
/>
);
};Use calculateMetadata to make dimensions, duration, or props dynamic based on input props, fetched data, or asset metadata.
To render a composition’s component inside another composition, use <Sequence> with width and height when the nested content needs its own dimensions.
When the nested scene should have its own editable Studio timeline, use the connected composition structure.
<>
<Video src="https://remotion.media/video.mp4" />
<Sequence
width={1920}
height={1080}
>
<OverlayComponent />
</Sequence>
</>