open-slide

React-first slide framework where AI agents author presentation pages as code.

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.

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.

links

social