Submit an example

Have a small, remixable Remotion example? We'd love to see it.

Examples should be submitted with code. A strong submission is easy to preview, easy to copy into a Remotion project, and useful as a building block in real videos.

Preferred example format

An example should ideally be a single, self-contained TSX file.

Each example should live in its own folder: packages/docs/examples/<category>/<slug>/. Put the MDX page at packages/docs/examples/<category>/<slug>/index.mdx and the TSX source next to it.

Start from the reusable template in packages/docs/examples-template/.

The MDX page imports that TSX file for the live preview, and shows the exact same code in a fenced tsx code block. Keeping the displayed code inline (rather than generating it at build time) means both readers in the browser and AI agents reading the served Markdown see the full source. A test (src/test/examples.test.ts) enforces that the code block stays identical to the source file.

The preferred format is:

• Export the example component
• Export fixed width, height, fps, and durationInFrames
• Define the Remotion <Composition> directly in the file
• No local imports, except from npm packages
• No multiple files required to understand or use the example
• Copy-pastable into a Remotion project
• Binary assets use remote URLs only
• Remote assets are publicly accessible and stable

For example:

import {Composition} from 'remotion';

export const width = 1920;
export const height = 1080;
export const fps = 30;
export const durationInFrames = 120;

export const MyExample = () => {
	return <div>...</div>;
};

export const RemotionRoot = () => {
	return (
		<Composition
			id="MyExample"
			component={MyExample}
			width={width}
			height={height}
			fps={fps}
			durationInFrames={durationInFrames}
		/>
	);
};

The MDX page can then use the shared page template, which renders a preview, a "Use it" section, and the source code:

import {ExamplePage} from '@site/src/components/Examples/ExamplePage';
import {
	MyExample,
	durationInFrames,
	fps,
	height,
	width,
} from './my-example';

<ExamplePage
	component={MyExample}
	durationInFrames={durationInFrames}
	fps={fps}
	height={height}
	width={width}
>

```tsx twoslash title="my-example.tsx"
// Paste the full contents of my-example.tsx here.
// It must match the file exactly — a test enforces this.
```

</ExamplePage>

The fenced code block must be an exact copy of the colocated TSX file. This is intentional: it keeps the source visible in the served Markdown for agents while the imported module powers the live preview.

If an example needs binary assets, they should be referenced by URL:

const imageUrl = 'https://remotion.media/example-image.png';
const videoUrl = 'https://remotion.media/example-video.mp4';

What makes a good example?

A good example is:

• Small enough to understand quickly
• Useful in more than one project
• Easy to remix
• Focused on one visual idea, technique, or workflow
• Possible to preview with a short rendered video or still image
• Actionable for a Remotion user

What to include

When submitting an example as a pull request, include:

• An example folder in packages/docs/examples/<category>/<slug>/
• An index.mdx page and the single-file TSX source code in that folder
• What the viewer should see
• A rendered preview, if available
• What makes it useful
• Required npm dependencies or remote asset URLs
• Links to inspiration, if any

Not a great fit

These are usually less suitable:

• Full video templates with many unrelated parts
• Highly specific branded videos
• Examples requiring private APIs or private assets
• Large apps with many moving parts
• Examples that cannot be previewed meaningfully

Submit your example

Submit examples by opening a pull request against the Remotion repository.

Open a pull request on GitHub