open-slide is a React-first slide framework where each slide is a .tsx file rendered on a fixed 1920×1080 canvas. Decks are arbitrary code — versioned in your repo, reviewable in pull requests, and authored alongside (or by) AI agents like Claude Code, Cursor, Codex, and Gemini.

How is open-slide different from Reveal.js, Slidev, or Spectacle?

Other frameworks lean on Markdown, a DSL, or a constrained component library. open-slide gives each slide a full React component on a 1920×1080 canvas, so you can compose any layout, animation, or data visualization you can write in code. The trade-off is fewer guardrails, more control — designed for teams who already think in components.

Which AI coding agents work with open-slide?

Any agent that edits React works. open-slide ships skills for Claude Code, and the same files are editable by Codex, Cursor, Gemini CLI, OpenCode, Windsurf, Zed, and any other tool that can read and write .tsx files. There is no proprietary protocol — agents work because slides are just code.

Do I need to know React to use open-slide?

Basic React knowledge helps, but agents can author the React for you. Many users describe slides in natural language and let the agent generate the .tsx file, then iterate visually using the in-browser inspector. Knowing React unlocks the ceiling; not knowing it is fine for the floor.

How do I get started with open-slide?

Run `npx @open-slide/cli init` to scaffold a workspace. The CLI sets up the @open-slide/core runtime, the dev server, and example slides. Open the dev server in your browser, ask your agent to draft a deck, and iterate with the visual inspector or by leaving @slide-comment markers in the source.

Is open-slide open source?

Yes. open-slide is MIT-licensed. The runtime ships as @open-slide/core on npm and the scaffolder as @open-slide/cli. Source lives at github.com/1weiho/open-slide.

The slide framework
built for agents.

A React-first slide framework. Every page is arbitrary code on a 1920×1080 canvas. No layout to fight. Design anything you can imagine.

Read the docs

open-slide · getting started

v1

Author slides
with your agent.

Three steps from empty folder to a live, editable slide.

01 init02 prompt03 edit04 assets05 comment

View more demos01 / 12

Slides as code.
Crafted by agents.

01 · scaffold
Spin up a workspace
Creates the slide workspace. Every future deck you author lives inside it.
$npx @open-slide/cli init my-deck
✓ ready in 3s
02 · author
Ask your agent
Your agent drafts pages as arbitrary React components. You guide with prompts.
›/create-slide for Q2 roadmap
...
03 · iterate
Edit, comment, apply
Click any element to tweak it visually. Or leave a comment for the agent to apply.
›/apply-comment
✓ applied change

A slide is a file.
Just React, nothing else.

slides/hello/index.tsx

tsx · 16 lines

import type { Page } from '@open-slide/core';
 
const ACCENT = '#d56b48';
const WORD = 'deck';
const SUBTITLE = 'A React slide, rendered live.';
 
const Cover: Page = () => (
  <div style={{ background: '#08090a', color: '#f7f8f8' }}>
    <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
      Hello, <em style={{ color: ACCENT }}>{WORD}</em>.
    </h1>
    <p>{SUBTITLE}</p>
  </div>
);
 
export default [Cover] satisfies Page[];

rendered outputlive

open-slide · 012026

Hello, deck.

A React slide, rendered live.

hello001 / 001

Talk to the agent.
Or just tap the canvas.

01 · agent applies

Drop a comment. The agent rewrites the file.

Click any block, leave a note. The inspector pins it as a @slide-comment marker in your source. Run /apply-comments — the agent edits exactly what you flagged and clears the marker.

cover

Q2 Launch

What we're shipping, why it matters.

Agent applying

Inspect<h1>

ContentQ2 Launch

Click. Tweak. Save.

Toggle inspect, click any element. Change text, font, weight, color, or swap an image — right on the canvas. Edits buffer in memory until you hit Save, so one batch lands as a single HMR write.

cover

Q2 Launch

What we're shipping, why it matters.

1 unsaved changeDiscardSave

Inspect<h1>

ContentQ2 Launch

Typography

Size

88px

Weight

Semibold · 600▾

Style

Color

Text

#D56B48

Drop in images.
Pull in logos.

localhost:5173 · assets

SlidesAssets

↑Upload

claude.svg

3.4 KB

codex-dark.svg

2.1 KB

gemini.svg

4.0 KB

cursor-dark.svg

5.2 KB

cloudflare.svg

6.8 KB

zeabur-dark.svgzeabur-light.svg

4.7 KB

Search svgl✕

⌕vercel

Vercel

Cloudflare

Zeabur

drop · rename · replace

In-place file management.

Drag images straight into the deck. Rename and replace from the same pane the inspector uses to swap an element’s src.

svgl · 1500+ logos

Brand logos, no dance.

Search svgl from inside the editor. Pick a result and the SVG lands in your assets folder, ready to import.

Bring your own agent. Anything that edits React works.

Claude

Codex

Cursor

Gemini CLI

OpenCode

Windsurf

Zed

Claude

Codex

Cursor

Gemini CLI

OpenCode

Windsurf

Zed

Questions, answered.

Author a deck
in the next minute.

One command, zero config. Your agent takes it from here.

The slide frameworkbuilt for agents.

Live demo

Author slideswith your agent.

Slides as code.Crafted by agents.

Spin up a workspace

Ask your agent

Edit, comment, apply

A slide is a file.Just React, nothing else.