Slidev - Presentation Slides for Developers

Web-based slides maker built on Vite, Vue, and Markdown. Source basis: adapted from

antfu/skills

Slidev skill (

https://github.com/antfu/skills/tree/main/skills/slidev

, MIT License).

When to Use

Technical presentations 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

Quick Start

bash

pnpm create slidev    # Create project
pnpm run dev          # Start dev server
pnpm run export       # Export to PDF

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

Feature Reference

Code & Editor

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

Diagrams & Math

Feature	Usage	Reference
Mermaid diagrams	```mermaid	diagram-mermaid
PlantUML diagrams	```plantuml	diagram-plantuml
LaTeX math	$inline$ or `$$block$$`	diagram-latex

Layout & Styling

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

Animation & Interaction

Feature	Usage	Reference
Click animations	`v-click` , `<v-clicks>`	core-animations
Rough markers	`v-mark.underline` , `v-mark.circle`	animation-rough-marker
Drawing mode	Press `C` or config `drawings:`	animation-drawing
Direction styles	`forward:delay-300`	style-direction
Note highlighting	`[click]` in notes	animation-click-marker

Syntax Extensions

Feature	Usage	Reference
MDC syntax	`mdc: true` + `{style="color:red"}`	syntax-mdc
Block frontmatter	```yaml instead of `---`	syntax-block-frontmatter
Import slides	`src: ./other.md`	syntax-importing-slides
Merge frontmatter	Main entry wins	syntax-frontmatter-merging

Presenter & Recording

Feature	Usage	Reference
Recording	Press `G` for camera	presenter-recording
Timer	`duration: 30min` , `timer: countdown`	presenter-timer
Remote control	`slidev --remote`	presenter-remote
Ruby text	`notesAutoRuby:`	presenter-notes-ruby

Export & Build

Feature	Usage	Reference
Export options	`slidev export`	core-exporting
Build & deploy	`slidev build`	core-hosting
Build with PDF	`download: true`	build-pdf
Cache images	Automatic for remote URLs	build-remote-assets
OG image	`seoMeta.ogImage` or `og-image.png`	build-og-image
SEO tags	`seoMeta:`	build-seo-meta

Editor & Tools

Feature	Usage	Reference
Side editor	Click edit icon	editor-side
VS Code extension	Install `antfu.slidev`	editor-vscode
Prettier	`prettier-plugin-slidev`	editor-prettier
Eject theme	`slidev theme eject`	tool-eject-theme

Lifecycle & API

Feature	Usage	Reference
Slide hooks	`onSlideEnter()` , `onSlideLeave()`	api-slide-hooks
Navigation API	`$nav` , `useNav()`	core-global-context

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

slidev

NPX Install

SKILL.md Content

Slidev - Presentation Slides for Developers

When to Use

Quick Start

Basic Syntax

Core References

Feature Reference

Code & Editor

Diagrams & Math

Layout & Styling

Animation & Interaction

Syntax Extensions

Presenter & Recording

Export & Build

Editor & Tools

Lifecycle & API

Common Layouts

Resources