How to Code Your Presentations in Markdown with Slidev

Building presentations shouldn’t feel like a context switch from your development workflow. Yet traditional tools force you into drag-and-drop interfaces, proprietary formats, and version control nightmares. Slidev offers a different approach: Markdown-based slides backed by the same frontend tooling you already use.

This article covers the core Slidev presentation workflow—from authoring to export—and explains why it appeals to developers who want their slides under version control.

What Makes Slidev Different from Other Presentation Tools

Slidev isn’t just a slide generator. It’s a Vite-powered Vue 3 application that treats Markdown as its primary input format. This distinction matters because you get the full power of modern frontend tooling: hot module replacement during development, component-based architecture, and a plugin ecosystem.

Unlike PowerPoint or Google Slides, your presentation lives as plain text files. Unlike older tools like Reveal.js, Slidev integrates directly with the Vue ecosystem. You can drop Vue components into your Markdown when you need interactivity beyond what static slides offer.

The result is presentations that feel native to frontend developers. Your existing knowledge of CSS, JavaScript, and component architecture transfers directly.

The Core Slidev Presentation Workflow

Authoring Slides in Markdown

A Slidev project centers on a slides.md file. Each slide is separated with ---, and you configure individual slides or the entire deck through YAML frontmatter.

---
theme: default
---

# Welcome

Your first slide content here.

---

# Second Slide

- Bullet points work as expected
- So does **bold** and *italic* text

Standard Markdown syntax handles most content: headings, lists, links, and images. Code blocks get syntax highlighting automatically. When you need something Markdown can’t express, you write HTML or Vue components inline.

Running the Development Server

The CLI starts a local development server with hot reload. Edit your Markdown file, and the browser updates immediately. A presenter view shows your current slide, next slide, and speaker notes, accessible through a separate presenter view URL.

This tight feedback loop makes iteration fast. You’re not waiting for exports or rebuilds.

Organizing Larger Presentations

For substantial decks, split content across multiple files. The src property in frontmatter imports external Markdown files:

---
src: ./slides/introduction.md
---

---
src: ./slides/main-content.md
---

This pattern keeps individual files manageable and lets you reorder sections by moving import statements.

Extending Slides with Vue Components

Slidev’s frontend tooling shines when you need more than static content. Any Vue component works inside your Markdown—whether from the theme, a third-party package, or your own components/ directory.

Common use cases include:

• Click animations: The v-click directive reveals content progressively
• Diagrams: Built-in Mermaid support renders flowcharts and sequence diagrams from text
• Live code: Monaco editor embeds allow live code editing during presentations
• Custom layouts: Build reusable slide templates as Vue components

You’re not limited to what the tool provides out of the box.

Exporting and Sharing Presentations

Export is a first-class feature, not an afterthought. Slidev produces:

• PDF: For offline sharing or printing
• PNG: Individual slide images
• PPTX: When someone insists on PowerPoint
• SPA: A static single-page application you can deploy anywhere

The SPA export deserves attention. Deploy it to Vercel, Netlify, or GitHub Pages, and your presentation becomes a shareable URL. Combine this with CI/CD pipelines, and every commit to your repository produces a fresh deployment.

Why Frontend Developers Choose Slidev

The appeal comes down to workflow alignment:

• Version control: Diff your slides, review changes in pull requests, and maintain history
• Reuse existing skills: CSS, Vue, and JavaScript work exactly as expected
• Extensibility: Themes and plugins follow npm conventions
• Customization: Override anything through standard web technologies

If you’re comfortable with Markdown and modern JavaScript tooling, Slidev removes friction rather than adding it.

Getting Started

Initialize a new project through the Slidev CLI with your preferred package manager:

npm init slidev@latest

The scaffolded project includes example slides demonstrating core features. From there, replace the sample content with your own and run the development server.

The official documentation covers syntax details, theme installation, and advanced configuration. Start simple—Markdown content with default styling—then layer in components and customization as needed.

Conclusion

Slidev turns presentations into a maintainable, code-first workflow. By treating slides as Markdown files powered by Vue and Vite, it aligns with how frontend developers already work. Version control becomes natural, customization uses familiar web technologies, and export options cover every sharing scenario. Your slides deserve the same tooling as your applications.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.