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/.
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: [],
};