toolspresentationsmarkdownvuedeveloper-experience

Slidev (slide + dev, pronounced /slaɪdɪv/) is a web-based presentation tool that lets developers create slides using Markdown. Built on Vite and Vue 3, it treats code as a first-class citizen—not an afterthought.

Why Developers Love It

PowerPoint is for slides. Slidev is for code talks.

• Markdown-first: Write slides in plain text, version control with Git
• Shiki syntax highlighting: Accurate, beautiful code blocks out of the box
• Live coding: Monaco Editor integration for real-time demos
• Magic Move: Animated code transitions between slides
• Mermaid + KaTeX: Diagrams and math equations in text

Quick Start

npm init slidev

Requires Node.js 18+. Or try it instantly at sli.dev/new.

Slide Syntax

Slides are separated by ---. Each slide is just Markdown:

# Welcome to Slidev

This is slide one.

---

# Code Example

```ts
const greeting = 'Hello, Slidev!'
console.log(greeting)

layout: center

Centered Content

Use frontmatter to control layouts.

## Key Features

| Feature | What It Does |
|---------|--------------|
| **Presenter Mode** | Control slides from your phone or second window |
| **Drawing & Annotations** | Drauu-powered whiteboard during presentations |
| **Themes** | Shareable npm packages for consistent styling |
| **Components** | Embed Vue components directly in slides |
| **Recording** | Built-in screen + camera recording |

## Export Options

```bash
slidev export           # PDF
slidev export --format pptx  # PowerPoint
slidev export --format png   # Images
slidev build            # Static SPA

Export to PDF for sharing, PPTX for corporate compatibility, or build as a hostable web app.

Tech Stack

• Vite for instant hot reload
• Vue 3 for component power
• UnoCSS for utility styling
• Shiki for syntax highlighting
• TypeScript (67% of codebase)

When to Use Slidev

Use it for:

• Tech talks and conference presentations
• Internal engineering demos
• Documentation walkthroughs
• Live coding sessions

Skip it for:

• Marketing decks (no drag-and-drop)
• Non-technical audiences who need to edit
• Quick one-off slides (setup overhead)

Community

43k+ GitHub stars. Active Discord at chat.sli.dev. MIT licensed.

If your slides are more code than bullet points, Slidev is the tool you didn’t know you needed.

Sources:

• Slidev Documentation
• GitHub - slidevjs/slidev