Docs Demo
If you're working on Remotion's documentation and need to add an interactive demo that renders a composition inline using @remotion/player, this walks you through the exact file structure. You'll create a component in the demos folder, register it in types.ts with canvas dimensions and playback settings, add it to the demos array in index.tsx, then drop it into any MDX page. The options system is thoughtful: you can add sliders, checkboxes, dropdowns, or text inputs that get passed as props to your component, so readers can tweak parameters and see results live. It's narrowly scoped to one codebase, but if you're contributing to Remotion docs, it saves you from hunting through the repo to figure out the convention.
- skills.sh installs
- 2.6K
- GitHub stars
- 72.1K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add remotion-dev/remotion --skill docs-demo --agent claude-codeInstalls into .claude/skills of the current project.
Files
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 <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.
Steps
-
Create a component in
packages/docs/components/demos/(e.g.MyDemo.tsx). It should be a standard React component using Remotion hooks likeuseCurrentFrame()anduseVideoConfig(). -
Register the demo in
packages/docs/components/demos/types.ts:- Import the component
- Export a
DemoTypeobject with these fields:id: unique string used in<Demo type="..." />comp: the React componentcompWidth/compHeight: canvas dimensions (e.g. 1280x720)fps: frame rate (typically 30)durationInFrames: animation lengthautoPlay: whether it plays automaticallyoptions: array of interactive controls (can be empty[])
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/remotion-dev/remotion
- Categories
- Frontend Development, Documentation, Sales & Marketing, Generative Media
- First seen
- May 16, 2026
More from remotion-dev/remotion
All 13Recommended
More Frontend Development
barba-jsfreshtechbro/claudedesignskillsPage transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like expe2.5Kskills.sh installs
weread-year-in-review-video-templatenexu-io/open-designWeRead-inspired HyperFrames video template for vertical annual reading reports, personal reading dashboards, book-note recaps, and shareable year-in-review stor2.5Kskills.sh installs
wireframe-specowl-listener/designer-skillsSpecify wireframe layouts with content priority, component placement, and annotation.2.5Kskills.sh installs
gzh-designisjiamu/gzh-design-skill微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / 2.4Kskills.sh installs
create-mcp-appmodelcontextprotocol/ext-appsThis skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs2.3Kskills.sh installsgsap-performancenexu-io/open-designOfficial GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or w2.3Kskills.sh installs