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/open-slide/open-slide.

Introducing open-slide 2.0

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

Get started

Getting started

The slide framework
built for agents.

Every page is a React component on a 1920 × 1080 canvas. This deck walks the loop: init, prompt, edit, comment, present.

Press to begin$npx @open-slide/cli init

open-slide · getting started01 / 18

View more demos

How it works

Three steps to a live deck.

Scaffold once, prompt your agent, then iterate on the canvas. No config, no templates.

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

Features

Just React. And an editor that talks to your agent.

No DSL, no template language. Each page is a component on a fixed canvas, and every edit writes back to the same file.

Page docs

slides/hello/index.tsxtsx · 16 lines

import type { Page } from '@open-slide/core';
 
const ACCENT = '#1f9e6e';
const WORD = 'story';
const SUBTITLE = 'Versioned, reviewable, yours.';
 
const Cover: Page = () => (
  <section style={{ padding: 120 }}>
    <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
      Hello, <em style={{ color: ACCENT }}>{WORD}</em>.
    </h1>
    <p>{SUBTITLE}</p>
  </section>
);
 
export default [Cover] satisfies Page[];

rendered outputlive

Hello, story.

Versioned, reviewable, yours.

open-slide · hello01 / 01

Edit the file and the canvas re-renders. Anything you can write in React goes on a page.

A slide is a file.

Each page is a React component on a 1920×1080 canvas. Steps, transitions, and morphs are plain exports in the same file.

/create-slidea Q2 product launch

...

Prompt to deck.

One /create-slide prompt drafts pages as real components. Refine with follow-ups, not templates.

Bring your own agent.

Slides are plain .tsx files, so any tool that reads and writes React already works.

cover

Q2 Launch

What we're shipping, why it matters.

Comment. The agent applies.

Leave a note on any element. Run /apply-comments and the agent edits exactly what you flagged.

cover

Q2 Launch

What we're shipping, why it matters.

1 unsaved changeDiscardSave

Click. Tweak. Save.

Select any element and change text, type, or color on the canvas. One Save lands the batch as a single write.

In the wild

Used by people who create engaging slides.

Hang Huang@hanghuang_

what’s the secret sauce you landed on 👀

Sam Lambert@samlambert

open-slide + cursor

Cursor Compile 26
Sam Lambert — CEO of PlanetScale

FAQ

Questions, answered.

Support

Keep open-slide free and independent.

If open-slide has been useful to you, consider buying a coffee. It helps keep new features and fixes coming.

Buy me a coffee

Author a deck in the next minute.

One command, zero config. Free and open source under the MIT license. Your agent takes it from here.

Read the docs

The slide frameworkbuilt for agents.

Live demo

The slide frameworkbuilt for agents.

Three steps to a live deck.

Spin up a workspace

Ask your agent

Edit, comment, apply

Just React. And an editor that talks to your agent.

Hello, story.

A slide is a file.

Prompt to deck.

Bring your own agent.

Comment. The agent applies.

Click. Tweak. Save.

Used by people who create engaging slides.

Questions, answered.

Keep open-slide free and independent.

Author a deck in the next minute.

The slide framework
built for agents.