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

docs-demo

NPX Install

Tags

SKILL.md Content

Adding an Interactive Demo to Docs

Steps

Options

Example registration