{"name":"open-slide: An AI-Native Slide Framework for React Presentations","description":"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.","github":"https://github.com/1weiho/open-slide","url":"https://osrepos.com/repo/1weiho-open-slide","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/1weiho-open-slide","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/1weiho-open-slide.md","json":"https://osrepos.com/repo/1weiho-open-slide.json","topics":["agent","react","slides","TypeScript","presentation","framework","ai-tools"],"keywords":["agent","react","slides","TypeScript","presentation","framework","ai-tools"],"stars":null,"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.","content":"## Introduction\n\nopen-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.\n\n## Why Use open-slide\n\nSlides 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.\n\n## Key Features\n\nopen-slide comes packed with features designed to enhance the agent-driven presentation workflow:\n\n*   **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.\n*   **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.\n*   **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](https://svgl.app/){:target=\"_blank\"} catalogue, eliminating the need to hunt for SVGs.\n*   **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.\n*   **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.\n*   **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.\n*   **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.\n\n## Installation\n\nTo get started with open-slide, use the following commands:\n\nbash\nnpx @open-slide/cli init my-slide\ncd my-slide\npnpm dev\n\n\n## Examples\n\nThe 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.\n\n## Links\n\n*   [GitHub Repository](https://github.com/1weiho/open-slide){:target=\"_blank\"}\n*   [svgl.app](https://svgl.app/){:target=\"_blank\"}","metrics":{"detailViews":1,"githubClicks":0},"dates":{"published":null,"modified":"2026-09-09T15:27:06.000Z"}}