Slidev (original) (raw)

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:

pnpmnpmyarnbundeno

bash

# If you haven't installed pnpm
npm i -g pnpm

pnpm create slidev

bash

# Not recommended -
# NPM will download the packages each time you create a new project,
# which is slow and takes up a lot of space

npm init slidev@latest

bash

deno init --npm 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:

pnpmnpmyarnbundeno

bash

pnpm i -g @slidev/cli

bash

yarn global add @slidev/cli

bash

deno i -g npm:@slidev/cli

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

Basic Commands ​

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

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):

package.json

json

{
  "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

✨ Integrated Editor

✨ Prettier Plugin

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.