Skip to main content

Create a new video

If you haven't done so yet, start the Recorder:

bash
bun start
bash
bun start

Remotion calls each output video a "Composition". There are two ways to generate a new composition:

1. Visual way​

Open http://localhost:3000 and in the left sidebar, right-click on the "empty" composition. Select "Duplicate" and give your composition an ID. Confirm.

2. Manual way​

Open the project in a code editor. You will see an empty <Composition> under remotion/Root.tsx:

tsx
<Composition
  component={Main}
  id="empty"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
    platform: "x" as const,
  }}
  calculateMetadata={calcMetadata}
/>
tsx
<Composition
  component={Main}
  id="empty"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
    platform: "x" as const,
  }}
  calculateMetadata={calcMetadata}
/>

Copy and paste the <Composition /> component to duplicate it and give it an id that is different than "empty". For example:

remotion/Root.tsx
tsx
<Composition
  component={Main}
  id="empty"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
  }}
  calculateMetadata={calcMetadata}
/>
<Composition
  component={Main}
  id="my-video"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
  }}
  calculateMetadata={calcMetadata}
/>
remotion/Root.tsx
tsx
<Composition
  component={Main}
  id="empty"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
  }}
  calculateMetadata={calcMetadata}
/>
<Composition
  component={Main}
  id="my-video"
  schema={videoConf}
  defaultProps={{
    theme: "light" as const,
    canvasLayout: "square" as const,
    scenes: [],
    scenesAndMetadata: [],
  }}
  calculateMetadata={calcMetadata}
/>

Save, and you should see the new composition when you look at the Remotion Studio on http://localhost:3000.