slidev

name	slidev
description	Create and present web-based slides for developers using Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, or teaching materials.

Slidev - Presentation Slides for Developers

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

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

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

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

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

Custom Interactive Diagram Components

This project includes hand-drawn SVG diagram components in packages/slidev-addon-utils/components/ that use roughjs for a sketch aesthetic and integrate with Slidev's click system for progressive reveal.

Available Components

Component	Purpose	File
Timeline	Horizontal timeline with milestones, dots, connectors, and detail text	components/Timeline.vue
FlowDiagram	Flow chart with nodes and edges	components/FlowDiagram.vue
PyramidOutline	Layered pyramid diagram	components/PyramidOutline.vue
SplitDiagram	Side-by-side comparison diagram	components/SplitDiagram.vue

Click Integration Pattern

All diagram components use useSlideContext() to access $clicks and reveal items progressively. Each item has an optional click property — if set, the item is hidden until $clicks >= click.

Important: When using click-based reveals, set the slide's clicks frontmatter to max click value + 1. Slidev treats the final click as navigation to the next slide, so you need one extra click to keep the last item visible.

---
clicks: 5          # Items use click: 1–4, so set clicks to 5
layout: center
---

<Timeline
  :items="[
    { id: 'a', title: 'First', click: 1 },
    { id: 'b', title: 'Second', click: 2 },
    { id: 'c', title: 'Third', click: 3 },
    { id: 'd', title: 'Fourth', click: 4 },
  ]"
/>

Timeline Component Props

Prop	Type	Default	Description
items	TimelineItem[]	required	Array of milestone items
roughness	number	1.5	Roughjs sketch roughness
seed	number	42	Roughjs random seed for consistent rendering
dotRadius	number	8	Radius of milestone dots
gap	number	200	Horizontal spacing between milestones

TimelineItem Shape

interface TimelineItem {
  id: string
  title: string
  year?: string
  description?: string
  details?: string[]
  click?: number              // reveal at this click (omit = always visible)
  variant?: 'default' | 'accent' | 'muted' | 'success'
}

Tips

• Use layout: center with class: flex items-center justify-center h-full for full-slide diagrams with no other text
• Start click values at 1 (not 0) so the slide initially shows only the base diagram (e.g. the timeline arrow)
• The variant prop controls color theming per item (pink accent, green success, dimmed muted)

Resources

• Documentation: https://sli.dev
• Theme Gallery: https://sli.dev/resources/theme-gallery
• Showcases: https://sli.dev/resources/showcases