docs-demo
Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.
Install
git clone https://github.com/remotion-dev/remotion /tmp/remotion && ln -s /tmp/remotion/.agents/skills/docs-demo ~/.claude/skills/docs-demoFrom 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.
More from this repo
pr-name
Used to review or correct a Remotion pull request title
add-cli-option
Used to add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring...
add-effect
Used to add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images,...