slidev Documentation

Add your pages to the Slidev app.

Usage Copy Chapter

Create ./setup/routes.ts with the following content:

import { defineRoutesSetup } from '@slidev/types'

export default defineRoutesSetup((routes) => {
  return [
    ...routes,
    {
      path: '/my-page',
      component: () => import('../pages/my-page.vue'),
    },
  ]
})

Learn more about routes in the Vue Router documentation.

File: docs/guide/draggable.md Copy Chapter

Draggable Elements

Draggable elements give you the ability to move, resize and rotate elements by dragging them with the mouse. This is useful for creating floating elements in your slides.

Directive Usage Copy Chapter

Data from the frontmatter Copy Section

---
dragPos:
  square: Left,Top,Width,Height,Rotate
---

Data from the directive value Copy Section

::: warning
Slidev use regex to update the position value in the slide content. If you meet problems, please use the frontmatter to define the values instead.
:::

Component Usage Copy Chapter

Data from the frontmatter Copy Section

---
dragPos:
  foo: Left,Top,Width,Height,Rotate
---

<v-drag pos="foo" text-3xl>
  <carbon:arrow-up />
  Use the `v-drag` component to have a draggable container!
</v-drag>

Data from props Copy Section

<v-drag pos="Left,Top,Width,Height,Rotate" text-3xl>
  <carbon:arrow-up />
  Use the `v-drag` component to have a draggable container!
</v-drag>

Automatic Height Copy Chapter

You can set Height to NaN (if you use the directive) or _ (if you use the component) to make the height of the draggable element automatically adjust to its content.

Create a Draggable Element Copy Chapter

When you first create a draggable element, you don't need to specify the position value (but you need to specify the position name if you want to use the frontmatter). Slidev will automatically generate the initial position value for you.

Controls Copy Chapter

• Double click the draggable element to start dragging it.
• You can also use the arrow keys to move the element.
• Hold Shift while dragging to preserve its aspect ratio.
• Click outside the draggable element to stop dragging it.

Draggable Arrow Copy Chapter

The <v-drag-arrow> component creates a draggable arrow element. Simply use it like this:

<v-drag-arrow />

And you will get a draggable arrow element. Other props are the same as the Arrow component.

File: docs/guide/overview.md Copy Chapter

Slide Overview

Available since v0.48.0

You can visit an overview of all of your slides by clicking the button in the navigation panel and then on the top right, or by visiting http://localhost:3030/overview directly.

The overview page gives you a linear list of all your slides, with all of your notes on the side. You can double click on the notes to edit the notes directly, or drag the clicks sliders to preview the steps in your slides.

File: guide/animations.md Copy Chapter

outline: deep Copy Chapter

Animations

Click Animations Copy Chapter

[!NOTE]
Since v0.48.0, we are rewritten the click animations system with much more consistent behaviors. It might change the behaviors of your existing slides in edge cases. While this page is showing the new click system, you can find more details about the refactor in #1279.

`v-click` Copy Section

To apply "click animations" for elements, you can use the v-click directive or <v-click> components

<v-click> Hello **World** </v-click>


 Hey!

`v-after` Copy Section

v-after is only provided as a directive. It will turn the element visible when the previous v-click is triggered.

Hello 
 World

When you press "next", both Hello and World will show up together.

Hide after clicking Copy Section

Add a .hide modifier to v-click or v-after to make the element invisible after clicking, instead of showing up.

Visible after 1 click 
 Hidden after 2 click 
 Hidden after 2 click

For v-click component, you can use the hide prop to achieve the same effect:

<v-click> Visible after 1 click </v-click>
<v-click hide> Hidden after 2 click </v-click>

`v-clicks` Copy Section

v-clicks is only provided as a component. It's a shorthand to apply the v-click directive to all its child elements. It is especially useful when working with lists and tables.

<v-clicks>

- Item 1
- Item 2
- Item 3

</v-clicks>

An item will become visible each time you click "next".
It accepts a depth prop for nested list:

<v-clicks depth="2">

- Item 1
  - Item 1.1
  - Item 1.2
- Item 2
  - Item 2.1
  - Item 2.2

</v-clicks>

Also, you can use the every prop to specify the number of items to show after each click:

<v-clicks every="2">

- Item 1 (part 1)
- Item 1 (part 2)
- Item 2 (part 1)
- Item 2 (part 2)

</v-clicks>

Positioning Copy Section

By default, the clicking animations take place one by one. You can customize the animation position of elements by using the at prop or the v-click directive with value.

Like the CSS layout system, click-animated elements can be "relative" or "absolute":

Relative Position

This actual position of relative elements are calculated based on the previous relative elements:

visible after 1 click 
<v-click at="+2"> visible after 3 clicks </v-click>
 hidden after 2 clicks 

```js {none|1|2}{at:'+5'}
1  // highlighted after 7 clicks
2  // highlighted after 8 clicks
```

[!NOTE]
The default value of v-click is '+1' when you don't specify it.

In fact, v-after are just shortcuts for v-click with at prop:

<v-click-gap size="1" />

:::info
Only string values start with '+' or '-' like '+1' are treated as relative positions:

So don't forget the single quotes for the relative values.
:::

Absolute Position

The given value is the exact click count to show the element:

visible after 3 clicks 
<v-click at="2"> visible after 2 clicks </v-click>
 hidden after 1 click 

```js {none|1|2}{at:3}
1  // highlighted after 3 clicks
2  // highlighted after 4 clicks
```

Mixed Case

You can mix the absolute and relative positions:

visible after 1 click 
 visible after 3 clicks 
 visible after 2 click 
 visible after 1 click 
 visible after 4 clicks

The following example synchronizes the highlighting of the two code blocks:

```js {1|2}{at:1}
1 + 1
'a' + 'b'
```

```js {1|2}{at:1}
2
'ab'
```

Enter & Leave Copy Section

You can also specify the enter and leave index for the v-click directive by passing an array. The end index is exclusive.

This will be hidden at click 2 and 3.



  This will be shown at click 3, and hidden since click 4.

You can also use v-switch to achieve the same effect:

<v-switch>
  <template #1> show at click 1, hide at click 2. </template>
  <template #2> show at click 2, hide at click 5. </template>
  <template #5-7> show at click 5, hide at click 7. </template>
</v-switch>

See VSwitch Component for more details.

Custom Total Clicks Count Copy Section

By default, Slidev counts how many steps are needed before going to the next slide. You can override this setting by passing the clicks frontmatter option:

---
# 10 clicks in this slide, before going to the next
clicks: 10
---

Element Transitions Copy Section

When you apply the v-click directive to your elements, it will attach the class name slidev-vclick-target to it. When the elements are hidden, the class name slidev-vclick-hidden will also be attached. For example:

Text

After a click, it will become

Text

By default, a subtle opacity transition is applied to those classes:

// the default

.slidev-vclick-target {
  transition: opacity 100ms ease;
}

.slidev-vclick-hidden {
  opacity: 0;
  pointer-events: none;
}

You can override them to customize the transition effects in your custom stylesheets.

For example, you can achieve the scaling up transitions by:

/* styles.css */

.slidev-vclick-target {
  transition: all 500ms ease;
}

.slidev-vclick-hidden {
  transform: scale(0);
}

To specify animations for only certain slide or layout

.slidev-page-7,
.slidev-layout.my-custom-layout {
  .slidev-vclick-target {
    transition: all 500ms ease;
  }

  .slidev-vclick-hidden {
    transform: scale(0);
  }
}

Learn more about customizing styles.

Rough Markers Copy Chapter

Available since v0.48.0

Slidev integrates Rough Notation to allow marking or highlighting elements in your slides.

`v-mark` Copy Section

Rough Notation integrates comes with the v-mark directive.

Type

v-mark.underline for Underline mark, v-mark.circle for Circle mark, etc. Default to underline

Color

v-mark.red make the notation red. Supported builtin color themes from UnoCSS. For custom colors, use object syntax v-mark="{ color: '#234' }"

Clicks

v-mark works like v-click and will trigger after a click. Same as v-click, it allows you to pass a custom click value, like v-mark="5" or v-mark="'+1'".

Options

Optionally you can pass an object to v-mark to specify the options, for example:

Important text

Preview

Motion Copy Chapter

Slidev has @vueuse/motion built-in. You can use the v-motion directive to any elements to make apply motion on them. For example

Slidev

The text Slidev will move from -80px to its original position on initialization.

Note: Slidev preloads the next slide for performance, which means the animations might start before you navigate to the page. To get it works properly, you can disable the preloading for the particular slide

md Copy

---
preload: false
---

Or control the element life-cycle with v-if to have fine-grained controls

html Copy

v-if="$slidev.nav.currentPage === 7"
  v-motion
  :initial="{ x: -80 }"
  :enter="{ x: 0 }">
  Slidev

Learn mode: Demo | @vueuse/motion | v-motion | Presets

Slide Transitions Copy Chapter

Available since v0.39.0

Slidev supports slide transitions out of the box. You can enable it by setting the transition frontmatter option:

---
transition: slide-left
---

This will give you a nice sliding effects on slide switching. Setting it in the frontmatter will apply to all slides. You can also set different transition per slide.

Builtin Transitions Copy Section

• fade - Crossfade in/out
• fade-out - Fade out and then fade in
• slide-left - Slides to the left (slide to right when going backward)
• slide-right - Slides to the right (slide to left when going backward)
• slide-up - Slides to the top (slide to bottom when going backward)
• slide-down - Slides to the bottom (slide to top when going backward)
• view-transition - Slides with the view transitions API

View Transitions Copy Section

Available since v0.43.0

The View Transitions API provides a mechanism for easily creating animated transitions between different DOM states. Learn more how it works in View Transitions API - MDN Web Docs - Mozilla.

:::warning
Experimental: This is not supported by all browsers. Check the Browser compatibility table carefully before using this.
:::

You can use the view-transition-name CSS property to name view transitions, which creates connections between different page elements and smooth transitions when switching slides.

You can enable MDC (Markdown Component) Syntax support to conveniently name view-transitions:

---
transition: view-transition
mdc: true
---

# View Transition {.inline-block.view-transition-title}

---

# View Transition {.inline-block.view-transition-title}

Custom Transitions Copy Section

Slidev's slide transitions are powered by Vue Transition. You can provide your custom transitions by:

---
transition: my-transition
---

and then in your custom stylesheets:

.my-transition-enter-active,
.my-transition-leave-active {
  transition: opacity 0.5s ease;
}

.my-transition-enter-from,
.my-transition-leave-to {
  opacity: 0;
}

Learn more how it works in Vue Transition.

Forward & Backward Transitions Copy Section

You can specify different transitions for forward and backward navigation using | as a separator in the transition name:

---
transition: go-forward | go-backward
---

With this, when you go from slide 1 to slide 2, the go-forward transition will be applied. When you go from slide 2 to slide 1, the go-backward transition will be applied.

Advanced Usage Copy Section

The transition field accepts an option that will passed to the `` component. For example:

---
transition:
  name: my-transition
  enterFromClass: custom-enter-from
  enterActiveClass: custom-enter-active
---

File: guide/drawing.md Copy Chapter

Drawing & Annotations

Available since v0.23

drauu is built-in for drawing and annotation, should that help improve your presentation further.

To start, click the icon in the toolbar and start drawing. It's also available in the Presenter Mode. Drawings and annotations you created will be synced automatically across all instances in real time.

Use with Stylus Pen Copy Chapter

When using a stylus pen on a tablet (for example, iPad with Apple Pencil), Slidev will intelligently detect the input type. You can directly draw on your slides with the pen without turning on the drawing mode, while having your fingers or mouse control the navigation.

Persist Drawings Copy Chapter

The following frontmatter configuration allows you to persist your drawings as SVGs under .slidev/drawings directory and have them inside your exported pdf or hosted site.

---
drawings:
  persist: true
---

Disable Drawings Copy Chapter

Entirely:

---
drawings:
  enabled: false
---

Only in Development:

---
drawings:
  enabled: dev
---

Only in Presenter Mode:

---
drawings:
  presenterOnly: true
---

Drawing Syncing Copy Chapter

By default, Slidev syncs up your drawings across all instances. If you are sharing your slides with others, you might want to disable the syncing via:

---
drawings:
  syncAll: false
---

With this config, only the drawing from the presenter instance will be able to sync with others.

File: guide/editors.md Copy Chapter

Editor Support

Since Slidev uses Markdown as the source entry, you can use any editor you prefer to create your slides.

If you want some high-level management to your slides, we have provided the following editor integrations for you!

Integrated Editor Copy Chapter

Slidev comes with an integrated editor that will instantly reload and save the changes to your file.

Click the button to open it.

VS Code Extension Copy Chapter

The VS Code extension provides some features to help you better organize your slides and have a quick overview of them.

Features Copy Section

• Preview slides in the side panel
• Slides tree view
• Re-ordering slides
• Folding for slide blocks
• Multiple slides project support
• Start the dev server with one click

::: code-group

:::

Installation Copy Section

You can install the extension from the VS Code Marketplace.

Usage Copy Section

Click the Slidev icon in the activity bar to open the Slidev panel. In the Slidev panel, you can see the projects tree view, slides tree view, and the preview webview.

In the projects tree view, you can see all the Slidev projects in your workspace. You can dlick the item to open the corresponding file, and click the icon over it to switch the active project. The icon allows you to load a slides project that wasn't scanned automatically.

In the slides tree view, you can see all the slides in the active project. You can click the item to move you cursor to the slide in the editor, and drag and drop to reorder the slides.

In the preview webview, you can click the icon to start the dev server and click the icon to open the slides in the browser. Toggle icon to sync/unsync the preview navigation with the editor cursor.

There are also some commands you can use. Type Slidev in the command palette to see them.

You can add glob patterns to the slidev.include configuration to include files as Slidev entries. The default value is ["**/*.md"]. Example:

{
  "slidev.include": ["**/presentation.md"]
}

Prettier Plugin Copy Chapter

Slidev also provides a Prettier plugin to format your slides. You can use it with your favorite editor that supports Prettier. Docs for the plugin can be found here.

File: guide/exporting.md Copy Chapter

Exporting

Slides Copy Chapter

PDF Copy Section

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

1. Install playwright-chromium:

$ npm i -D playwright-chromium

2. 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.

PNGs and Markdown Copy Section

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

$ slidev export --format png

You can also compile a markdown file composed of compiled png using --format md:

$ slidev export --format md

PPTX (Microsoft PowerPoint) Copy Section

Slidev can also export your slides as a PPTX file:

$ slidev export --format pptx

Note that all the slides in the PPTX file will be exported as images, so the text will not be selectable. Presenter notes will be conveyed into the PPTX file on a per-slide basis.

In this mode, the --with-clicks option is enabled by default. To disable it, use --with-clicks false.

Dark mode Copy Section

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 to export slides with multiple steps into multiple pages, pass the --with-clicks option:

$ slidev export --with-clicks

PDF outline Copy Section

Available since v0.36.10

You can generate the PDF outline by passing the --with-toc option:

$ slidev export --with-toc

Output filename Copy Section

You can specify the output filename with the --output option:

$ slidev export --output my-pdf-export

Or in the frontmatter configuration:

---
exportFilename: my-pdf-export
---

Export a range of slides Copy Section

By default, all slides in the presentation are exported. If you want to export a specific slide or a range of slides you can set the --range option and specify which slides you would like to export:

$ slidev export --range 1,6-8,10

This option accepts both specific slide numbers and ranges.

The example above would export slides 1,6,7,8, and 10.

Multiple entries Copy Section

You can also export multiple slides at once:

$ slidev export slides1.md slides2.md

Or

$ slidev export *.md

In this case, each input file will generate its own PDF file.

Presenter notes Copy Chapter

Available since v0.36.8

Export only the presenter notes (the last comment block for each slide) into a text document in PDF:

$ slidev export-notes

This command also accept multiple entries like for the export command

Single-Page Application (SPA) Copy Chapter

See Static Hosting.

Exportable Docker Image Copy Chapter

To support the export feature, there is a docker image (maintained by @tangramor) with tag playwright. Run following command in your work folder:

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

Then you can use the export feature like the following under your work folder:

docker exec -i slidev npx slidev export --timeout 2m --output slides.pdf

Troubleshooting Copy Chapter

Timeouts Copy Section

For big presentations you might want to increase the Playwright timeout with --timeout:

$ slidev export --timeout 60000

Wait Copy Section

Some parts of your slides may require a longer time to render. You can use the --wait option to have an extra delay before exporting:

$ slidev export --wait 10000

There is also a --wait-until option to wait for a state before exporting each slide:

$ slidev export --wait-until none

Possible values:

• 'networkidle' - (default) consider operation to be finished when there are no network connections for at least 500 ms. Don't use this method for testing, rely on web assertions to assess readiness instead.
• 'domcontentloaded' - consider operation to be finished when the DOMContentLoaded event is fired.
• 'load' - consider operation to be finished when the load event is fired.
• 'none' - do not wait for any event.

::: warning
When specifying values other than 'networkidle', please make sure the printed slides are complete and correct. If some contents are missing, you may need to use the --wait option.
:::

Executable path Copy Section

Chromium may miss some features like codecs that are required to decode some videos. You can set the browser executable path for Playwright to your Chrome or Edge using --executable-path:

$ slidev export --executable-path [path_to_chromium]

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 UnoCSS is built-in, here's one way that you can 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)

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