Slidev: Code Your Presentations in Markdown

Slidev: Code Your Presentations in Markdown

Photo by Daniil Komov on Unsplash

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:

• Full Vue component support — use any Vue/React component directly in your slides
• Hot reload — edit your .md file and the slide updates instantly in your browser
• Presenter mode — a separate window shows your notes and the next slide
• PDF export — any slide deck exports to a static PDF or HTML file
• Themes — community themes for different visual styles

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:

• Current slide preview
• Next slide preview
• Speaker notes
• A timer
• Current slide number

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:

• Technical conference talks with lots of code
• Workshop materials where attendees need to follow along
• Tutorial videos where you want live code examples
• Any talk where you'll be live-coding or modifying examples

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.