packages/docs/docs/folder.mdx
By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
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} />
</>
);
};
will create a tree structure in the sidebar that looks like this:
a-z, A-Z, 0-9 and -.