Skip to main content

<Folder>

Available from v3.0.1

By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.

Example

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

will create a tree structure in the sidebar that looks like this:

Folder behavior

  • Folder names can only contain a-z, A-Z, 0-9 and -.
  • Folders can be nested.
  • They only visually change the sidebar in the preview.

See also