remotion-dev
Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.
bunx add-skill remotion-dev/remotion -s writing-docsLoading…
Documentation lives in packages/docs/docs as .mdx files.
.mdx file in packages/docs/docspackages/docs/sidebars.tsbun render-cards.ts in packages/docs to generate social preview cardsOne API per page: Each function or API should have its own dedicated documentation page. Do not combine multiple APIs (e.g., getEncodableVideoCodecs() and getEncodableAudioCodecs()) on a single page.
Public API only: Documentation is for public APIs only. Do not mention, reference, or compare against internal/private APIs or implementation details.
Use headings for all fields: When documenting API options or return values, each property should be its own heading. Use ### for top-level properties and #### for nested properties within an options object. Do not use bullet points for individual fields.
Basic syntax highlighting:
```ts
const x = 1;
```
Use twoslash to check snippets against TypeScript:
```ts twoslash
import {useCurrentFrame} from 'remotion';
const frame = useCurrentFrame();
```
Use // ---cut--- to hide setup code - only content below is displayed:
```ts twoslash
import {useCurrentFrame} from 'remotion';
// ---cut---
const frame = useCurrentFrame();
```
```ts twoslash title="MyComponent.tsx"
console.log('Hello');
```
- <Step>1</Step> First step
- <Step>2</Step> Second step
<ExperimentalBadge>
<p>This feature is experimental.</p>
</ExperimentalBadge>
<Demo type="rect"/>
Demos must be implemented in packages/docs/components/demos/index.tsx.
Use to indicate when a feature or parameter was added. No import needed - it's globally available.
## myFunction()<AvailableFrom v="4.0.123" />
For section headings:
## Saving to another cloud<AvailableFrom v="3.2.23" />
For optional parameters in API documentation:
? to the heading - this indicates the parameter is optional
--> Don't do it if it is a CLI flag (beginning with --) - CLI flags are always optional_optional_ text - the ? suffix is sufficient### onError?
Called when an error occurs. Default: errors are thrown.
Do NOT do this:
### onError?
_optional_
Called when an error occurs.
When a parameter is both optional and was added in a specific version:
### onError?<AvailableFrom v="4.0.50" />
Called when an error occurs.
If a parameter became optional in a specific version (was previously required):
### codec?
Optional since <AvailableFrom v="5.0.0" inline />. Previously required.
After adding or editing a page, generate social media preview cards:
cd packages/docs && bun render-cards.ts
To check that documentation builds without errors:
# from the monorepo root
bun run build-docs
This validates MDX syntax, twoslash snippets, and broken links.
Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.