# 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.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
npm i -g @slidev/cli
slidev init my-slides
cd my-slides
slidev                                      # Dev at :3030
slidev export                               # PDF export
slidev build                                # SPA export
```

`slides.md`:
```markdown
---
theme: seriph
title: TokRepo Update
---

# TokRepo Update

April 2026

---

## What We Built

- 270+ open-source asset guides
- Automated publishing pipeline
- Full-text search

---

## Architecture

```mermaid
flowchart LR
    A[GitHub API] --> B[SQL Generator]
    B --> C[MySQL]
    C --> D[Nuxt Frontend]
```

---
layout: two-cols
---

## Left Column

Code example:

```ts
const assets = await fetch("/api/assets")
```

::right::

## Right Column

- Fast
- Type-safe
- Beautiful

---
layout: center
---

# Thank You
```

## Intro

Slidev is a Markdown-based presentation tool built for developers. Created by Anthony Fu (Vite, UnoCSS, Nuxt core team). Write slides in Markdown with full Vue component support, live coding, Mermaid diagrams, LaTeX math, presenter notes, recording, and export to PDF or SPA. Powered by Vite for instant hot module reload.

- **Repo**: https://github.com/slidevjs/slidev
- **Stars**: 45K+
- **Language**: TypeScript
- **License**: MIT

## What Slidev Does

- **Markdown slides** — one file, `---` separators
- **Vue components** — embed any Vue component
- **Code highlighting** — Shiki with line highlighting and animations
- **Live coding** — Monaco editor inside slides
- **Mermaid diagrams** — inline diagram support
- **LaTeX math** — KaTeX for equations
- **Layouts** — center, two-cols, image-right, custom
- **Themes** — community themes on npm
- **Recording** — record presentation with camera
- **PDF export** — via Playwright
- **SPA export** — deploy as a website
- **Presenter mode** — notes + timer + next slide preview

## Comparison

| Tool | Input | Components | Dev |
|---|---|---|---|
| Slidev | Markdown | Vue | Vite HMR |
| reveal.js | HTML/Markdown | JS plugins | Manual |
| Marp | Markdown | Limited | VS Code |
| Google Slides | GUI | None | Browser |
| Keynote | GUI | None | macOS |

## FAQ

**Q: Can it be deployed as a website?**
A: Yes. `slidev build` generates an SPA that can be deployed to Vercel/Netlify/GitHub Pages.

**Q: Compared to reveal.js?**
A: Slidev has a better developer experience (Vite HMR, Vue components, Markdown-first); reveal.js is older with deeper low-level customization.

## Sources

- Docs: https://sli.dev
- GitHub: https://github.com/slidevjs/slidev
- License: MIT

---
Source: https://tokrepo.com/en/workflows/slidev-presentation-slides-developers-ce6e1004
Author: AI Open Source