slidev

Original：🇺🇸 English
Not Translated

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.

7installs
Sourceslidevjs/slidev
Added on

NPX Install

npx skill4agent add slidevjs/slidev slidev

SKILL.md Content

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

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

Basic Syntax

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

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax
Animationsv-click, v-clicks, motion, transitionscore-animations
HeadmatterDeck-wide configuration optionscore-headmatter
FrontmatterPer-slide configuration optionscore-frontmatter
CLI CommandsDev, build, export, theme commandscore-cli
ComponentsBuilt-in Vue componentscore-components
LayoutsBuilt-in slide layoutscore-layouts
ExportingPDF, PPTX, PNG export optionscore-exporting
HostingBuild and deploy to various platformscore-hosting
Global Context$nav, $slidev, composables APIcore-global-context

Feature Reference

Code & Editor

FeatureUsageReference
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

FeatureUsageReference
Mermaid diagrams
```mermaid
diagram-mermaid
PlantUML diagrams
```plantuml
diagram-plantuml
LaTeX math
$inline$
or 
$$block$$
diagram-latex

Layout & Styling

FeatureUsageReference
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

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

Syntax Extensions

FeatureUsageReference
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 frontmatterMain entry winssyntax-frontmatter-merging

Presenter & Recording

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

FeatureUsageReference
Export options
slidev export
core-exporting
Build & deploy
slidev build
core-hosting
Build with PDF
download: true
build-pdf
Cache imagesAutomatic for remote URLsbuild-remote-assets
OG image
seoMeta.ogImage
or 
og-image.png
build-og-image
SEO tags
seoMeta:
build-seo-meta

Editor & Tools

FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall 
antfu.slidev
editor-vscode
Prettier
prettier-plugin-slidev
editor-prettier
Eject theme
slidev theme eject
tool-eject-theme

Lifecycle & API

FeatureUsageReference
Slide hooks
onSlideEnter()
, 
onSlideLeave()
api-slide-hooks
Navigation API
$nav
, 
useNav()
core-global-context

Common Layouts

LayoutPurpose
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