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

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