slidev

SKILL.md

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

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

Comark syntax
comark: true + {style="color:red"}
syntax-comark

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

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

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