---
id: daily-docs-demo
name: "docs-demo"
url: https://skills.yangsir.net/skill/daily-docs-demo
author: remotion-dev
domain: ai-frontend-engineering
tags: ["react", "documentation", "ui-components", "interactive-demos"]
install_count: 2400
rating: 4.30 (27 reviews)
github: https://github.com/remotion-dev/remotion
---

# docs-demo

> 在 Remotion 文档中嵌入可交互的组件演示，支持实时预览和播放控制，让用户直观理解 API 用法

**Stats**: 2,400 installs · 4.3/5 (27 reviews)

## Before / After 对比

### 文档演示制作效率

**Before**:

手动录制 GIF 或编写静态代码示例，每次更新需要重新截图和替换，维护成本高，用户缺乏互动体验

**After**:

直接在文档中嵌入可运行的 Remotion 组件，支持播放控制和实时预览，更新代码自动同步，用户可直接交互理解 API

| Metric | Before | After | Change |
|---|---|---|---|
| 更新时间 | 30分钟 | 2分钟 | -93% |

## Readme

# docs-demo

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

```
Weekly Installs278Repository[remotion-dev/remotion](https://github.com/remotion-dev/remotion)GitHub Stars40.8KFirst SeenJan 31, 2026Security Audits[Gen Agent Trust HubPass](/remotion-dev/remotion/docs-demo/security/agent-trust-hub)[SocketPass](/remotion-dev/remotion/docs-demo/security/socket)[SnykPass](/remotion-dev/remotion/docs-demo/security/snyk)Installed onopencode231codex229gemini-cli225claude-code222github-copilot219amp215

---
*Source: https://skills.yangsir.net/skill/daily-docs-demo*
*Markdown mirror: https://skills.yangsir.net/api/skill/daily-docs-demo/markdown*