## Overview
**Slidev** (slide + dev, pronounced `/slaɪdɪv/`) is an open-source, web-based slide maker and presenter designed specifically for developers. It lets you write presentation slides in **Markdown** while leveraging the full power of web technologies like **Vue.js**, **CSS**, and **JavaScript** for pixel-perfect designs and interactive demos.
- **Website**: [sli.dev](https://sli.dev/)
- **GitHub**: [slidevjs/slidev](https://github.com/slidevjs/slidev)
- **License**: MIT
- **Created by**: Anthony Fu
## Key Features
- **Markdown-based** — write slides in plain Markdown, focus on content over formatting
- **Vue 3 powered** — use Vue components anywhere in your slides for interactive elements
- **Code highlighting** — first-class support via Shiki with live coding capability (Monaco Editor)
- **Themes & layouts** — rich ecosystem of community themes and customizable layouts
- **Animations & transitions** — built-in slide transitions and element animations
- **LaTeX math** — render mathematical formulas with KaTeX
- **Diagrams** — create diagrams with Mermaid syntax directly in Markdown
- **Drawing & annotations** — draw on slides during presentations with Drauu
- **Recording** — built-in recording and camera view via RecordRTC
- **Export** — export to PDF, PPTX, or PNGs; deploy as a static web app
- **VS Code extension** — edit slides with IDE support
- **Presenter mode** — speaker notes and slide overview for presenters
## Tech Stack
Slidev is built on modern web technologies:
- **Vite** — fast frontend tooling and hot module replacement
- **Vue 3** — reactive UI framework
- **UnoCSS** — on-demand utility-first CSS framework
- **Shiki** + **Monaco Editor** — syntax highlighting and live coding
- **Iconify** — access to thousands of icons
- **KaTeX** — LaTeX math rendering
- **Mermaid** — diagram generation from text
## Getting Started
```bash
# Create a new Slidev project
npm init slidev@latest
# Or with pnpm (recommended)
pnpm create slidev
```
Slides are written in a single `slides.md` file with slide separators:
```markdown
---
theme: seriph
---
# My Presentation Title
Welcome to my talk!
---
## Slide Two
- Point one
- Point two
- **Bold point**
---
## Code Example
```typescript
const greeting = (name: string) => `Hello, ${name}!`;
console.log(greeting('Slidev'));
```
```
## Integration with OBS Studio
Since Slidev runs in the browser, it integrates seamlessly into [[OBS Studio]]:
- Add Slidev as a **Window Capture** or **Browser Source** in OBS
- Use hotkeys or a Stream Deck to advance slides while keeping OBS in focus
- Combine with [[Remotion]] overlays and webcam for a professional developer presentation setup
## Why Slidev over PowerPoint or Google Slides?
| Feature | Slidev | Traditional Tools |
|---|---|---|
| Version control friendly | ✅ Markdown in Git | ❌ Binary files |
| Live code demos | ✅ Monaco Editor | ❌ Screenshots only |
| Custom interactivity | ✅ Vue components | ❌ Limited animations |
| Developer workflow | ✅ CLI, npm, IDE | ❌ GUI-only |
| Export options | ✅ PDF, PPTX, SPA | ✅ PDF, PPTX |
| Theming | ✅ CSS + community | ⚠️ Template-based |