Slidev — Presentation Slides for Developers
Slidev is a Markdown-based presentation tool for developers. Write slides in Markdown, render with Vue components, use code highlighting with animations, live coding, LaTeX math, diagrams, and export to PDF or SPA. Powered by Vite for instant hot reload.
Review-first install path
This asset needs a review step. The copied prompt tells the agent to dry-run, show the writes, then proceed only after confirmation.
npx -y tokrepo@latest install ce6e1004-3651-11f1-9bc6-00163e2b0d79 --target codexDry-run first, confirm the writes, then run this command.
What it is
Slidev is a Markdown-based presentation tool designed for developers. You write slides in Markdown, use Vue components for interactivity, and get code syntax highlighting with animations, live coding capabilities, LaTeX math rendering, Mermaid diagrams, and export to PDF or SPA.
This tool targets developers who present at conferences, team meetings, or internal demos and want to stay in their code editor rather than switching to PowerPoint or Google Slides.
How it saves time or tokens
Slidev keeps presentations in version-controllable Markdown files. No binary formats, no drag-and-drop alignment, no theme wrestling. A developer familiar with Markdown can create a polished presentation in minutes. Code blocks render with proper syntax highlighting and can even run live during the presentation. For AI-assisted content creation, generating slide content in Markdown is straightforward.
How to use
- Install Slidev via npm.
- Create a
slides.mdfile with slide separators. - Run the dev server to preview.
- Present from the browser or export to PDF.
# Create a new Slidev project
npm init slidev@latest
# Start the dev server
npx slidev
# Export to PDF
npx slidev export
# Build as SPA for hosting
npx slidev build
Example
A slides.md file:
---
theme: seriph
title: My Tech Talk
---
# Welcome to My Talk
Building better tools with Rust
---
Why Rust?
- Memory safety without garbage collection
- Zero-cost abstractions
- Fearless concurrency
Code Example
fn main() {
let numbers = vec![1, 2, 3, 4, 5];
let sum: i32 = numbers.iter().sum();
println!('Sum: {}', sum);
}
Questions?
Find me on GitHub @username
Each `---` separator creates a new slide.
Related on TokRepo
- Documentation tools — More developer documentation tools
- Content creation tools — AI-assisted content creation
Common pitfalls
- Slidev requires Node.js. If your machine does not have Node installed, the setup adds friction.
- Custom Vue components in slides add complexity. For simple presentations, stick to Markdown and built-in layouts.
- PDF export uses Playwright under the hood. The first export downloads a browser binary, which can be slow.
- Presenter notes are supported but require the presenter view mode, which needs a second browser window.
- Animations and transitions work well in the browser but may not render correctly in exported PDFs.
- Review the official documentation before deploying to production to ensure compatibility with your specific environment and requirements.
Frequently Asked Questions
Yes. Slidev has a theme ecosystem with community themes available via npm. You can also create custom themes. Set the theme in the frontmatter of your slides.md file.
Yes. Slidev supports Monaco Editor integration for live coding during presentations. You can edit and run code directly in your slides while presenting.
Yes. Run `npx slidev export` to generate a PDF of your slides. The export uses Playwright to render each slide. You can also export to PNG images for each slide.
Yes. Add speaker notes below each slide using HTML comments. The presenter view displays notes alongside the current slide, similar to PowerPoint presenter view.
Yes. Run `npx slidev build` to generate a static SPA that you can deploy to any hosting service: GitHub Pages, Netlify, Vercel, or your own server. The built output is a self-contained web application.
Citations (3)
- Slidev GitHub— Slidev is a Markdown-based presentation tool for developers
- Slidev Documentation— Slidev documentation and theme ecosystem
- Vue.js Documentation— Vue.js component system for interactive presentations
Related on TokRepo
Discussion
Related Assets
Marp — Create Presentation Slides from Markdown
A Markdown-based presentation ecosystem with a CLI, VS Code extension, and browser-based engine that converts Markdown files into HTML, PDF, and PowerPoint slide decks.
Spectacle — Build Interactive Presentations with React
Spectacle is a React-based presentation library that lets developers create slide decks using JSX components, with built-in animations, themes, and live code editing.
Zeal — Offline Documentation Browser for Developers
Zeal is a free offline documentation browser inspired by Dash. It gives developers instant access to 200+ docsets for languages, frameworks, and tools without an internet connection.
impress.js — Stunning CSS3 Presentation Framework
A presentation framework that leverages CSS3 transforms and transitions to create visually impressive slideshows in the browser, inspired by the idea behind prezi.com.