Slides as code.
Crafted by agents.

1. 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
2. 02 · author

   Ask your agent

   Your agent drafts pages as arbitrary React components. You guide with prompts.

   ›/create-slide for Q2 roadmap

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

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[];

Talk to the agent.
Or just tap the canvas.

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.

Questions, answered.

What is open-slide?

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.