← All articles
DEVELOPER PRODUCTIVITY Slidev: Code Your Presentations in Markdown 2026-03-04 · 4 min read · slidev · presentations · markdown

Slidev: Code Your Presentations in Markdown

Developer Productivity 2026-03-04 · 4 min read slidev presentations markdown vue developer-tools slides

Slidev: Code Your Presentations in Markdown

Developer conference talks have a presentation problem: Keynote and PowerPoint are designed for marketing slides, not code-heavy technical content. Code screenshots look bad, live editing is impossible, and version control doesn't work on .pptx files.

Slidev fixes this. Your entire presentation is a single Markdown file. Code blocks are syntax-highlighted. You can run live demos inside your slides. And since it's just text files, your presentations live in Git.

What Slidev Actually Is

Slidev is a Vite-powered presentation framework. Under the hood, it's a Vue application that renders your Markdown as interactive slides. This means:

Getting Started

Create a new presentation:

npm init slidev@latest
# or
bunx create-slidev@latest

This scaffolds a directory with a slides.md file. Start the dev server:

npm run dev
# Opens http://localhost:3030

The Slide Format

Each slide is separated by --- in your Markdown file:

---
theme: default
title: My Talk
---

# First Slide

This is the title slide.

---

# Second Slide

Some content here.

---

## Code Examples

\`\`\`typescript
const greeting = (name: string): string => `Hello, ${name}!`
console.log(greeting('World'))
\`\`\`

The front matter at the top sets global metadata. Each --- starts a new slide.

Layouts

Slidev has built-in layouts for common slide types:

---
layout: cover
---

# Talk Title
Presenter Name · Conference 2026

---
layout: two-cols
---

# Left Column
Content on the left.

::right::

# Right Column
Content on the right.

---
layout: image-right
image: /path/to/image.jpg
---

# Slide with Image

Text on the left, image on the right.

Available layouts include: cover, default, center, two-cols, image-right, image-left, quote, section, statement, and more.

Code Highlighting

Slidev's code blocks support both syntax highlighting and line highlighting for walking through code:

\`\`\`typescript {1|2-4|5-7}
// Line 1 highlighted first
const config = {
  // Lines 2-4 highlighted on click
  port: 3000,
  host: 'localhost',
};
// Lines 5-7 highlighted on next click
const server = createServer(config)
server.listen()
\`\`\`

Each click advances to the next highlighted section. This is perfect for walking through code incrementally during a talk.

You can also diff two code blocks:

\`\`\`typescript {diff}
- const result = items.filter(x => x.active).map(x => x.name)
+ const result = items
+   .filter(x => x.active)
+   .map(x => x.name)
\`\`\`

Animations and Clicks

The v-click directive shows elements on demand:

# Things I Learned

- First point <!-- appears on click -->
- Second point <!-- appears on second click -->

<v-click>

This whole block appears together on a single click.

</v-click>

Or use the shorthand:

- Item that's always visible
- <v-click>Appears on click 1</v-click>
- <v-click>Appears on click 2</v-click>

Monaco Editor in Slides

One of Slidev's killer features: embedding a live code editor directly in a slide using Monaco (the VS Code editor engine).

\`\`\`typescript {monaco}
// This code is editable during the presentation
function fibonacci(n: number): number {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55
\`\`\`

During your talk, you can modify the code live. Combined with a TypeScript runner in a code sandbox, this enables live coding demos without switching to a terminal.

Presenter Mode and Notes

Speaker notes are added below a --- in each slide:

# My Slide

Main content here.

<!-- 
Speaker notes here — only visible in presenter mode.
Remember to mention the Q3 results.
Pause for questions after this slide.
-->

Open presenter mode at http://localhost:3030/presenter. It shows:

For remote presentations (screen sharing the main window while viewing presenter mode on your laptop), you can run two browser windows side by side.

Diagrams with Mermaid

Slidev has built-in Mermaid support for diagrams:

\`\`\`mermaid
flowchart LR
  A[User Request] --> B{Cache?}
  B -->|Hit| C[Return Cached]
  B -->|Miss| D[Fetch from DB]
  D --> E[Cache Result]
  E --> C
\`\`\`

The diagram renders inline in your slide. No screenshot, no separate tool.

Exporting

Export to PDF:

npm run export

This uses Playwright to screenshot each slide and compile them into a PDF. The result is a static PDF where every slide is an image.

Export to interactive HTML:

npm run build

This builds a self-contained website (dist/ folder) that can be deployed anywhere and viewed in a browser with all animations working.

Themes

Themes change the visual style without modifying your content. Install community themes:

npm install @slidev/theme-seriph

Then set it in your front matter:

---
theme: seriph
---

Popular community themes: seriph (clean, minimal), apple-basic (Apple-inspired), bricks (boxed sections), penguin (dark, modern). Browse the full list at https://slidev.community/.

You can also create custom themes — they're just CSS and Vue components.

Hosting Your Slides

Since npm run build produces a static site, you can host it anywhere:

GitHub Pages:

# .github/workflows/deploy.yml
- name: Build slides
  run: npm run build
- name: Deploy to Pages
  uses: actions/deploy-pages@v2

Netlify drop: Drag the dist/ folder to netlify.com/drop.

The deployed URL is shareable — attendees can follow along on their phones with full animations.

When Slidev Makes Sense

Slidev is excellent for:

It's overkill for business slides with charts, photos, and bullet points — use Keynote or Google Slides for those.

The learning curve is low if you know Markdown. The payoff is presentations that actually make sense for technical content.