open-slide

open-slide/open-slide

A slide framework built for agents

https://github.com/open-slide/open-slide

open-slide

Slides as React code, crafted by agents

https://open-slide.dev/

26 Sep 2026

open-slide lets a coding agent build your slide deck. You describe the deck in plain words, and the agent writes each slide as a React component. open-slide handles the rest: the fixed 1920 x 1080 canvas, scaling, navigation, live reload, presenting and export.

Version 2.0 came out today, 26th September 2026. Since my first note in May, the project moved to its own GitHub organisation (the old 1weiho/open-slide address redirects), joined Vercel's open-source programme, and grew to 7,717 stars.

What's new since May

Version 2.0 closes most of the gap between slides as code and a normal slide editor:

• Editable PowerPoint export. Every page becomes native PowerPoint text boxes, shapes and images, converted in the browser. A colleague can open and edit the result in PowerPoint.
• Visual editing. Click any text to edit it in place, with a toolbar for size, bold, italic, colour and alignment. Elements snap, resize and reorder like in Keynote, with undo.
• Presenter view with the current and next slide, a timer, and speaker notes that now render Markdown.
• Google Fonts search in the assets panel, next to the existing brand-logo search.
• Agent skills that write the speech. The agent now writes the speaker script into each slide's notes instead of a separate file.
• Export to static HTML and PDF as well, and a 1-click deploy to any static host.
• Slide manager with folders, to find a deck once you have more than a few.
• Modern toolchain: React 19, Vite 8 and TypeScript 7. A migration guide covers upgrading version 1 decks.

For business people

The problem: building a good-looking deck still takes hours in PowerPoint, and AI slide generators give you generic templates that are hard to adjust.

How open-slide works for you:

1. Say what you want: "10 slides on our Q3 results, minimal, with motion".
2. The agent asks 4 questions: topic and look, number of pages, amount of text, motion or static. Then it writes the deck.
3. You review it in the browser. Click an element and leave a comment such as "make this red" or "shorten the headline".
4. The agent applies every comment in 1 pass. Repeat until it's right.
5. Present from the browser, or export to PowerPoint, PDF or a web page.

Why it matters: the deck is a set of files, so it has a full history, can be reviewed like code, and never locks you into a slide tool. The PowerPoint export is the key change in 2.0: the output now fits into a normal corporate workflow.

The limits: someone has to run a developer setup (Node.js and a coding agent) to create decks. Precise visual work, like matching a corporate template pixel for pixel, still takes iterations.

For technical people

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

The scaffold hides Vite, React and the TypeScript config inside @open-slide/core, and ships 2 agent skills for Claude Code: /create-slide to draft a deck end to end, and /slide-authoring with the canvas, type scale, palette and layout rules the agent reads first. /apply-comments turns the inspector comments, stored as @slide-comment markers in the source, into edits.

Each deck lives in slides/<id>/index.tsx and exports an array of pages:

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

The build is a plain static site, with vercel.json and netlify.toml included.

How it compares with my own deck setup

My decks run on NicDeck, a single-file reveal.js system (see NicDeck ), and my overview of agent-friendly deck formats is in HTML Presentations for Agentic Workflows.

open-slide's inspector comments and its editable PowerPoint export are the 2 ideas worth taking into NicDeck. Moving to React for every slide isn't worth it for my use.

The May 2026 note

04 May 2026

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

1. Init - npx @open-slide/cli init my-deck scaffolds the project with a slides/ directory and hot-reloading dev server
2. Author - Tell your AI agent (Claude Code, Cursor, Codex, Gemini CLI, etc.) to create slides. It writes React components to disk.
3. Iterate - Visual inspector lets you click elements to tweak text/font/color. Leave @slide-comment markers for the agent to apply. /apply-comments triggers the agent rewrite.

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.