Slides as React components. Each slide lives under slides/<id>/index.tsx and default-exports an array of page components. The @open-slide/core runtime handles layout, scaling, navigation, thumbnails, and fullscreen play mode — you just write the pages.
pnpm install
pnpm devThen open the dev server and edit slides/getting-started/index.tsx, or create a new slide at slides/<your-slide>/index.tsx.
| Command | Description |
|---|---|
pnpm dev | Start the dev server with hot reload. |
pnpm build | Build a static bundle you can deploy. |
pnpm preview | Preview the built bundle locally. |
// slides/my-slide/index.tsximporttype{Page,SlideMeta}from'@open-slide/core';constCover: Page=()=>(<divstyle={{width: '100%',height: '100%'}}>Hello</div>);exportconstmeta: SlideMeta={title: 'My slide'};exportdefault[Cover]satisfiesPage[];Every page renders into a fixed 1920 × 1080 canvas — design with absolute pixel values. Put images, videos, and fonts under slides/<id>/assets/ and import them directly.
See CLAUDE.md for the full authoring guide.
- Arrow keys / PageUp / PageDown move between pages.
Fenters fullscreen play mode; Esc exits.- In play mode: Space / → next, ← prev.
This workspace ships with Claude Code skills preconfigured under .claude/skills/ and .agents/skills/. Ask Claude Code to "make slides about X" and the create-slide skill takes over. Use apply-comments to iterate via inspector-style markers inside your source.
Optional open-slide.config.ts at the workspace root:
importtype{OpenSlideConfig}from'@open-slide/core';constopenSlideConfig: OpenSlideConfig={port: 5173,};exportdefaultopenSlideConfig;Supported fields: slidesDir, port.