open-slide: An AI-Native Slide Framework for React Presentations

Summary

open-slide is a powerful slide framework built for AI agents, enabling users to create presentations by describing them in natural language. Coding agents then generate the React components, while open-slide handles the canvas, scaling, navigation, and presentation modes. This allows agents to focus entirely on content, streamlining the creation of polished, agent-driven decks.

Use at your own risk

OSRepos shares public repositories for knowledge and discovery only. Any installation, execution, configuration, or use of code from these repositories is the user's own responsibility. Always review the repository, source code, dependencies, licenses, and security implications before running or installing anything. OSRepos is not responsible for issues, damages, or losses resulting from third-party repositories.

Introduction

open-slide is a cutting-edge slide framework specifically designed for AI agents. It revolutionizes the way presentations are created by allowing you to describe your desired deck in natural language, with your coding agent subsequently writing the necessary React components. This framework expertly manages the underlying canvas, scaling, navigation, hot reload capabilities, and present mode, thereby freeing agents to concentrate solely on crafting compelling content. Every slide renders into a fixed 1920 × 1080 canvas, and pages are arbitrary React components, offering maximum flexibility.

Why Use open-slide

Slides are inherently visual code, a domain where AI agents excel. open-slide serves as the essential runtime that transforms a simple prompt, such as "make slides about X," into a polished, professional, and presentable deck. This entire process occurs seamlessly, without you ever needing to leave your chat interface. It significantly streamlines presentation development, making it highly efficient and deeply integrated with agent-based workflows.

Key Features

open-slide comes packed with features designed to enhance the agent-driven presentation workflow:

Agent-native authoring: Works with any coding agent. The scaffolder includes built-in skills like /create-slide for drafting decks end-to-end and /slide-authoring which provides technical references for agents. This allows for polished decks from a one-line prompt, with no boilerplate.
In-browser inspector: Click any element in the dev server to attach comments, for example, "make this red" or "change to 'Open Slide Rocks'". These comments are persisted as @slide-comment markers in the source. Running /apply-comments prompts the agent to apply all pending edits and clear the markers, creating an efficient feedback loop.
Assets manager + svgl logo search: Manage images, videos, and fonts per deck through a built-in assets panel. You can also search and drop in any brand logo directly from the integrated svgl catalogue, eliminating the need to hunt for SVGs.
Professional present mode: Offers fullscreen playback with keyboard navigation, alongside a dedicated presenter mode. This includes current/next slide preview, speaker notes, and a timer, making it ideal for live presentations.
Export to static HTML & PDF: With a single command, you can export your deck as a self-contained static HTML site or a print-ready PDF, enabling easy sharing without requiring a server.
Slide manager: Organize your decks into folders, complete with custom emoji and drag-and-drop functionality for reordering. This feature is invaluable for managing multiple projects.
Deploy-friendly: The framework outputs a plain static build, allowing for one-click deployment to platforms like Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host. There's no server, no runtime, and no vendor lock-in.

Installation

To get started with open-slide, use the following commands:

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

Examples

The scaffolded workspace comes with agent skills preconfigured, for example, for Claude Code. You can then drive the deck through your agent or directly edit slides/<id>/index.tsx. For detailed rules and guidelines on agent interaction, refer to the CLAUDE.md file within the repository.