home / skills / remotion-dev / remotion / docs-demo

docs-demo skill

safe

This skill helps you add interactive demos to Remotion docs by guiding you through composing, registering, and embedding demos in MDX pages.

npx playbooks add skill remotion-dev/remotion --skill docs-demo

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

1.9 KB

---
name: docs-demo
description: Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
---

# Adding an Interactive Demo to Docs

Interactive demos render a Remotion composition inline in documentation pages using `@remotion/player`. They live in `packages/docs/components/demos/`.

## Steps

1. **Create a component** in `packages/docs/components/demos/` (e.g. `MyDemo.tsx`). It should be a standard React component using Remotion hooks like `useCurrentFrame()` and `useVideoConfig()`.

2. **Register the demo** in `packages/docs/components/demos/types.ts`:
   - Import the component
   - Export a `DemoType` object with these fields:
     - `id`: unique string used in `<Demo type="..." />`
     - `comp`: the React component
     - `compWidth` / `compHeight`: canvas dimensions (e.g. 1280x720)
     - `fps`: frame rate (typically 30)
     - `durationInFrames`: animation length
     - `autoPlay`: whether it plays automatically
     - `options`: array of interactive controls (can be empty `[]`)

3. **Add to the demos array** in `packages/docs/components/demos/index.tsx`:
   - Import the demo constant from `./types`
   - Add it to the `demos` array

4. **Use in MDX** with `<Demo type="your-id" />`

## Options

Options add interactive controls below the player. Each option needs `name` and `optional` (`'no'`, `'default-enabled'`, or `'default-disabled'`).

Supported types:

- `type: 'numeric'` — slider with `min`, `max`, `step`, `default`
- `type: 'boolean'` — checkbox with `default`
- `type: 'enum'` — dropdown with `values` array and `default`
- `type: 'string'` — text input with `default`

Option values are passed to the component as `inputProps`. Access them as regular React props.

## Example registration

```ts
export const myDemo: DemoType = {
  comp: MyDemoComp,
  compHeight: 720,
  compWidth: 1280,
  durationInFrames: 150,
  fps: 30,
  id: 'my-demo',
  autoPlay: true,
  options: [],
};
```

Overview

This skill helps you add an interactive Remotion demo to the documentation site by creating a new <Demo> component and registering it with the docs demo registry. It streamlines the process of embedding a playable Remotion composition using @remotion/player so readers can interact with live examples. The result is an inline demo with optional interactive controls that pass values to your component as props.

How this skill works

You create a standard React component that uses Remotion hooks like useCurrentFrame and useVideoConfig, then register it as a DemoType object with metadata (id, comp, dimensions, fps, duration, autoplay). The registry exports a demos array consumed by the documentation <Demo /> component; selecting the id in MDX renders the player. Options defined in the demo registration become interactive controls whose values are supplied as inputProps to your component.

When to use it

Demonstrate an animated snippet or feature directly inside a docs page.
Provide hands-on examples where readers can tweak parameters and see results immediately.
Show performance or visual behavior for components that depend on frame/time.
Teach Remotion APIs with live, editable examples tied to documentation text.

Best practices

Keep demos small and focused; limit durationInFrames and comp size to avoid heavy CPU usage.
Choose sensible compWidth/compHeight and fps so the player loads quickly on typical devices.
Use options sparingly and give good default values so the demo works without user input.
Name the demo id clearly and consistently to make MDX usage intuitive (e.g., 'video-loop', 'text-animate').
Access option values via inputProps and provide fallbacks to avoid runtime errors.

Example use cases

Add a tiny looping animation to illustrate useCurrentFrame and easing functions.
Show a text animation where a dropdown selects different fonts and a slider controls speed.
Embed a color or image compositing demo with boolean toggles for effects.
Demonstrate an export-related API by providing controls for resolution and frame range.

FAQ

How do options reach my component?

Option values are passed as inputProps to the component and can be read like normal React props.

What option types are available?

Supported option types are numeric (slider), boolean (checkbox), enum (dropdown), and string (text input).