Menu
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
| name | docs-demo |
| description | Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages. |
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.
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:
DemoType object with these fields:
id: unique string used in <Demo type="..." />comp: the React componentcompWidth / compHeight: canvas dimensions (e.g. 1280x720)fps: frame rate (typically 30)durationInFrames: animation lengthautoPlay: whether it plays automaticallyoptions: array of interactive controls (can be empty [])Add to the demos array in packages/docs/components/demos/index.tsx:
./typesdemos arrayUse in MDX with <Demo type="your-id" />
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, defaulttype: 'boolean' — checkbox with defaulttype: 'enum' — dropdown with values array and defaulttype: 'string' — text input with defaultOption values are passed to the component as inputProps. Access them as regular React props.
export const myDemo: DemoType = {
comp: MyDemoComp,
compHeight: 720,
compWidth: 1280,
durationInFrames: 150,
fps: 30,
id: 'my-demo',
autoPlay: true,
options: [],
};
Update Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.
Finalize a developed Remotion Element, add it to the docs gallery, render its previews, and run repository checks.
Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.
Router for all Remotion skills
Content, animation and effects best practices
Optimize Remotion Studio render performance by preferring imperative timeline state reads. Use when code reads the current frame with `useTimelinePosition()` or components unnecessarily render on every frame.
Based on SOC occupation classification
