Getting Started

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. With the power of web technologies like Vue, you are able to deliver pixel-perfect designs with interactive demos to your presentation.

TIP

You can learn more about the rationale behind this project in

📖 Why Slidev

.

Create Slides

Try it Online

Start Slidev right in your browser with StackBlitz: sli.dev/new

Create Locally

Requires Node.js >= 18.0 installed.

Run the following command to create a new Slidev project locally:

npm

npm init slidev@latest

pnpm

pnpm create slidev

yarn

yarn create slidev

Follow the prompts to start your slides project. The slides content is in slides.md, which initially includes demos of most the Slidev features. For more information about the Markdown syntax, please check

📖 Syntax Guide

.

Single file usage (not recommended)

If you prefer to have a single Markdown file as your slides, you can install the Slidev CLI globally:

npm

npm i -g @slidev/cli

pnpm

pnpm i -g @slidev/cli

yarn

yarn global add @slidev/cli

Then, you can create and start a single file slides via:

slidev slides.md

Basic Commands

Slidev provides a set of commands in its CLI. Here are some common ones:

• slidev - Start the dev server. See the dev command.
• slidev export - Export the slides to PDF, PPTX, or PNGs. See
  📖 Exporting
  .
• slidev build - Build the slides as a static web application. See
  📖 Hosting
  .
• slidev format - Format the slides. See the format command.
• slidev --help - Show the help message

To run these commands, you can add them to your package.json scripts (which has been done for you if the project was created via npm init slidev):

{
  "scripts": {
    "dev": "slidev --open",
    "build": "slidev build",
    "export": "slidev export"
  }
}

Then, you can simply run npm run dev, npm run build, and npm run export.

For more information about the CLI, please check the CLI guide.

Setup Your Editor

Since Slidev uses Markdown as the source entry, you can use any editor you prefer to create your slides. We also provide tools to help you edit you slides more conveniently:

✨ VS Code Extension

Editor

Help you better organize your slides and have a quick overview of them.

✨ Integrated Editor

Editor

Edit your slides source file alongside the presentation.

✨ Prettier Plugin

Editor

Use the Prettier plugin to format your slides.

Join the Community

It's recommended to join our official Discord Server to get help, share your slides, or discuss anything about Slidev.

If you're encountering bugs, feel free to open an issue on GitHub.

Tech Stack

Slidev is made possible by combining these tools and technologies.

• Vite - An extremely fast frontend tooling
• Vue 3 powered Markdown - Focus on the content while having the power of HTML and Vue components whenever needed
• UnoCSS - On-demand utility-first CSS framework, style your slides at ease
• Shiki, Monaco Editor - First-class code snippets support with live coding capability
• RecordRTC - Built-in recording and camera view
• VueUse family - @vueuse/core, @vueuse/head, @vueuse/motion, etc.
• Iconify - Iconsets collection.
• Drauu - Drawing and annotations support
• KaTeX - LaTeX math rendering.
• Mermaid - Textual Diagrams.