Compositions

A <Composition> defines the component, width, height, fps and duration of a renderable video.

Default Props and scaffold metadata

Pass defaultProps to provide initial values for your component.
Values must be JSON-serializable (Date, Map, Set, and staticFile() are supported). Use defaultProps for composition-wide values that should be visible and editable before the video renders.

For 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}
/>;

Folders

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

Stills

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

Dynamic duration, width, and height

Use calculateMetadata to make dimensions, duration, or props dynamic based on input props, fetched data, or asset metadata.

Nesting compositions within another

To add a composition within another composition, you can use the <Sequence> component with a width and height prop to specify the size of the composition.

<AbsoluteFill>
  <Sequence width={COMPOSITION_WIDTH} height={COMPOSITION_HEIGHT}>
    <CompositionComponent />
  </Sequence>
</AbsoluteFill>