AIpkg · skill · detail

skill

slidev

“Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.”

editionv0.1.0

imprintantfu

leaves58 · 67 kB

manuscript190 ln · 1,024 wd

---

description: Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks.

---

# Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown.

## When to Use

- Technical presentations or slidedecks with live code examples

- Syntax-highlighted code snippets with animations

- Interactive demos (Monaco editor, runnable code)

- Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML)

- Record presentations with presenter notes

- Export to PDF, PPTX, or host as SPA

- Code walkthroughs for developer talks or workshops

## Quick Start

```bash

pnpm create slidev # Create project

pnpm run dev # Start dev server (opens http://localhost:3030)

pnpm run build # Build static SPA

pnpm run export # Export to PDF (requires playwright-chromium)

```

**Verify**: After `pnpm run dev`, confirm slides load at `http://localhost:3030`. After `pnpm run export`, check the output PDF exists in the project root.

## Basic Syntax

```md

---

theme: default

title: My Presentation

---

# First Slide

Content here

---

# Second Slide

More content

<!--

Presenter notes go here

-->

```

- `---` separates slides

- First frontmatter = headmatter (deck config)

- HTML comments = presenter notes

## Core References

| Topic | Description | Reference |

|-------|-------------|-----------|

| Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) |

| Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) |

| Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) |

| Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) |

| CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) |

| Components | Built-in Vue components | [core-components](references/core-components.md) |

| Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) |

| Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) |

| Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) |

| Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) |

## Feature Reference

### Code & Editor

| Feature | Usage | Reference |

|---------|-------|-----------|

| Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) |

| Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) |

| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) |

| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) |

| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) |

| Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) |

| Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) |

| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) |

| Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) |

| TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) |

| Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) |

### Diagrams & Math

| Feature | Usage | Reference |

|---------|-------|-----------|

| Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) |

| PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) |

| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) |

### Layout & Styling

| Feature | Usage | Reference |

|---------|-------|-----------|

| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) |

| Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) |

| Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) |

| Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) |

| Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) |

| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) |

| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) |

| Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) |

### Animation & Interaction

| Feature | Usage | Reference |

|---------|-------|-----------|

| Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) |

| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) |

| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) |

| Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) |

| Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) |

### Syntax Extensions

| Feature | Usage | Reference |

|---------|-------|-----------|

| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) |

| Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) |

| Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) |

| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) |

### Presenter & Recording

| Feature | Usage | Reference |

|---------|-------|-----------|

| Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) |

| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) |

| Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) |

| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) |

### Export & Build

| Feature | Usage | Reference |

|---------|-------|-----------|

| Export options | `slidev export` | [core-exporting](references/core-exporting.md) |

| Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) |

| Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) |

| Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) |

| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) |

| SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) |

**Export prerequisite**: `pnpm add -D playwright-chromium` is required for PDF/PPTX/PNG export. If export fails with a browser error, install this dependency first.

### Editor & Tools

| Feature | Usage | Reference |

|---------|-------|-----------|

| Side editor | Click edit icon | [editor-side](references/editor-side.md) |

| VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) |

| Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) |

| Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) |

### Lifecycle & API

| Feature | Usage | Reference |

|---------|-------|-----------|

| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) |

| Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) |

## Common Layouts

| Layout | Purpose |

|--------|---------|

| `cover` | Title/cover slide |

| `center` | Centered content |

| `default` | Standard slide |

| `two-cols` | Two columns (use `::right::`) |

| `two-cols-header` | Header + two columns |

| `image` / `image-left` / `image-right` | Image layouts |

| `iframe` / `iframe-left` / `iframe-right` | Embed URLs |

| `quote` | Quotation |

| `section` | Section divider |

| `fact` / `statement` | Data/statement display |

| `intro` / `end` | Intro/end slides |

## Resources

- Documentation: https://sli.dev

- Theme Gallery: https://sli.dev/resources/theme-gallery

- Showcases: https://sli.dev/resources/showcases

tree67 kB

references52

mdreferences/core-animations.md

2.6 kB

---

description: Click animations, motion effects, and slide transitions

---

# Animations

Click animations, motion effects, and slide transitions.

## Click Animations

### v-click Directive

```md

<div v-click>Appears on click</div>

<div v-click>Appears on next click</div>

```

### v-clicks Component

Animate list items:

```md

<v-clicks>

- Item 1

- Item 2

- Item 3

</v-clicks>

```

With depth for nested lists:

```md

<v-clicks depth="2">

- Parent 1

- Child 1

- Child 2

- Parent 2

</v-clicks>

```

### Click Positioning

Relative positioning:

```md

<div v-click>1st (default)</div>

<div v-click="-1">Same as previous</div>

```

Absolute positioning:

```md

<div v-click="3">Appears on click 3</div>

<div v-click="[2,5]">Visible clicks 2-5</div>

```

### v-after

Show with previous element:

```md

<div v-click>Main element</div>

<div v-after>Appears with main element</div>

```

### v-switch

Conditional rendering by click:

```md

<v-switch>

<template #1>First state</template>

<template #2>Second state</template>

<template #3>Third state</template>

</v-switch>

```

## Custom Click Count

```md

---

clicks: 10

---

```

Or starting from specific count:

```md

---

clicksStart: 5

---

```

## Motion Animations

Using @vueuse/motion:

```md

<div

v-motion

:initial="{ x: -100, opacity: 0 }"

:enter="{ x: 0, opacity: 1 }"

Animated content

</div>

```

Click-based motion:

```md

<div

v-motion

:initial="{ scale: 1 }"

:click-1="{ scale: 1.5 }"

:click-2="{ scale: 1 }"

Scales on clicks

</div>

```

## Slide Transitions

In headmatter (all slides):

```md

---

transition: slide-left

---

```

Per-slide:

```md

---

transition: fade

---

```

### Built-in Transitions

- `fade` / `fade-out`

- `slide-left` / `slide-right`

- `slide-up` / `slide-down`

- `view-transition` (View Transitions API)

### Directional Transitions

Different transitions for forward/backward:

```md

---

transition: slide-left | slide-right

---

```

### Custom Transitions

Define CSS classes:

```css

.my-transition-enter-active,

.my-transition-leave-active {

transition: all 0.5s ease;

}

.my-transition-enter-from,

.my-transition-leave-to {

opacity: 0;

transform: translateX(100px);

}

```

Use: `transition: my-transition`

## CSS Classes

Animation targets get these classes:

- `.slidev-vclick-target` - Animated element

- `.slidev-vclick-hidden` - Hidden state

- `.slidev-vclick-current` - Current click target

- `.slidev-vclick-prior` - Previously shown

## Default Animation CSS

```css

.slidev-vclick-target {

transition: opacity 100ms ease;

}

.slidev-vclick-hidden {

opacity: 0;

pointer-events: none;

}

```

mdreferences/core-cli.md

2.7 kB

---

description: Slidev command-line interface reference

---

# CLI Commands

Slidev command-line interface reference.

## Dev Server

```bash

slidev [entry]

slidev slides.md

```

Options:

| Option | Default | Description |

|--------|---------|-------------|

| `--port` | 3030 | Server port |

| `--open` | false | Open browser |

| `--remote [password]` | - | Enable remote access |

| `--bind` | 0.0.0.0 | Bind address |

| `--base` | / | Base URL path |

| `--log` | warn | Log level |

| `--force` | false | Force optimizer re-bundle |

| `--theme` | - | Override theme |

Examples:

```bash

slidev --port 8080 --open

slidev --remote mypassword

slidev --base /talks/my-talk/

```

## Build

```bash

slidev build [entry]

```

Options:

| Option | Default | Description |

|--------|---------|-------------|

| `--out` | dist | Output directory |

| `--base` | / | Base URL for deployment |

| `--download` | false | Include PDF download |

| `--theme` | - | Override theme |

| `--without-notes` | false | Exclude presenter notes |

Examples:

```bash

slidev build --base /my-repo/

slidev build --download --out public

slidev build slides1.md slides2.md # Multiple builds

```

## Export

```bash

slidev export [entry]

```

Options:

| Option | Default | Description |

|--------|---------|-------------|

| `--output` | - | Output filename |

| `--format` | pdf | pdf / png / pptx / md |

| `--timeout` | 30000 | Timeout per slide (ms) |

| `--range` | - | Slide range (e.g., 1,4-7) |

| `--dark` | false | Export dark mode |

| `--with-clicks` | false | Include click steps |

| `--with-toc` | false | PDF table of contents |

| `--wait` | 0 | Wait ms before export |

| `--wait-until` | networkidle | Wait condition |

| `--omit-background` | false | Transparent background |

| `--executable-path` | - | Browser path |

Examples:

```bash

slidev export

slidev export --format pptx

slidev export --format png --range 1-5

slidev export --with-clicks --dark

slidev export --timeout 60000 --wait 2000

```

## Format

```bash

slidev format [entry]

```

Formats the slides markdown file.

## Theme Eject

```bash

slidev theme eject [entry]

```

Options:

| Option | Default | Description |

|--------|---------|-------------|

| `--dir` | theme | Output directory |

| `--theme` | - | Theme to eject |

Extracts theme to local directory for customization.

## npm Script Usage

In package.json:

```json

{

"scripts": {

"dev": "slidev",

"build": "slidev build",

"export": "slidev export"

}

```

With arguments (note `--`):

```bash

npm run dev -- --port 8080 --open

npm run export -- --format pptx

```

## Boolean Options

```bash

slidev --open # Same as --open true

slidev --no-open # Same as --open false

```

## Install CLI Globally

```bash

npm i -g @slidev/cli

```

mdreferences/core-components.md

2.7 kB

---

description: Ready-to-use components in Slidev

---

# Built-in Components

Ready-to-use components in Slidev.

## Navigation

### Link

Navigate to slide:

```md

<Link to="5">Go to slide 5</Link>

<Link to="intro">Go to intro</Link>

```

### SlideCurrentNo / SlidesTotal

```md

Slide <SlideCurrentNo /> of <SlidesTotal />

```

### Toc (Table of Contents)

```md

<Toc />

```

Props:

- `columns` - Number of columns

- `maxDepth` / `minDepth` - Heading depth filter

- `mode` - 'all' | 'onlyCurrentTree' | 'onlySiblings'

### TitleRenderer

Render slide title:

```md

```

## Animations

### VClick / VClicks

```md

<VClick>Shows on click</VClick>

- Item 1

- Item 2

</VClicks>

```

### VAfter

```md

<VClick>First</VClick>

<VAfter>Shows with first</VAfter>

```

### VSwitch

```md

<template #1>State 1</template>

<template #2>State 2</template>

</VSwitch>

```

## Drawing

### Arrow

```md

```

Props: `x1`, `y1`, `x2`, `y2`, `width`, `color`, `two-way`

### VDragArrow

Draggable arrow:

```md

```

## Layout

### Transform

Scale elements:

```md

</Transform>

```

Props: `scale`, `origin`

### AutoFitText

Auto-sizing text:

```md

```

## Media

### SlidevVideo

```md

</SlidevVideo>

```

Props: `controls`, `autoplay`, `autoreset`, `poster`, `timestamp`

### Youtube

```md

```

### Tweet

```md

```

## Conditional

### LightOrDark

```md

<template #dark>Dark mode content</template>

<template #light>Light mode content</template>

</LightOrDark>

```

### RenderWhen

```md

Only in presenter mode

</RenderWhen>

```

Context values:

- `main` - Main presentation view

- `visible` - Visible slides

- `print` - Print/export mode

- `slide` - Normal slide view

- `overview` - Overview mode

- `presenter` - Presenter mode

- `previewNext` - Next slide preview

## Branding

### PoweredBySlidev

```md

```

## Draggable

### VDrag

```md

Draggable content

</VDrag>

```

See [draggable](draggable.md) for details.

## Component Auto-Import

Components from these sources are auto-imported:

1. Built-in components

2. Theme components

3. Addon components

4. `./components/` directory

No import statements needed.

mdreferences/core-exporting.md

2.0 kB

---

description: Export presentations to PDF, PPTX, PNG, or Markdown

---

# Exporting Slides

Export presentations to PDF, PPTX, PNG, or Markdown.

## Browser Exporter

Access at `http://localhost:3030/export`:

- Select format and options

- Preview and download

## CLI Export

Requires playwright:

```bash

pnpm add -D playwright-chromium

```

### PDF Export

```bash

slidev export

slidev export --output my-slides.pdf

```

### PowerPoint Export

```bash

slidev export --format pptx

```

### PNG Export

```bash

slidev export --format png

slidev export --format png --range 1-5

```

### Markdown Export

```bash

slidev export --format md

```

## Export Options

### With Click Steps

Export each click as separate page:

```bash

slidev export --with-clicks

```

### Dark Mode

```bash

slidev export --dark

```

### Slide Range

```bash

slidev export --range 1,4-7,10

```

### Table of Contents

PDF with clickable outline:

```bash

slidev export --with-toc

```

### Timeout

For slow-rendering slides:

```bash

slidev export --timeout 60000

```

### Wait

Wait before capture:

```bash

slidev export --wait 2000

```

### Wait Until

Wait condition:

```bash

slidev export --wait-until networkidle # Default

slidev export --wait-until domcontentloaded

slidev export --wait-until load

slidev export --wait-until none

```

### Transparent Background

```bash

slidev export --omit-background

```

### Custom Browser

```bash

slidev export --executable-path /path/to/chrome

```

## Headmatter Options

```yaml

---

exportFilename: my-presentation

download: true # Add download button in build

export:

format: pdf

timeout: 30000

withClicks: false

---

```

## Troubleshooting

### Missing Content

Increase wait time:

```bash

slidev export --wait 3000 --timeout 60000

```

### Wrong Global Layer State

Use `--per-slide` or use `slide-top.vue` instead of `global-top.vue`.

### Broken Emojis

Use system fonts or install emoji font on server.

### CI/CD Export

Install playwright browsers:

```bash

npx playwright install chromium

```

mdreferences/core-frontmatter.md

2.3 kB

---

description: Configuration options for individual slides

---

# Per-Slide Frontmatter

Configuration options for individual slides.

## Layout

```yaml

---

---

```

Available layouts: `default`, `cover`, `center`, `two-cols`, `two-cols-header`, `image`, `image-left`, `image-right`, `iframe`, `iframe-left`, `iframe-right`, `quote`, `section`, `statement`, `fact`, `full`, `intro`, `end`, `none`

## Background

```yaml

---

background: /image.jpg

backgroundSize: cover

---

```

## Click Count

```yaml

---

clicks: 5 # Total clicks for this slide

clicksStart: 0 # Starting click number

---

```

## Transitions

```yaml

---

transition: fade # Slide transition

---

```

Or different for forward/backward:

```yaml

---

transition: slide-left | slide-right

---

```

## Zoom

```yaml

---

zoom: 0.8 # Scale content (0.8 = 80%)

---

```

## Hide Slide

```yaml

---

disabled: true # Hide this slide

# or

hide: true

---

```

## Table of Contents

```yaml

---

hideInToc: true # Hide from Toc component

level: 2 # Override heading level

title: Custom Title # Override slide title

---

```

## Import External File

```yaml

---

src: ./slides/intro.md # Import markdown file

---

```

With specific slides:

```yaml

---

src: ./other.md#2,5-7 # Import slides 2, 5, 6, 7

---

```

## Route Alias

```yaml

---

routeAlias: intro # URL: /intro instead of /1

---

```

## Preload

```yaml

---

preload: false # Don't mount until entering

---

```

## Draggable Positions

```yaml

---

dragPos:

logo: 100,50,200,100,0 # Left,Top,Width,Height,Rotate

arrow: 300,200,50,50,45

---

```

## Image Layouts

```yaml

---

image: /photo.jpg

backgroundSize: contain

---

```

## Iframe Layouts

```yaml

---

url: https://example.com

---

```

## Two Columns

```yaml

---

---

# Left Side

Content

::right::

# Right Side

Content

```

## Two Columns with Header

```yaml

---

---

# Header

::left::

Left content

::right::

Right content

```

## Full Example

```yaml

---

background: /bg.jpg

transition: fade

clicks: 3

zoom: 0.9

hideInToc: false

---

# Slide Content

```

mdreferences/core-global-context.md

2.8 kB

---

description: Access navigation, slide info, and configuration programmatically

---

# Global Context & API

Access navigation, slide info, and configuration programmatically.

## Template Variables

Available in slides and components:

```md

Page {{ $page }} of {{ $nav.total }}

Title: {{ $slidev.configs.title }}

```

### $nav

Navigation state and controls:

| Property | Type | Description |

|----------|------|-------------|

| `$nav.currentPage` | number | Current page (1-indexed) |

| `$nav.currentLayout` | string | Current layout name |

| `$nav.total` | number | Total slides |

| `$nav.isPresenter` | boolean | In presenter mode |

| `$nav.next()` | function | Next click/slide |

| `$nav.prev()` | function | Previous click/slide |

| `$nav.nextSlide()` | function | Next slide |

| `$nav.prevSlide()` | function | Previous slide |

| `$nav.go(n)` | function | Go to slide n |

### $slidev

Global context:

| Property | Description |

|----------|-------------|

| `$slidev.configs` | Project config (title, etc.) |

| `$slidev.themeConfigs` | Theme config |

### $frontmatter

Current slide frontmatter:

```md

Layout: {{ $frontmatter.layout }}

```

### $clicks

Current click count on slide.

### $page

Current page number (1-indexed).

### $renderContext

Current render context:

- `'slide'` - Normal slide view

- `'overview'` - Overview mode

- `'presenter'` - Presenter mode

- `'previewNext'` - Next slide preview

## Composables

Import from `@slidev/client`:

```ts

import {

useNav,

useDarkMode,

useIsSlideActive,

useSlideContext,

onSlideEnter,

onSlideLeave,

} from '@slidev/client'

```

### useNav

```ts

const nav = useNav()

nav.next()

nav.go(5)

console.log(nav.currentPage)

```

### useDarkMode

```ts

const { isDark, toggle } = useDarkMode()

```

### useIsSlideActive

```ts

const isActive = useIsSlideActive()

// Returns ref<boolean>

```

### useSlideContext

```ts

const { $page, $clicks, $frontmatter } = useSlideContext()

```

## Lifecycle Hooks

```ts

import { onSlideEnter, onSlideLeave } from '@slidev/client'

onSlideEnter(() => {

// Slide became active

startAnimation()

})

onSlideLeave(() => {

// Slide became inactive

cleanup()

})

```

**Important:** Don't use `onMounted`/`onUnmounted` in slides - component instance persists. Use `onSlideEnter`/`onSlideLeave` instead.

## Conditional Rendering Examples

```html

Presenter notes

</div>

Page {{ $nav.currentPage }}

</footer>

Normal view

</template>

Presenter view

</template>

```

## Type Imports

```ts

import type { TocItem } from '@slidev/types'

```

mdreferences/core-headmatter.md

3.1 kB

---

description: Deck-wide configuration options in the first frontmatter block

---

# Headmatter Configuration

Deck-wide configuration options in the first frontmatter block.

## Theme & Appearance

```yaml

---

theme: default # Theme package or path

colorSchema: auto # 'auto' | 'light' | 'dark'

favicon: /favicon.ico # Favicon URL

aspectRatio: 16/9 # Slide aspect ratio

canvasWidth: 980 # Canvas width in px

---

```

## Fonts

```yaml

---

fonts:

sans: Roboto

serif: Roboto Slab

mono: Fira Code

provider: google # 'google' | 'none'

---

```

## Code & Highlighting

```yaml

---

highlighter: shiki # Code highlighter

lineNumbers: false # Show line numbers

monaco: true # Enable Monaco editor ('true' | 'dev' | 'build')

twoslash: true # Enable TwoSlash

monacoTypesSource: local # 'local' | 'cdn' | 'none'

---

```

## Features

```yaml

---

drawings:

enabled: true # Enable drawing mode

persist: false # Save drawings

presenterOnly: false # Only presenter can draw

syncAll: true # Sync across instances

record: dev # Enable recording

selectable: true # Text selection

contextMenu: true # Right-click menu

wakeLock: true # Prevent screen sleep

---

```

## Export & Build

```yaml

---

download: false # PDF download button

exportFilename: slides # Export filename

export:

format: pdf

timeout: 30000

withClicks: false

withToc: false

---

```

## Info & SEO

```yaml

---

title: My Presentation

titleTemplate: '%s - Slidev'

author: Your Name

keywords: slidev, presentation

info: |

## About

Presentation description

---

```

## SEO Meta Tags

```yaml

---

seoMeta:

ogTitle: Presentation Title

ogDescription: Description

ogImage: https://example.com/og.png

ogUrl: https://example.com

twitterCard: summary_large_image

twitterTitle: Title

twitterDescription: Description

twitterImage: https://example.com/twitter.png

---

```

## Addons & Themes

```yaml

---

theme: seriph

addons:

- excalidraw

- '@slidev/plugin-notes'

---

```

## Theme Configuration

```yaml

---

themeConfig:

primary: '#5d8392'

# Theme-specific options

---

```

## Defaults

Set default frontmatter for all slides:

```yaml

---

defaults:

transition: fade

---

```

## HTML Attributes

```yaml

---

htmlAttrs:

dir: ltr

lang: en

---

```

## Presenter & Browser

```yaml

---

presenter: true # 'true' | 'dev' | 'build'

browserExporter: dev # 'true' | 'dev' | 'build'

routerMode: history # 'history' | 'hash'

---

```

## Remote Assets

```yaml

---

remoteAssets: false # Download remote assets locally

plantUmlServer: https://www.plantuml.com/plantuml

---

```

## Full Template

```yaml

---

theme: default

title: Presentation Title

author: Your Name

highlighter: shiki

lineNumbers: true

transition: slide-left

aspectRatio: 16/9

canvasWidth: 980

fonts:

sans: Roboto

mono: Fira Code

drawings:

enabled: true

persist: true

download: true

---

```

mdreferences/core-hosting.md

2.1 kB

---

description: Build and deploy Slidev presentations

---

# Hosting & Deployment

Build and deploy Slidev presentations.

## Build for Production

```bash

slidev build

```

Output: `dist/` folder (static SPA)

### Options

```bash

slidev build --base /talks/my-talk/ # Custom base path

slidev build --out public # Custom output dir

slidev build --download # Include PDF

slidev build --without-notes # Exclude notes

```

### Multiple Presentations

```bash

slidev build slides1.md slides2.md

```

## GitHub Pages

### GitHub Actions

Create `.github/workflows/deploy.yml`:

```yaml

on:

push:

branches: [main]

permissions:

contents: read

pages: write

id-token: write

jobs:

deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v4

- uses: actions/setup-node@v4

with:

node-version: 'lts/*'

- name: Install

run: npm install

- name: Build

run: npm run build -- --base /${{ github.event.repository.name }}/

- uses: actions/configure-pages@v4

- uses: actions/upload-pages-artifact@v3

with:

path: dist

- uses: actions/deploy-pages@v4

```

## Netlify

Create `netlify.toml`:

```toml

[build]

publish = 'dist'

command = 'npm run build'

[[redirects]]

from = '/*'

to = '/index.html'

status = 200

```

## Vercel

Create `vercel.json`:

```json

{

"rewrites": [

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

]

}

```

## Docker

### Using Official Image

```bash

docker run --name slidev --rm -it \

-v ${PWD}:/slidev \

-p 3030:3030 \

tangramor/slidev:latest

```

### Custom Dockerfile

```dockerfile

FROM tangramor/slidev:latest

COPY slides.md .

COPY public ./public

RUN npm run build

EXPOSE 80

CMD ["npx", "serve", "dist"]

```

## Base Path

For subdirectory deployment:

```bash

# Build

slidev build --base /my-slides/

# Or in headmatter

---

base: /my-slides/

---

```

## Router Mode

For servers without rewrite support:

```yaml

---

routerMode: hash

---

```

URLs become: `/#/1`, `/#/2`, etc.

mdreferences/core-layouts.md

2.7 kB

---

description: Available layouts for slides

---

# Built-in Layouts

Available layouts for slides.

## Basic Layouts

### default

Standard slide layout.

```yaml

---

---

```

### center

Content centered horizontally and vertically.

```yaml

---

---

```

### cover

Title/cover slide with centered content.

```yaml

---

---

```

### end

End slide.

```yaml

---

---

```

### full

Full-screen content, no padding.

```yaml

---

---

```

### none

No layout styling.

```yaml

---

---

```

## Text Layouts

### intro

Introduction slide.

```yaml

---

---

```

### quote

Large quotation display.

```yaml

---

---

```

### section

Section divider.

```yaml

---

---

```

### statement

Statement/affirmation display.

```yaml

---

---

```

### fact

Fact/data display.

```yaml

---

---

```

## Multi-Column Layouts

### two-cols

Two columns side by side:

```md

---

---

# Left Column

Left content

::right::

# Right Column

Right content

```

### two-cols-header

Header with two columns below:

```md

---

---

# Header

::left::

Left content

::right::

Right content

```

## Image Layouts

### image

Full-screen image:

```yaml

---

image: /photo.jpg

backgroundSize: cover

---

```

### image-left

Image on left, content on right:

```yaml

---

image: /photo.jpg

---

# Content on Right

```

### image-right

Image on right, content on left:

```yaml

---

image: /photo.jpg

---

# Content on Left

```

Props: `image`, `class`, `backgroundSize`

## Iframe Layouts

### iframe

Full-screen iframe:

```yaml

---

url: https://example.com

---

```

### iframe-left

Iframe on left, content on right:

```yaml

---

url: https://example.com

---

# Content

```

### iframe-right

Iframe on right, content on left:

```yaml

---

url: https://example.com

---

# Content

```

## Layout Loading Order

1. Slidev default layouts

2. Theme layouts

3. Addon layouts

4. Custom layouts (`./layouts/`)

Later sources override earlier ones.

## Custom Layouts

Create `layouts/my-layout.vue`:

```vue

</div>

</template>

.my-layout {

display: flex;

align-items: center;

justify-content: center;

}

</style>

```

With named slots:

```vue

</div>

</div>

</template>

```

Usage:

```md

---

---

::top::