open-slide

open-slide is an agent-native React slide framework built on the Slides as Code paradigm — each slide is a TSX component rendered on a fixed 1920×1080 canvas for cross-device consistency.

Core Capabilities#

Agent-Native Authoring#

Four built-in Agent Skills compatible with Claude Code, Cursor, Gemini CLI, Codex, Windsurf, Zed:

• /create-slide — End-to-end generation, auto-asks four positioning questions (theme & aesthetics, page count, text density, animated vs static), then plans structure and generates page code
• /slide-authoring — Technical reference for 1920×1080 canvas constraints, typography, palettes, layout rules
• /apply-comments — Scans all @slide-comment markers in source, batch-applies modifications and clears markers
• /create-theme — Theme creation

Editing Experience#

• In-browser Inspector: Click any element in dev server to attach comments, persisted as @slide-comment source markers
• Visual Editor: Direct property editing (text, font size, weight, color, images) in inspect mode, buffered in memory with single HMR write
• Assets Manager: Built-in panel for images/videos/fonts, svgl integration for 1500+ brand Logo SVGs
• Slide Manager: Folder organization, custom emoji, drag-and-drop sorting

Presentation & Export#

• Professional Present Mode: Fullscreen playback, keyboard navigation, speaker view (current/next preview, speaker notes, timer)
• Export: One-click export to self-contained static HTML or print-grade PDF, serverless sharing
• Deploy-friendly: Pure static build output, deployable to Vercel, Cloudflare Pages, Zeabur, Netlify

Architecture#

pnpm + Turborepo monorepo:

Key mechanisms:

• Agent Skills stored in .agents/skills/ and .claude/skills/, pre-configured for Claude Code on init
• Inspector comments written as @slide-comment annotation markers in TSX source
• Visual Editor canvas edits buffered in memory, written via single HMR
• Vite handles dev server and production builds; Turborepo manages inter-package dependencies and task orchestration

Quick Start#

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

Scaffold auto-generates slides/ directory, open-slide.config.ts, and launches HMR dev server.

Slide File Convention#

Each slide is slides/<id>/index.tsx exporting a Page[] array:

import type { Page } from '@open-slide/core';

const Cover: Page = () => (
  <div style={{ background: '#08090a', color: '#f7f8f8' }}>
    <h1 style={{ fontSize: 188, letterSpacing: '-0.04em' }}>
      Hello, <em style={{ color: '#d56b48' }}>deck</em>.
    </h1>
    <p>A React slide, rendered live.</p>
  </div>
);

export default [Cover] satisfies Page[];

Use Cases#

• AI agent-driven rapid slide generation
• Technical presentations requiring Git version control
• Brand presentation asset management (svgl Logo integration)
• High-frequency human-agent collaboration loop: present → annotate → agent modifies → re-present

Not suitable for: non-technical users expecting full drag-and-drop GUI creation (editing capabilities depend on dev server).

Unconfirmed Information#

• No related paper links found; project is an engineering tool, not academic research
• PDF export underlying engine not explicitly specified
• No explicit i18n support documentation found
• Full open-slide.config.ts configuration schema not shown in docs