---
title: "slidev by slidevjs · skilld"
canonical_url: "https://skilld.dev/gh/slidevjs/slidev"
meta:
  description: "Builds web-based slidedecks with Markdown, Vue components, syntax-highlighted code, animations, and interactive features using Vite. Targets technical presentations, conference… From slidevjs/slidev."
  "og:description": "Builds web-based slidedecks with Markdown, Vue components, syntax-highlighted code, animations, and interactive features using Vite. Targets technical presentations, conference… From slidevjs/slidev."
  "og:title": "slidev by slidevjs"
  "twitter:description": "Builds web-based slidedecks with Markdown, Vue components, syntax-highlighted code, animations, and interactive features using Vite. Targets technical presentations, conference… From slidevjs/slidev."
  "twitter:title": "slidev by slidevjs"
---

`

[All skills](https://skilld.dev/skills)

[![slidevjs avatar](https://skilld.dev/_img/avatar?url=https%3A%2F%2Fgithub.com%2Fslidevjs.png%3Fsize%3D96)](https://skilld.dev/gh/slidevjs)

# **/slidev**

[@04a9eff](https://github.com/slidevjs/slidev/commit/04a9eff5fefe48140051e544ff2ae61528c933a4 "Your agent reads SKILL.md at commit 04a9eff")

by [Slidev](https://skilld.dev/gh/slidevjs)· [slidevjs](https://skilld.dev/gh/slidevjs)/ [slidev](https://skilld.dev/gh/slidevjs/slidev)·49k stars

 2,208

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.

- 55 files
- 67.3 KB
- Updated 3 months ago
- [GitHub](https://github.com/slidevjs/slidev/blob/04a9eff5fefe48140051e544ff2ae61528c933a4/skills/slidev/SKILL.md "View SKILL.md on GitHub")
- [1 warning](#third-party-checks "Third-party checks: 1 warning · 5 checks · Risk SAFE")

## SKILL.md

8.7 KB

**≈71** tokens always: the name and description. **≈2.1k** when used: this file. **≈15k** more on demand in 54 files.

## 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

```
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

```
---
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](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-syntax.md) |
| Animations | v-click, v-clicks, motion, transitions | [core-animations](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-animations.md) |
| Headmatter | Deck-wide configuration options | [core-headmatter](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-headmatter.md) |
| Frontmatter | Per-slide configuration options | [core-frontmatter](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-frontmatter.md) |
| CLI Commands | Dev, build, export, theme commands | [core-cli](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-cli.md) |
| Components | Built-in Vue components | [core-components](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-components.md) |
| Layouts | Built-in slide layouts | [core-layouts](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-layouts.md) |
| Exporting | PDF, PPTX, PNG export options | [core-exporting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-exporting.md) |
| Hosting | Build and deploy to various platforms | [core-hosting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-hosting.md) |
| Global Context | $nav, $slidev, composables API | [core-global-context](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-global-context.md) |

### Feature Reference

#### Code & Editor

| Feature | Usage | Reference |
| --- | --- | --- |
| Line highlighting | ```` ```ts {2,3} ```` | [code-line-highlighting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-line-highlighting.md) |
| Click-based highlighting | ```` ```ts {1\|2-3\|all} ```` | [code-line-highlighting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-line-highlighting.md) |
| Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-line-numbers.md) |
| Scrollable code | `{maxHeight:'100px'}` | [code-max-height](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-max-height.md) |
| Code tabs | `::code-group` (requires `comark: true`) | [code-groups](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-groups.md) |
| Monaco editor | ```` ```ts {monaco} ```` | [editor-monaco](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-monaco.md) |
| Run code | ```` ```ts {monaco-run} ```` | [editor-monaco-run](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-monaco-run.md) |
| Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-monaco-write.md) |
| Code animations | ````` ````md magic-move ````` | [code-magic-move](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-magic-move.md) |
| TypeScript types | ```` ```ts twoslash ```` | [code-twoslash](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-twoslash.md) |
| Import code | `<<< @/snippets/file.js` | [code-import-snippet](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/code-import-snippet.md) |

#### Diagrams & Math

| Feature | Usage | Reference |
| --- | --- | --- |
| Mermaid diagrams | ```` ```mermaid ```` | [diagram-mermaid](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/diagram-mermaid.md) |
| PlantUML diagrams | ```` ```plantuml ```` | [diagram-plantuml](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/diagram-plantuml.md) |
| LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/diagram-latex.md) |

#### Layout & Styling

| Feature | Usage | Reference |
| --- | --- | --- |
| Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-canvas-size.md) |
| Zoom slide | `zoom: 0.8` | [layout-zoom](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-zoom.md) |
| Scale elements | `<Transform :scale="0.5">` | [layout-transform](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-transform.md) |
| Layout slots | `::right::`, `::default::` | [layout-slots](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-slots.md) |
| Scoped CSS | `<style>` in slide | [style-scoped](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/style-scoped.md) |
| Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-global-layers.md) |
| Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/layout-draggable.md) |
| Icons | `<mdi-icon-name />` | [style-icons](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/style-icons.md) |

#### Animation & Interaction

| Feature | Usage | Reference |
| --- | --- | --- |
| Click animations | `v-click`, `<v-clicks>` | [core-animations](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-animations.md) |
| Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/animation-rough-marker.md) |
| Drawing mode | Press `C` or config `drawings:` | [animation-drawing](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/animation-drawing.md) |
| Direction styles | `forward:delay-300` | [style-direction](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/style-direction.md) |
| Note highlighting | `[click]` in notes | [animation-click-marker](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/animation-click-marker.md) |

#### Syntax Extensions

| Feature | Usage | Reference |
| --- | --- | --- |
| Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/syntax-comark.md) |
| Block frontmatter | ```` ```yaml ```` instead of `---` | [syntax-block-frontmatter](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/syntax-block-frontmatter.md) |
| Import slides | `src: ./other.md` | [syntax-importing-slides](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/syntax-importing-slides.md) |
| Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/syntax-frontmatter-merging.md) |

#### Presenter & Recording

| Feature | Usage | Reference |
| --- | --- | --- |
| Recording | Press `G` for camera | [presenter-recording](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/presenter-recording.md) |
| Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/presenter-timer.md) |
| Remote control | `slidev --remote` | [presenter-remote](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/presenter-remote.md) |
| Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/presenter-notes-ruby.md) |

#### Export & Build

| Feature | Usage | Reference |
| --- | --- | --- |
| Export options | `slidev export` | [core-exporting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-exporting.md) |
| Build & deploy | `slidev build` | [core-hosting](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/core-hosting.md) |
| Build with PDF | `download: true` | [build-pdf](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/build-pdf.md) |
| Cache images | Automatic for remote URLs | [build-remote-assets](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/build-remote-assets.md) |
| OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/build-og-image.md) |
| SEO tags | `seoMeta:` | [build-seo-meta](https://skilld.dev/gh/slidevjs/slidev/slidev/-/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](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-side.md) |
| VS Code extension | Install `antfu.slidev` | [editor-vscode](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-vscode.md) |
| Prettier | `prettier-plugin-slidev` | [editor-prettier](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/editor-prettier.md) |
| Eject theme | `slidev theme eject` | [tool-eject-theme](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/tool-eject-theme.md) |
| MCP server (AI agents) | `http://localhost:<port>/__mcp` or `slidev mcp` | [tool-mcp](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/tool-mcp.md) |

#### Lifecycle & API

| Feature | Usage | Reference |
| --- | --- | --- |
| Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](https://skilld.dev/gh/slidevjs/slidev/slidev/-/references/api-slide-hooks.md) |
| Navigation API | `$nav`, `useNav()` | [core-global-context](https://skilld.dev/gh/slidevjs/slidev/slidev/-/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

Source: [SKILL.md on GitHub](https://github.com/slidevjs/slidev/blob/04a9eff5fefe48140051e544ff2ae61528c933a4/skills/slidev/SKILL.md)

## Third-party checks

<details>

<summary>1 warning15d5 checks · Risk SAFE</summary>



- Gen Agent Trust Hub15d

  The skill provides comprehensive documentation and tools for managing Slidev presentations, including features for live code execution and remote sharing. It introduces a minor risk of indirect prompt injection as it allows an agent to read and modify markdown files that could contain malicious instructions.
- Socket15d

  No alerts
- Snyk15d

  Risk: LOW · No issues
- Runlayer6mo

  2/54 files flagged
- ZeroLeaks5mo

  Score: 93/100 · 2 sections analyzed

</details>

## Provenance

[Signed by skilld at 04a9eff.](https://github.com/slidevjs/slidev/commit/04a9eff5fefe48140051e544ff2ae61528c933a4 "04a9eff5fefe48140051e544ff2ae61528c933a4") This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 weeks ago.

Activeupdated 3 months ago

## Topics

- [Vue](https://skilld.dev/frameworks/vue "Vue components, composables, reactivity")
- slidev
- presentations
- markdown
- vite
- code-highlighting
- animations
- diagrams
- pdf-export
- developer-talks

## README badge

![README badge for slidevjs/slidev](https://skilld.dev/b/slidevjs/slidev?theme=light&label=0)

## What it does

Builds web-based slidedecks with Markdown, Vue components, syntax-highlighted code, animations, and interactive features using Vite. Targets technical presentations, conference talks, code walkthroughs, and developer education—supports live Monaco editor demos, Mermaid diagrams, LaTeX math, PDF/PPTX export, and presenter recording.

Generated from the current SKILL.md.

## Frequently asked

<details>

<summary>Does Slidev support TypeScript and Vue components in slides?</summary>



Yes. Slidev is built on Vue and supports Vue components directly in Markdown slides. TypeScript is supported in code blocks with the \`twoslash\` syntax for type hints.

</details>

<details>

<summary>Can I export slides to PDF or PowerPoint?</summary>



Yes. Use \`pnpm run export\` for PDF, or \`slidev export\` with format flags for PPTX and PNG. Requires \`playwright-chromium\` as a dev dependency.

</details>

<details>

<summary>What code editing features does Slidev provide?</summary>



Slidev includes line highlighting (static or click-driven), line numbers, Monaco editor for live editing, runnable code blocks, syntax highlighting with Twoslash types, and magic-move for code transitions.

</details>

<details>

<summary>Can I include diagrams and mathematical equations?</summary>



Yes. Slidev supports Mermaid and PlantUML for diagrams, and LaTeX syntax for inline and block math equations.

</details>

<details>

<summary>Does Slidev support presenter mode and recording?</summary>



Yes. Press \`G\` to enable camera recording, view presenter notes in a separate window, set slide timers with \`duration\`, and use remote control mode with \`slidev --remote\`.

</details>

Generated from the current SKILL.md. These answers refresh after source changes.

## Related skills

-
-
-
-
-
-