docs-demo

remotion-dev/remotion

Create interactive Remotion composition demos for documentation pages.

What is docs-demo?

Add interactive demos to Remotion documentation by creating React components that render inline using @remotion/player. Use this skill when building new <Demo> components for docs pages with optional interactive controls.

Create React components in packages/docs/components/demos/ using Remotion hooks like useCurrentFrame() and useVideoConfig()
Register demos in types.ts with canvas dimensions, frame rate, duration, and autoPlay settings
Add interactive controls (numeric sliders, boolean checkboxes, enum dropdowns, text inputs) that pass values to components via inputProps
Embed demos in MDX documentation pages using <Demo type="your-id" />
Support effect-specific demos separately using <EffectsDemo> with registered schemas

How to install docs-demo

npx skills add https://github.com/remotion-dev/remotion --skill docs-demo

Prerequisites

Remotion project with packages/docs structure
@remotion/player installed
React and TypeScript knowledge

Claude Code

Cursor

Windsurf

Cline

How to use docs-demo

1.Create a new React component file in packages/docs/components/demos/ (e.g., MyDemo.tsx) using Remotion hooks
2.Define a DemoType object in packages/docs/components/demos/types.ts with id, comp, compWidth, compHeight, fps, durationInFrames, autoPlay, and options array
3.Import the demo constant and add it to the demos array in packages/docs/components/demos/index.tsx
4.Use the demo in MDX files with <Demo type="your-id" />
5.For effect demos, use <EffectsDemo type="effects-..." /> and register in packages/docs/components/effects-demos/registry.ts with the real effect schema

Use cases

Good for

Building an animated transition demo with interactive speed and easing controls
Creating a text animation showcase with adjustable font size and color options
Demonstrating video composition techniques with interactive duration and frame rate settings
Adding interactive effect previews to documentation with real effect schemas
Showcasing Remotion player capabilities with auto-play and manual control options

Who it's for

Remotion documentation maintainers
Library developers creating interactive component showcases
Technical writers building interactive API documentation
Contributors adding new demo components to Remotion docs

docs-demo FAQ

What types of interactive controls can I add to a demo?

Four types: numeric (slider with min/max/step), boolean (checkbox), enum (dropdown with values array), and string (text input). Each option requires a name and optional setting ('no', 'default-enabled', or 'default-disabled').

How do I access option values in my component?

Option values are passed as inputProps. Access them as regular React props in your component.

What's the difference between <Demo> and <EffectsDemo>?

<Demo> is for general Remotion composition demos with custom options. <EffectsDemo> is specifically for effect demos and requires registration in the effects-demos registry with the real effect schema.

Where should demo components be created?

All demo components should be created in packages/docs/components/demos/ as standard React components.

What Remotion hooks can I use in demo components?

You can use standard Remotion hooks like useCurrentFrame() and useVideoConfig() to access frame information and video configuration.

Full instructions (SKILL.md)

Source of truth, from remotion-dev/remotion.

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/.

Effect demos are separate: use <EffectsDemo type="effects-..." /> and register them in packages/docs/components/effects-demos/registry.ts with the real effect schema, not the generic <Demo> options array.

Steps

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().
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 [])
Add to the demos array in packages/docs/components/demos/index.tsx:
- Import the demo constant from ./types
- Add it to the demos array
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

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