open-slide README

The project's README from github.com/open-slide/open-slide. As one markdown file: README.md.

open-slide github cover

Vercel OSS Program

open-slide

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

Why open-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.

Highlights

🤖 Agent-native authoring

Works with any coding agent (Claude Code, Codex, Cursor, …). The scaffolder ships with built-in skills:

From a one-line prompt to a polished deck, no boilerplate.

🎯 In-browser inspector

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.

🎬 Professional present mode

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.

📦 Export to static HTML & PDF

One command exports your deck as a self-contained static HTML site or a print-ready PDF. Share without a server.

📁 Slide manager

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.

🚀 Deploy-friendly

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.

Get started

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

The 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.

Repo layout

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.

Development

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

Support

If open-slide has been useful to you, consider supporting development:

ko-fi

License

MIT © Yiwei Ho

open-slide (open-slide/open-slide)

Searching Database…

9.3K ·GitHub
Open-slide
Что это такое?Опенсорсный фреймворк для слайдов, заточенный под кодинг-агентов: вы описываете презентацию обычным языком, агент пишет React-код, а open-slide берёт на себя холст, масштабирование, навигацию, хот-релоад и режим показа.
Это приложение вроде PowerPoint или фреймворк на коде?Это фреймворк на коде: каждая страница слайда — произвольный React-компонент, а не ограниченный DSL, и рендерится на фиксированный холст 1920 × 1080. Вы управляете этим из своего кодинг-агента, а не через редактор слайдов.
Как создать первую презентацию?Запустите npx @open-slide/cli init — команда развернёт минимальное рабочее окружение на Vite + React с преднастроенными навыками для агента Claude Code. Затем попросите агента выполнить /create-slide или отредактируйте slides/index.tsx напрямую.
Мне нужен какой-то конкретный AI-агент для кодинга?Нет — работает с любым кодинг-агентом (Claude Code, Codex, Cursor и другими). Навыки /create-slide и /slide-authoring встроены с самого начала, а рабочее окружение заранее настроено под Claude Code.
Могу ли я делать любой макет, или есть подвох?С макетами полная свобода — страницы это просто React-компоненты, — но каждый слайд живёт на фиксированном холсте 1920 × 1080. Агент сначала читает справку /slide-authoring (типографика, палитра, правила макета), а жёсткие правила хранятся в CLAUDE.md.
Как работает цикл правок «кликни и оставь комментарий»?В dev-сервере вы кликаете по любому элементу и вешаете комментарий вроде «сделай это красным»; он сохраняется в исходниках как маркер @slide-comment. Запустите /apply-comments — агент применит все накопившиеся правки и уберёт маркеры.
Что даёт режим показа во время самого выступления?Полноэкранный показ с навигацией с клавиатуры, а также режим докладчика с превью текущего и следующего слайда, заметками для спикера и таймером.
Как поделиться готовой презентацией?Одной командой её можно экспортировать в самодостаточный статический HTML-сайт или готовый к печати PDF. Простой статический билд разворачивается в один клик на Vercel, Cloudflare Pages, Zeabur, Netlify или любой другой статический хостинг — сервер и рантайм не нужны.
Как быть с картинками, шрифтами и логотипами брендов?Встроенная панель ассетов управляет картинками, видео и шрифтами для каждой презентации, а интегрированный каталог svgl позволяет найти и вставить логотип любого бренда без поисков нужного SVG.
What are similar projects?bolt-slides, marp, beautiful-html-templates, slidev, spectacle, mcp-use, univer, ppt-master
Which topics is it in?slides, presentation, vite, pdf, developers, html, coding-agent, web-development, framework, agent, react, claude-code
Creator
open-slide
Size
57.1 MB
Stars
9.3K
Updated
CommitOct 16Release@open-slide/[email protected]Oct 12
Age
5mo
Commits · 90 Days