$ show slidevjs/slidev
Slidev is a developer-oriented slide presentation tool that turns Markdown files into interactive, web-based slide decks. The system is built as a monorepo with several packages: a Node.js CLI and Vite-based dev server (`packages/slidev`), a Vue 3 client application (`packages/client`), a markdown parser (`packages/parser`), shared type definitions (`packages/types`), a VS Code extension (`packages/vscode`), and scaffolding tools (`create-app`, `create-theme`). The core workflow involves parsing Markdown slides with frontmatter, rendering them as Vue components with support for code highlighting (Shiki), diagrams (Mermaid, PlantUML, KaTeX), interactive editors (Monaco), animations (v-click, v-mark), and drawing tools. Export capabilities include PDF, PPTX (both raster and editable), PNG, and Markdown via Playwright. The system also includes a Model Context Protocol (MCP) server for AI agent integration, enabling programmatic slide editing. The architecture is modular: the parser handles slide splitting and feature detection, the client provides a rich presentation UI with presenter mode, and the CLI orchestrates build, serve, and export commands. The VS Code extension adds language support, a preview panel, and AI tools. Overall, Slidev is a mature, feature-rich application for creating technical presentations with minimal friction.
The LLM identified 5 files worth highlighting for reuse:
Core parser for Slidev markdown files. Handles slide splitting, frontmatter extraction, feature detection, and raw content management. It exposes `parse()`, `stringify()`, `prettify()`, and utility functions like `extractImagesUsage()` and `detectFeatures()`. This module is self-contained (depends only on the types package) and could be extracted for any project needing to parse markdown slide decks with frontmatter and component detection.
Browser-side snapshot collection for PPTX export. This module is designed to be evaluated inside Playwright's page context and captures the visual state of slides (text, positions, styles) by walking the DOM. It produces a serializable intermediate representation. The pattern of a self-contained, injectable DOM walker for export purposes is reusable for any web-to-document conversion tool.
Cross-client state synchronization utility. Uses `BroadcastChannel` to synchronize reactive state between multiple browser tabs/windows, with a fallback to `localStorage`. Integrates with Vite's server-ref mechanism for server-side state persistence. This pattern is reusable for any multi-tab web application that needs real-time state consistency without a backend.
Vue composable managing click-based animation state. Tracks current click step, handles increment/decrement, and provides reactive `clicks` and `clicksElements` computed properties. Supports both ordered clicks and named click markers. This pattern is generic and can be extracted for any step-based interaction system (e.g., wizards, tutorials, slideshows) beyond Slidev.
Model Context Protocol (MCP) server implementation for Slidev. Exposes tools like `get_slides`, `update_slide`, `insert_slide`, `remove_slide`, `move_slide`, and `format_slides` to AI agents via stdio or HTTP. The pattern of wrapping application functionality into an MCP server is reusable for any application that wants to provide AI-driven automation capabilities.