Skip to content
Get packs

Guide · Open source

How to use Slidev: install, write slides in Markdown and export

Updated · written with AI from the project's own documentation and checked against our catalogue data

Slidev is an open-source tool for making presentation slides from Markdown files. You write slides as plain text, and it renders them in a web browser with code highlighting, LaTeX math, Mermaid diagrams and Vue components. This guide is for developers and technical presenters who want to set up a Slidev project, write slides and export them after reading it.

Slidevslidevjs/slidev · ★ 49.3k · MIT

Quick start

  1. 1Check Node.js. Confirm you have Node.js 22.12.0 or newer installed.
  2. 2Create a project. Run npm init slidev in the folder where your slides will live.
  3. 3Write slides in Markdown. Edit the Markdown file to write your slide content and add code blocks, diagrams or math.
  4. 4Preview in the browser. Open the rendered slides in your web browser to check how they look.
  5. 5Use presenter mode. Open presenter mode in a second window or on your phone to control the talk.
  6. 6Export. Export the finished deck to PDF, PNG or PPTX.

What Slidev needs before you install it

Slidev runs locally through Node.js. The README says the local setup requires Node.js 22.12.0 or newer, so check your version before you start. You also need to be comfortable editing Markdown, because slides are written as text rather than in a drag-and-drop editor.

  • Node.js 22.12.0 or newer
  • Basic familiarity with Markdown syntax
  • A text editor of your choice; the README also mentions an integrated editor and a VSCode extension

Create a new Slidev project

The README's install method is a package manager command. Run npm init slidev in the folder where you want your slides to live. This creates a new Slidev project locally.

If you only want to try Slidev without installing anything, the README also links to an online option at sli.dev/new.

npm init slidev

Write your slides in Markdown

Each slide is written as Markdown text. The project is built around this format, so you focus on content and use your favourite editor. The README says you can embed Vue components when you need more than plain text, and add code blocks with built-in highlighting.

For full examples, the README points to the demo folder in the slidevjs/slidev repository, which is the source file for a previous talk by the author.

  • Use code blocks for syntax-highlighted source code
  • Use Mermaid syntax to create diagrams from text descriptions
  • Use LaTeX for math equations
  • Embed Vue components for interactive content

Present from a browser, with presenter mode

Slidev renders your slides in a web browser. Presenter mode lets you use another window, or even your phone, to control the slides while the audience sees the main view. Slidev also includes drawing and annotation on slides, and built-in recording with a camera view.

The README describes Slidev as instant to reload, powered by Vite.

  • Presenter mode: control slides from a second window or a phone
  • Drawing: annotate slides during a talk
  • Recording: built-in recording and camera view

Export your slides to PDF, PNG or PPTX

Slidev can export slides into PDF, PNG images or PPTX files. The README lists these formats under its Portable feature and links to the exporting guide on sli.dev for details on how to run the export.

Because your slides are text files, you can keep them in a Git repository alongside project files and track changes over time.

  • PDF
  • PNG
  • PPTX

Customise the look with themes and styles

Slidev supports themes that can be shared and used as npm packages. You can also style slides with on-demand utilities from UnoCSS, and browse available themes in the theme gallery linked from the README.

What people use it for

  • Presenting code walkthroughs with syntax-highlighted examples
  • Giving technical talks with diagrams written as text
  • Documenting software architecture with Mermaid diagrams
  • Keeping slides in the same Git repository as the project they describe

Frequently asked questions

Is Slidev free to use?

Slidev is open source under the MIT licence, according to the README. The README's license section states the MIT License with the copyright holder named there.

What do I need to install Slidev?

You need Node.js 22.12.0 or newer. The README says to install Node.js and then run npm init slidev to create a project locally.

Can I use Slidev without installing anything?

Yes. The README links to an online option at sli.dev/new, which lets you try Slidev in the browser.

Can Slidev export to PowerPoint?

Yes. The README says Slidev can export slides to PDF, PNGs or PPTX.

Is there a drag-and-drop editor for Slidev?

Slidev is text-based. The README mentions an integrated editor and a VSCode extension, but this source does not describe how deep the editor is, so check the documentation before relying on it.

How does Slidev compare to reveal.js or Marp?

Slidev is one of several Markdown-based presentation tools. Comparable projects named in our analysis include reveal.js, Marp, Deckset and Quarto. This guide does not compare features in detail, so read each project's documentation to choose.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Slidev suits developers and technical presenters who are comfortable with Markdown and want slides in version control next to their code. It is a poor fit if you need a visual drag-and-drop editor, cannot install Node.js, or only need simple slides and do not want to learn Markdown and Vue features.

Install options & downloads