# docs-demo

> Claude/Codex skill by [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 65k stars · Updated 2026-10-18

Add an interactive demo to the Remotion documentation. Use when creating a new \<Demo\> component for docs pages.

Tags: javascript, react, video

## Install

```sh
git clone https://github.com/remotion-dev/remotion /tmp/remotion && ln -s /tmp/remotion/.agents/skills/docs-demo ~/.claude/skills/docs-demo
```

## From README

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/. Effect demos are separate: use and register them in packages/docs/components/effects-demos/registry.ts with the real effect schema, not the generic options array. 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 comp: the React component compWidth / compHeight: canvas dimensions (e.g.

## Links

- HTML page: https://omgskills.com/skills/remotion-dev/remotion/docs-demo/
- GitHub: https://github.com/remotion-dev/remotion
- Author: [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md)

## More from this repo

- [pr-name](https://omgskills.com/skills/remotion-dev/remotion/pr-name/index.md) — Used to review or correct a Remotion pull request title
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-cli-option](https://omgskills.com/skills/remotion-dev/remotion/add-cli-option/index.md) — Used to add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-effect](https://omgskills.com/skills/remotion-dev/remotion/add-effect/index.md) — Used to add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images,...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars