GitHub stars GitHub forks License: MIT
The slide framework built for agents. Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content.
Every slide renders into a fixed 1920 ×ばつ 1080 canvas. Pages are arbitrary React components, not a constrained DSL.
npx @open-slide/cli init my-slide
Slides are visual code. Agents are great at writing code. open-slide is the missing runtime that turns "make slides about X" into a polished, presentable deck — without you ever leaving the chat.
Works with any coding agent (Claude Code, Codex, Cursor, ...). The scaffolder ships with built-in skills:
/create-slide— drafts a deck end-to-end. Asks four scoping questions (topic & aesthetic, page count, text density, motion vs. static), picks an id, plans the structure, and writes the pages./slide-authoring— the technical reference for the 1920 ×ばつ 1080 canvas, type scale, palette, and layout rules. The agent reads this before writing.
From a one-line prompt to a polished deck, no boilerplate.
Click any element in the dev server and attach a comment — "make this red", "change to 'Open Slide Rocks'", "shrink the headline". Comments are persisted as @slide-comment markers in source. Run /apply-comments and the agent applies every pending edit, then clears the markers.
The loop: present → click to comment → /apply-comments → repeat.
Manage images, videos, and fonts per deck through a built-in assets panel. Search and drop in any brand logo via the integrated svgl catalogue — no more hunting for SVGs.
Fullscreen playback with keyboard navigation, plus a presenter mode with current/next slide preview, speaker notes, and a timer. Built for the stage, not just the browser tab.
One command exports your deck as a self-contained static HTML site or a print-ready PDF. Share without a server.
Organise decks into folders with custom emoji and drag-and-drop to reorder. Useful once you've built more than three decks and need to find anything.
Outputs a plain static build — one-click deploy to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host. No server, no runtime, no lock-in.
npx @open-slide/cli init my-slide
cd my-slide
pnpm devThe scaffolded workspace ships with agent skills preconfigured for Claude Code. From there you drive the deck through your agent — or edit slides/<id>/index.tsx directly. See CLAUDE.md for the hard rules.
This repo is a pnpm + Turbo monorepo.
| Path | Description |
|---|---|
| packages/core | @open-slide/core — runtime (home page, slide viewer, present mode, inspector), Vite plugin, and the open-slide dev/build/preview CLI. |
| packages/cli | @open-slide/cli — npx @open-slide/cli init scaffolder. Generates a minimal workspace where Vite/React/tsconfig stay hidden inside core. |
| apps/demo | Example workspace that consumes @open-slide/core via workspace:*. Used for local development of the framework. |
pnpm install pnpm dev # runs the demo against the local @open-slide/core pnpm build # builds all packages pnpm check # type-checks all packages pnpm lint # lints via biome
If open-slide is useful to you, please star the repo on GitHub — it helps other people find the project.
If open-slide has been useful to you, consider supporting development:
MIT