Skip to content

Installation

Starter Template

Slidev requires Node.js >=18.0

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

bash
npm init slidev@latest
bash
yarn create slidev
bash
pnpm 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

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

bash
npm install @slidev/cli @slidev/theme-default
bash
touch slides.md
bash
npx slidev

Install Globally

Available since v0.14

You can install Slidev globally with the following command

bash
npm i -g @slidev/cli

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

bash
npx slidev

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

Install on Docker

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 the following command in your work folder:

bash
docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

Note: You can use NPM_MIRROR to specify a npm mirror to speed up the installation process.

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

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

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 at http://localhost:3030/

Build hostable SPA (Single Page Application)

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 website such as Github Pages or Gitlab Pages.

Because in GitHub Pages, the URL may contain subfolders, you may use --base=/<subfolder>/ option during the build process, such as docker exec -i slidev npx slidev build --base=/slidev_docker/.

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

Host by docker

You can also host it by yourself with docker:

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

Or create a static image with the following Dockerfile:

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 at http://localhost/

Refer to the tangramor/slidev_docker for more details.

Command Line Interface (CLI)

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

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

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

You can pass options to any command:

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

bash
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 the browser.
  • --remote [password] (string): listen to the 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.
  • --bind (string, default: 0.0.0.0): specify which IP addresses the server should listen on in the remote mode.
  • --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:

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 the current theme into the local file system
    • [entry] (string, default: slides.md): path to the slides markdown entry.
    • Options:
      • --dir (string, default: theme): the output dir.
      • --theme, -t (string): override theme.

Released under the MIT License.