Slidev: Markdown-Based Presentations for Developers

Slidev is a presentation framework purpose-built for developers. By writing slides in Markdown, you allow the system to handle the heavy lifting of rendering and layout. Powered by Vue and Vite, the platform features built-in code highlighting, live editing, and deep theme customization, freeing you from the frustrations of traditional tools like PowerPoint.

Recent Updates

The packages and docs directories recently saw the release of version 51.7.1. This update boosted code block features and improved theme publishing workflows. Notable fixes include a bundling resolution in the scripts folder (#1952) and smoother content loading within the slide editor via the test directory (#2094). Updates to pnpm-lock.yaml and pnpm-workspace.yaml reflect enhanced code block handling (#2174), while tsconfig.json now points to tsdown for builds (#2160). Additionally, the patches directory introduced shikiji syntax highlighting and twoslash integration (#1218), and the .vscode extension now supports screen capture mirroring (#1987).

What Makes Slidev Different

Markdown First

Your slides exist as plain text, allowing you to use any preferred editor. The default slides.md file serves as a starting point, demonstrating the platform’s capabilities immediately upon setup.

Built for Code

Shiki and the Monaco Editor power the platform's syntax highlighting and live coding features. You can group code blocks or reveal lines sequentially, ensuring your snippets remain legible and impactful during a presentation.

Rich Media Support

Slidev offers robust support for technical content. Render complex math formulas via KaTeX, or turn text into flowcharts and sequence diagrams using Mermaid. For interactive elements, you can drop Vue components—such as buttons or dynamic charts—directly into your slides to suit your specific needs.

Development and Deployment

Quick Start

Vite enables instant hot reloading. By running slidev --open, the development server launches and opens a live preview of your deck in the browser.

Export Options

Run slidev export to generate your presentation in PDF, PPTX, or PNG formats. You can also adjust the output resolution and choose whether to include speaker notes.

Static Hosting

The slidev build command generates a static site. This allows you to deploy your presentation to Netlify, GitHub Pages, or any other static hosting provider.

Themes

Community themes can be installed easily via npm. For more granular control, custom themes are managed through theme.config.ts, giving you full authority over the visual appearance of your slides.

Atomic CSS

With UnoCSS running under the hood, you can use Tailwind-style utility classes directly within your Markdown. This facilitates rapid layout adjustments without the need for context switching.

Try It Instantly

Visit sli.dev/new to open a project in StackBlitz and start drafting your slides in the browser immediately.

Local Setup

Node.js version 18 or newer is required for local installation.

Scaffold a Project

Recommended (pnpm):

npm i -g pnpm
pnpm create slidev

Other package managers:

# npm
npm init slidev@latest
# yarn
yarn create slidev
# bun
bun create slidev

Single File Mode

You can also install the CLI globally and point it toward a specific Markdown file.

pnpm i -g @slidev/cli
slidev your-slides.md

Common Commands

• slidev — Starts the development server and opens the browser automatically.
• slidev export — Generates PDF, PPTX, or PNG files. Additional flags are available for specific output settings.
• slidev format — Cleans up slide content using Prettier.

The package.json file includes pre-configured scripts. You can run npm run dev, npm run build, or npm run export to execute these tasks.

Editor Setup

VS Code Extension: Install the official Slidev extension to access an outline view, keyboard shortcuts, and a live-updating preview window.

Built-in Editor: The presentation interface includes an editor pane, allowing you to modify content and view changes side-by-side.

Formatting: Use Prettier to maintain a consistent style. Run slidev format to apply formatting across your files.

Slidev eliminates the bloat of traditional presentation software, allowing you to focus entirely on content while the tool handles the polish. It is a tool designed by developers, for developers—and it shows.