docs-demo
installsforks
How to install docs-demo?
remotion-dev/remotion/docs-demo
$npx -y skills add remotion-dev/remotion --skill docs-demodocs-demo is an agent skill published from remotion-dev/remotion, installable through the skills CLI.
SKILL.md
| 1 | # Adding an Interactive Demo to Docs |
| 2 | |
| 3 | Interactive demos render a Remotion composition inline in documentation pages using `@remotion/player`. They live in `packages/docs/components/demos/`. |
| 4 | |
| 5 | Effect demos are separate: use `<EffectsDemo type="effects-..." />` and register them in `packages/docs/components/effects-demos/registry.ts` with the real effect `schema`, not the generic `<Demo>` options array. |
| 6 | |
| 7 | ## Steps |
| 8 | |
| 9 | 1. **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()`. |
| 10 | |
| 11 | 2. **Register the demo** in `packages/docs/components/demos/types.ts`: |
| 12 | - Import the component |
| 13 | - Export a `DemoType` object with these fields: |
| 14 | - `id`: unique string used in `<Demo type="..." />` |
| 15 | - `comp`: the React component |
| 16 | - `compWidth` / `compHeight`: canvas dimensions (e.g. 1280x720) |
| 17 | - `fps`: frame rate (typically 30) |
| 18 | - `durationInFrames`: animation length |
| 19 | - `autoPlay`: whether it plays automatically |
| 20 | - `options`: array of interactive controls (can be empty `[]`) |
| 21 | |
| 22 | 3. **Add to the demos array** in `packages/docs/components/demos/index.tsx`: |
| 23 | - Import the demo constant from `./types` |
| 24 | - Add it to the `demos` array |
| 25 | |
| 26 | 4. **Use in MDX** with `<Demo type="your-id" />` |
| 27 | |
| 28 | ## Options |
| 29 | |
| 30 | Options add interactive controls below the player. Each option needs `name` and `optional` (`'no'`, `'default-enabled'`, or `'default-disabled'`). |
| 31 | |
| 32 | Supported types: |
| 33 | |
| 34 | - `type: 'numeric'` — slider with `min`, `max`, `step`, `default` |
| 35 | - `type: 'boolean'` — checkbox with `default` |
| 36 | - `type: 'enum'` — dropdown with `values` array and `default` |
| 37 | - `type: 'string'` — text input with `default` |
| 38 | |
| 39 | Option values are passed to the component as `inputProps`. Access them as regular React props. |
| 40 | |
| 41 | ## Example registration |
| 42 | |
| 43 | ```ts |
| 44 | export const myDemo: DemoType = { |
| 45 | comp: MyDemoComp, |
| 46 | compHeight: 720, |
| 47 | compWidth: 1280, |
| 48 | durationInFrames: 150, |
| 49 | fps: 30, |
| 50 | id: 'my-demo', |
| 51 | autoPlay: true, |
| 52 | options: [], |
| 53 | }; |
| 54 | ``` |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
