

What it is
A React-first slide framework designed for AI agents to author. Every slide page is an arbitrary React component on a 1920x1080 canvas. Files live on disk, are version-controlled, and reviewable in PRs like any code.
How it works
- Init -
npx @open-slide/cli init my-deckscaffolds the project with aslides/directory and hot-reloading dev server - Author - Tell your AI agent (Claude Code, Cursor, Codex, Gemini CLI, etc.) to create slides. It writes React components to disk.
- Iterate - Visual inspector lets you click elements to tweak text/font/color. Leave
@slide-commentmarkers for the agent to apply./apply-commentstriggers the agent rewrite.
Slide format
Each slide is just a React file:
import type { Page } from '@open-slide/core';
const Cover: Page = () => (
<div style={{ background: '#08090a', color: '#f7f8f8' }}>
<h1 style={{ fontSize: 188 }}>Hello, <em>deck</em>.</h1>
</div>
);
export default [Cover] satisfies Page[];
Features
- Visual editor - click, tweak text/color/font, save. Changes buffer until you hit Save
- Comment system - pin comments to elements, agent rewrites on
/apply-comments - Asset management - drag images in, search 1500+ brand logos via svgl integration
- Agent agnostic - works with Claude Code, Cursor, Codex, Gemini CLI, Windsurf, Zed, OpenCode
Language
TypeScript/React. Uses a custom CLI (@open-slide/cli).
Why it's interesting
This is the "slides as code" philosophy taken to its logical conclusion for the AI era. Instead of fighting with PowerPoint or Google Slides, you describe what you want and an agent writes React. Because it's just code, you get git diffs, PRs, and full version history. The visual editor + comment system bridges the gap for non-coders who still want to point-and-click tweak things.