Slidev: Why Your Next Presentation Should Be a Dev Server

Slidev is a slide framework for developers. You write Markdown, it renders slides. No drag and drop. No clicking through menus. Just text.

— Anthony Fu, Creator of Slidev (Sofiane Djerbi Blog)

The Death of the "Alt-Tab" Demo

Every developer who has ever spoken at a conference knows the friction of the live demo. You are in the middle of a polished Keynote presentation, explaining a complex system architecture. Then comes the moment of truth. You drop out of fullscreen mode, clumsy your way over to a terminal window, bump the font size up five times so the back row can see, and pray your local environment is still running.

The context switch breaks the flow. Traditional presentation software treats code as static text, forcing presenters to leave the slideshow to show actual software in motion. Slidev eliminates this entirely by treating the presentation itself as a live Vue application.

With Slidev, the editor and the stage are one. A built-in Monaco editor (the same engine that powers VS Code) can be embedded directly into a slide. You can edit a Vue component in front of an audience, hit save, and watch the component re-render next to your code in real time. There is no switching windows. The presentation is the demo environment.

Markdown as a Reactive DSL

At a glance, a Slidev presentation is just a Markdown file. But beneath the surface, the @slidev/parser library treats Markdown as a Domain Specific Language (DSL) for generating Vue components.

In standard Markdown, three dashes (---) denote a horizontal rule. In Slidev, they act as strict boundaries for Vue component injection and scoped styling. When you place a Vue component tag inside a slide block, Slidev compiles that specific block into a discrete Vue Single File Component (SFC) on the fly.

This architecture means your slides can contain fully interactive elements. A chart on slide four is not an image pasted from another tool. It is a live D3 or ECharts component, bound to a data source, rendering natively in the browser. You can even write CSS inside a <style> tag directly under the Markdown content, and Slidev will scope those styles exclusively to that slide.

The "Anthony Fu" Stack in a Box

Slidev is heavily optimized for speed, both in authoring and rendering. It achieves this by standing on the shoulders of the modern Vite ecosystem.

The core engine relies on Vite for Hot Module Replacement (HMR). When you change a line of Markdown or adjust a CSS class, the slide updates in the browser instantly without a full page reload. Styling is handled by UnoCSS, an on-demand utility-first CSS engine that generates styles with zero runtime overhead. For code blocks, Slidev uses Shiki to deliver pixel-perfect, editor-grade syntax highlighting.

This combination is essentially a "Greatest Hits" compilation of modern frontend tooling, pre-configured to build presentations instead of web apps. It allows developers to use the exact same mental models and tools they use for their day jobs.

Beyond the Static Page: The Presenter's Cockpit

The most technically impressive feature of Slidev is its synchronization logic. When you launch Slidev, you are not just opening a webpage. You are starting a local Node.js server that orchestrates multiple connected clients.

This allows for a powerful "Presenter Mode." You can have the main presentation running on a projector (the "Audience View"), while a separate browser window on your laptop shows your speaker notes, a timer, and the upcoming slides (the "Presenter View").

These windows stay in perfect sync using WebSockets or LocalStorage state patching. If you click to the next slide on your phone, the projector updates instantly. Slidev does not just mirror a screen. It synchronizes application state across disparate browser contexts.

Choosing Your Weapon: Slidev vs. The Field

Slidev is not the first tool to turn text into slides. However, it occupies a specific niche that prioritizes developer utility over visual flash or broad accessibility.

If you need cinematic 3D transitions or want to build a presentation entirely with drag-and-drop tools, Slidev is the wrong choice. Reveal.js remains the king of raw visual manipulation, and Marp is excellent for quickly converting a standard README into a PDF.

But for a specific type of technical storyteller, Slidev is a revelation. It proves that the best tool for explaining how software works is, ultimately, the software itself.

Sources:

• Slidev GitHub Repository
• Generate slides with AI using Slidev | Sofiane Djerbi