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
Diagrams & Math
Layout & Styling
Animation & Interaction
Syntax Extensions
Presenter & Recording
Export & Build
Editor & Tools
Lifecycle & API
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
Template Components
Custom components provided by this presentation template (in components/ and react-components/). Detailed docs with advanced examples are in docs/components/.
React Components
React components are supported via slidev-addon-react (already configured in headmatter).
To add a React component:
- Create
.jsx/.tsx in react-components/
- Register in
react-components/index.ts: export default { MyComponent }
- Use in slides:
<React is="MyComponent" :someProp="value" />
Props: primitives passed directly (title="Hello"), objects/arrays use Vue binding (:config="{ theme: 'dark' }").
Figure
Image or video with caption, credits, and optional progress bar. See docs/components/figure.md for advanced usage.
| Prop |
Type |
Default |
Description |
src |
String |
(required) |
Image/video source URL |
caption |
String |
'' |
Caption text below media |
captionType |
String |
text |
text (plain) or template (slot-based rich caption) |
credits |
String |
'' |
Inline credits text appended to caption |
creditsCiteKey |
String |
'' |
BibTeX cite key for inline citation credit |
type |
String |
image |
image or video |
autostart |
Boolean |
false |
Auto-play video (with pauseStart delay) |
repeat |
Boolean |
false |
Loop video (pauses on first/last frames) |
progress |
Boolean |
false |
Show video progress bar |
pauseStart |
Number |
1500 |
Ms to pause on first frame before playing |
pauseEnd |
Number |
2000 |
Ms to pause on last frame before looping |
color |
String |
light |
Caption color scheme |
class |
String |
'' |
Tailwind classes |
<Figure src="/images/result.png" caption="Figure 1: Results" class="w-4/5" color="emerald-light" />
<Figure src="/images/diagram.png" caption="Architecture" creditsCiteKey="smith2023" class="w-2/3" />
<Figure type="video" src="/videos/demo.mp4" caption="Video 1" class="w-2/3" progress autostart repeat />
<Figure src="/images/chart.png" captionType="template">
<template #caption>
<p>Results from <strong>Experiment 1</strong>. See <Cite citeKey="jones2024" /> for details.</p>
</template>
</Figure>
PlotlyFigure
Interactive Plotly chart from JSON ({ "data": [...], "layout": {...} }). See docs/components/plotlyfigure.md for advanced usage.
| Prop |
Type |
Default |
Description |
src |
String |
(required) |
URL to Plotly JSON file |
caption |
String |
'' |
Caption text |
height |
String |
null |
Plot height |
fontSize |
Number |
12 |
Font size for labels |
color |
String |
light |
Caption color scheme |
class |
String |
'' |
Tailwind classes |
<PlotlyFigure src="/figure.json" caption="Interactive chart" class="w-2/3" height="400px" />
Cite / BiblioList
In-text citations with hover tooltips and formatted bibliography. See docs/components/cite.md and docs/components/bibliolist.md for advanced usage.
Requires biblio config in headmatter:
biblio:
numericalRefs: false # true for [1], false for [Author, Year]
defaultBibFile: "/reference.bib"
Recent studies <Cite citeKey="smith2023" /> show improvement.
<Cite citeKey="smith2023">Smith et al. (2023)</Cite> found...
# References
<BiblioList />
BiblioList props: showAll (Boolean), itemsPerPage (Number), title (String).
ExportLinks
Auto-detected PDF/PPTX download overlay. See docs/components/exportlinks.md for CI integration details. No props: <ExportLinks />
By