Getting Started

Overview

Slidev (slide + dev, /slaɪdɪv/) is a web-based slides maker and presenter. It's designed for developers to focus on writing content in Markdown while also having the power of HTML and Vue components to deliver pixel-perfect layouts and designs with embedded interactive demos in your presentations.

It uses a feature-rich markdown file to generate beautiful slides with an instant reloading experience, along with many built-in integrations such as live coding, PDF exporting, presentation recording, and so on. Since it's powered by the web, you can do anything with Slidev - the possibilities are endless.

You can learn more about the rationale behind the project in the Why Slidev section.

Features

  • 📝 Markdown-based - use your favorite editors and workflow
  • 🧑‍💻 Developer Friendly - built-in syntax highlighting, live coding, etc.
  • 🎨 Themable - theme can be shared and used with npm packages
  • 🌈 Stylish - on-demand utilities via UnoCSS or Windi CSS.
  • 🤹 Interactive - embedding Vue components seamlessly
  • 🎙 Presenter Mode - use another window, or even your phone to control your slides
  • 🎨 Drawing - draw and annotate on your slides
  • 🧮 LaTeX - built-in LaTeX math equations support
  • 📰 Diagrams - creates diagrams with textual descriptions
  • 🌟 Icons - Access to icons from any iconset directly
  • 💻 Editors - integrated editor, or extension for VS Code
  • 🎥 Recording - built-in recording and camera view
  • 📤 Portable - export into PDF, PNGs, or even a hostable SPA
  • ⚡️ Fast - instant reloading powered by Vite
  • 🛠 Hackable - using Vite plugins, Vue components, or any npm packages

Tech Stack

Slidev is made possible by combining these tools and technologies.

Scaffolding Your First Presentation


Try it Online

sli.dev/new

Create Locally

With NPM:

$ npm init slidev

With Yarn:

$ yarn create slidev

With pnpm:

$ pnpm create slidev

Follow the prompts and start making your slides now! For more details about the markdown syntax, read through the syntax guide.

Command Line Interface

In a project where Slidev is installed, you can use the slidev binary in your npm scripts.

{
  "scripts": {
    "dev": "slidev", // start dev server
    "build": "slidev build", // build for production SPA
    "export": "slidev export" // export slides to pdf
  }
}

Otherwise, you can use it with npx

$ npx slidev

Run slidev --help for more options available.

Markdown Syntax

Slidev reads your slides.md file under your project root and converts them into slides. Whenever you made changes to it, the content of the slides will be updated immediately. For example:

# Slidev

Hello World

---

# Page 2

Directly use code blocks for highlighting

//```ts
console.log('Hello, World!')
//```

---

# Page 3

Read more about the Slidev Markdown syntax in the syntax guide.