LICENSE Documentation

File: guide/exporting.md Copy Chapter

Exporting

PDF Copy Chapter

Exporting to PDF or PNG relies on Playwright for rendering. You will therefore need to install playwright-chromium to use this feature.
If you are doing exporting in a CI environment, the playwright CI guide can be helpful.

Install playwright-chromium

$ npm i -D playwright-chromium

Now export your slides to PDF using the following command

$ slidev export

After a few seconds, your slides will be ready at ./slides-export.pdf.

In case you want to export your slides using the dark version of the theme, use the --dark option:

$ slidev export --dark

Export Clicks Steps Copy Section

Available since v0.21

By default, Slidev exports one page per slide with clicks animations disabled. If you want export slides with multiple steps into multiple pages, pass the --with-clicks options.

$ slidev export --with-clicks

PNGs Copy Chapter

When passing in the --format png option, Slidev will export PNG images for each slide instead of a PDF.

$ slidev export --format png

Single-Page Application (SPA) Copy Chapter

See Static Hosting.

File: guide/faq.md Copy Chapter

FAQ

Grids Copy Chapter

Since Slidev is based on the Web, you can apply any grid layouts as you want. CSS Grids, flexboxes, or even Masonry, you get the full controls.

Since we have Windi CSS built-in, here is one simple way for you to reference:

The first column




The second column

Go further, you can customize the size of each column like:

The first column (200px)




The second column (auto fit)




The third column (10% width to parent container)

Learn more about Windi CSS Grids.

Positioning Copy Chapter

Slides are defined in fixed sizes (default 980x552px) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.

For example:

This is a left-bottom aligned footer

To change the canvas' actual size, you can pass the canvasWidth options in your first frontmatter:

---
canvasWidth: 800
---

Font Size Copy Chapter

If you feel the font size in your slides are too small, you can adjust it in a few ways:

Override Local Style Copy Section

You can override styles for each slide with the inlined <style> tag.

# Page 1

<style>
h1 {
  font-size: 10em;
}
</style>

---

# Page 2

This will not be affected.

Learn more: Embedded Styles

Override Global Style Copy Section

You can provide custom global styles by creating ./style.css, for example

/* style.css */ 

h1 {
  font-size: 10em !important;
}

Learn more: Global Style

Scale the Canvas Copy Section

Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides

---
# default: 980
# since the canvas gets smaller, the visual size will become larger
canvasWidth: 800
---

Use Transform Copy Section

We provide a built-in component ``, which is a thin wrapper of CSS transform property.

- Item 1
- Item 2

File: guide/hosting.md Copy Chapter

Static Hosting

Build Single Page Applications (SPA) Copy Chapter

You can also build the slides into a self-hostable SPA:

$ slidev build

The generated application will be available under dist/ and then you can host it on GitHub Pages, Netlify, Vercel, or whatever you want. Now you can share your slides with the rest of the world with a single link.

Base Path Copy Section

To deploy your slides under sub-routes, you will need to pass the --base option. For example:

$ slidev build --base /talks/my-cool-talk/

Refer to Vite's documentation for more details.

Provide Downloadable PDF Copy Section

You can provide a downloadable PDF to the viewers of your SPA with the following config:

---
download: true
---

Slidev will generate a pdf file along with the build, and a download button will be displayed in the SPA.

You can also provide a custom url to the PDF. In that case, the rendering process will be skipped.

---
download: 'https://myside.com/my-talk.pdf'
---

Examples Copy Chapter

Here are a few examples of the exported SPA:

• Starter Template
• Composable Vue by Anthony Fu

For more, check out Showcases.

Hosting Copy Chapter

We recommend to use npm init slidev@lastest to scaffolding your project, which contains the necessary configuration files for hosting services out-of-box.

Netlify Copy Section

• Netlify

Create netlify.toml in your project root with the following content.

[build.environment]
  NODE_VERSION = "14"

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Then go to your Netlify dashboard, create new site with the repository.

Vercel Copy Section

• Vercel

Create vercel.json in your project root with the following content.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Then go to your Vercel dashboard, create new site with the repository.

GitHub Pages Copy Chapter

• GitHub Pages

Create .github/workflows/deploy.yml with following content to deploy your slides to GitHub Pages via GitHub Actions.

name: Deploy pages
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Deploy pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

File: guide/index.md Copy Chapter

Getting Started

Overview Copy Chapter

Slidev ^{(slide + dev, /slʌɪ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 Copy Section

• 📝 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 - Windi CSS on-demand utilities, easy-to-use embedded stylesheets
• 🤹 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 Copy Section

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
• Windi CSS - On-demand utility-first CSS framework, style your slides at ease
• Prism, 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.

Scaffolding Your First Presentation Copy Section

Try it Online

sli.dev/new

Create Locally

With NPM:

$ npm init slidev

With Yarn:

$ yarn 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 Copy Section

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 Copy Section

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.

File: guide/install.md Copy Chapter

Installation

Starter Template Copy Chapter

Slidev requires Node.js >=14.0

The best way to get started is using our official starter template.

With NPM:

$ npm init slidev@latest

With Yarn:

$ yarn create slidev

Follow the prompts and it will open up the slideshow at http://localhost:3030/ automatically for you.

It also contains the basic setup and a short demo with instructions on how to get started with Slidev.

Install Manually Copy Chapter

If you still prefer to install Slidev manually or would like to integrate it into your existing projects, you can do:

$ npm install @slidev/cli @slidev/theme-default

$ touch slides.md

$ npx slidev

Please note if you are using pnpm, you will need to enable shamefully-hoist option for Slidev to work properly:

bash Copy

echo 'shamefully-hoist=true' >> .npmrc

Install Globally Copy Chapter

Available since v0.14

You can install Slidev globally with the following command

$ npm i @slidev/cli

And then use slidev everywhere without creating a project every time.

$ slidev

This command will also try to use local @slidev/cli if it has been found in the node_modules.

Install on Docker Copy Chapter

If you need a rapid way to run a presentation with containers, you can use the prebuilt docker image maintained by tangramor, or build your own.

Just run following command in your work folder:

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    tangramor/slidev:latest

If your work folder is empty, it will generate a template slides.md and other related files under your work folder, and launch the server on port 3030.

You can access your slides from http://localhost:3030/

Build deployable image Copy Section

Or you can create your own slidev project to a docker image with Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Create the docker image: docker build -t myppt .

And run the container: docker run --name myslides --rm --user node -p 3030:3030 myppt

You can visit your slides from http://localhost:3030/

Build hostable SPA (Single Page Application) Copy Section

Run command docker exec -i slidev npx slidev build on the running container slidev. It will generate static HTML files under dist folder.

Host on Github Pages

You can host dist in a static web site such as Github Pages or Gitlab Pages.

Because in Github pages the url may contain subfolder, so you need to modify the generated index.html to change href="/assets/xxx to href="./assets/xxx. Or you may use --base=/<subfolder>/ option during the build process, such as: docker exec -i slidev npx slidev build --base=/slidev_docker/.

And to avoid Jekyll build process, you need to add an empty file .nojekyll.

Host by docker

You can also host it by yourself with docker:

docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine

Or create a static image with following Dockerfile:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

Create the docker image: docker build -t mystaticppt .

And run the container: docker run --name myslides --rm -p 80:80 mystaticppt

You can visit your slides from http://localhost/

Refer to the tangramor/slidev_docker for more details.

Command Line Interface (CLI) Copy Section

@slidev/cli Expose a few commands you can use with npx slidev ... or by adding scripts in your package.json:

{
  "script": {
    "dev": "slidev"
  }
}

In that case you will be able to run npm run dev.

You can pass options to any commands:

• boolean option are true if they are present, false otherwise (example: slidev --open)
• some options can have values you can add just after the option or by using the = character (example: slidev --port 8080 or slidev --port=8080)

If you use npm scripts, don't forget to add -- after the npm command:

npm run slidev -- --open

`slidev [entry]`

Start a local server for Slidev.

• [entry] (string, default: slides.md): path to the slides markdown entry.

Options:

• --port, -p (number, default: 3030): port number.
• --open, -o (boolean, default: false): open in browser.
• --remote [password] (string): listen to public host and enable remote control, if a value is passed then the presenter mode is private and only accessible by passing the given password in the URL query password parameter.
• --log ('error', 'warn', 'info', 'silent', default: 'warn'): Log level.
• --force, -f (boolean, default false): force the optimizer to ignore the cache and re-bundle.
• --theme, -t (string): override theme.

`slidev build [entry]`

Build hostable SPA.

• [entry] (string, default: slides.md): path to the slides markdown entry.

Options:

• --watch, -w (boolean, default: false): build watch.
• --out, -o (string, default: dist): output dir.
• --base (string, default: /): base URL (see https://cli.vuejs.org/config/#publicpath)
• --download (boolean, default: false): allow to download the slides as PDF inside the SPA.
• --theme, -t (string): override theme.

`slidev export [entry]`

Export slides to PDF (or other format).

• [entry] (string, default: slides.md): path to the slides markdown entry.

Options:

• --output (string, default: use exportFilename (see https://sli.dev/custom/#frontmatter-configures) or use [entry]-export): path to the output.
• --base ('pdf', 'png', 'md', default: 'pdf'): output format.
• --timeout (number, default: 30000): timeout for rendering the print page (see https://playwright.dev/docs/api/class-page#page-goto).
• --range (string): page ranges to export (example: '1,4-5,6').
• --dark (boolean, default: false): export as dark theme.
• --with-clicks, -c (boolean, default: false): export pages for every clicks (see https://sli.dev/guide/animations.html#click-animations).
• --theme, -t (string): override theme.

`slidev format [entry]`

Format the markdown file.

• [entry] (string, default: slides.md): path to the slides markdown entry.

`slidev theme [subcommand]`

Theme related operations.

Subcommands:

• eject [entry]: Eject current theme into local file system
  • [entry] (string, default: slides.md): path to the slides markdown entry.
  • Options:
    • --dir (string, default: theme): output dir.
    • --theme, -t (string): override theme.

File: guide/navigation.md Copy Chapter

Navigation

Navigation Bar Copy Chapter

Move your mouse to the left bottom corner of Slidev page, the navigation bar will be appeared.

Slides Overview Copy Chapter

By pressing o or clicking the button in the navigation bar, you can have the overview of your slides so you can jump between them easily.