Remotion文档交互式演示教程：为技术文档嵌入动态视频组件

docs-demo by remotion-dev/remotion

259 周安装量

40,700 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/remotion-dev/remotion --skill docs-demo

内容创作 React 技术文档

🇨🇳中文介绍

为文档添加交互式演示

交互式演示使用 @remotion/player 在文档页面中内嵌渲染 Remotion 合成。它们位于 packages/docs/components/demos/ 目录下。

步骤

创建组件：在 packages/docs/components/demos/ 目录下创建一个组件（例如 MyDemo.tsx）。它应该是一个使用 Remotion 钩子（如 useCurrentFrame() 和 useVideoConfig()）的标准 React 组件。
注册演示：在 packages/docs/components/demos/types.ts 文件中注册：
- 导入组件

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

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

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 Installs

259

Repository

remotion-dev/remotion

GitHub Stars

40.7K

First Seen

Jan 31, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode219

codex217

gemini-cli213

claude-code210

github-copilot207

amp203