Deft
Ask AI

Search

Search skills, authors and topics

slidevjs / slidev

slidev

Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.

View sourceVueVideoVisual

Install

npx skills add https://github.com/slidevjs/slidev --skill slidev

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

Prerequisites

Slidev is a Node.js project. Before creating or running a deck, check that the machine has:

  • Node.js >= 22.12.0: node -v. If it is missing or older, install the LTS release from https://nodejs.org or use a version manager such as nvm or fnm.
  • pnpm (recommended package manager): pnpm -v. If it is missing, run npm i -g pnpm or corepack enable. npm, yarn, and bun also work; replace pnpm in the commands below.

Do not assume a development setup exists. If either check fails, walk the user through the installation before running any Slidev command.

Quick Start

bash
pnpm create slidev    # Create projectpnpm run dev          # Start dev server (opens http://localhost:3030)pnpm run build        # Build static SPApnpm 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

md
---theme: defaulttitle: 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 [blocked]
Animationsv-click, v-clicks, motion, transitionscore-animations [blocked]
HeadmatterDeck-wide configuration optionscore-headmatter [blocked]
FrontmatterPer-slide configuration optionscore-frontmatter [blocked]
CLI CommandsDev, build, export, theme commandscore-cli [blocked]
ComponentsBuilt-in Vue componentscore-components [blocked]
LayoutsBuilt-in slide layoutscore-layouts [blocked]
ExportingPDF, PPTX, PNG export optionscore-exporting [blocked]
HostingBuild and deploy to various platformscore-hosting [blocked]
Global Context$nav, $slidev, composables APIcore-global-context [blocked]

Feature Reference

Code & Editor

FeatureUsageReference
Line highlighting```ts {2,3}code-line-highlighting [blocked]
Click-based highlighting```ts {1|2-3|all}code-line-highlighting [blocked]
Line numberslineNumbers: true or {lines:true}code-line-numbers [blocked]
Scrollable code{maxHeight:'100px'}code-max-height [blocked]
Code tabs::code-group (requires comark: true)code-groups [blocked]
Monaco editor```ts {monaco}editor-monaco [blocked]
Run code```ts {monaco-run}editor-monaco-run [blocked]
Edit files<<< ./file.ts {monaco-write}editor-monaco-write [blocked]
Code animations````md magic-movecode-magic-move [blocked]
TypeScript types```ts twoslashcode-twoslash [blocked]
Import code<<< @/snippets/file.jscode-import-snippet [blocked]

Diagrams & Math

FeatureUsageReference
Mermaid diagrams```mermaiddiagram-mermaid [blocked]
PlantUML diagrams```plantumldiagram-plantuml [blocked]
LaTeX math$inline$ or $$block$$diagram-latex [blocked]

Layout & Styling

FeatureUsageReference
Canvas sizecanvasWidth, aspectRatiolayout-canvas-size [blocked]
Zoom slidezoom: 0.8layout-zoom [blocked]
Scale elements<Transform :scale="0.5">layout-transform [blocked]
Layout slots::right::, ::default::layout-slots [blocked]
Scoped CSS<style> in slidestyle-scoped [blocked]
Global layersglobal-top.vue, global-bottom.vuelayout-global-layers [blocked]
Draggable elementsv-drag, <v-drag>layout-draggable [blocked]
Icons<mdi-icon-name />style-icons [blocked]

Animation & Interaction

FeatureUsageReference
Click animationsv-click, <v-clicks>core-animations [blocked]
Rough markersv-mark.underline, v-mark.circleanimation-rough-marker [blocked]
Drawing modePress C or config drawings:animation-drawing [blocked]
Direction stylesforward:delay-300style-direction [blocked]
Note highlighting[click] in notesanimation-click-marker [blocked]

Syntax Extensions

FeatureUsageReference
Comark syntaxcomark: true + {style="color:red"}syntax-comark [blocked]
Block frontmatter```yaml instead of ---syntax-block-frontmatter [blocked]
Import slidessrc: ./other.mdsyntax-importing-slides [blocked]
Merge frontmatterMain entry winssyntax-frontmatter-merging [blocked]

Presenter & Recording

FeatureUsageReference
RecordingPress G for camerapresenter-recording [blocked]
Timerduration: 30min, timer: countdownpresenter-timer [blocked]
Remote controlslidev --remotepresenter-remote [blocked]
Ruby textnotesAutoRuby:presenter-notes-ruby [blocked]

Export & Build

FeatureUsageReference
Export optionsslidev exportcore-exporting [blocked]
Build & deployslidev buildcore-hosting [blocked]
Build with PDFdownload: truebuild-pdf [blocked]
Cache imagesAutomatic for remote URLsbuild-remote-assets [blocked]
OG imageseoMeta.ogImage or og-image.pngbuild-og-image [blocked]
SEO tagsseoMeta:build-seo-meta [blocked]

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

FeatureUsageReference
Side editorClick edit iconeditor-side [blocked]
VS Code extensionInstall antfu.slideveditor-vscode [blocked]
Prettierprettier-plugin-slideveditor-prettier [blocked]
Eject themeslidev theme ejecttool-eject-theme [blocked]
MCP server (AI agents)http://localhost:<port>/__mcp or slidev mcptool-mcp [blocked]

Lifecycle & API

FeatureUsageReference
Slide hooksonSlideEnter(), onSlideLeave()api-slide-hooks [blocked]
Navigation API$nav, useNav()core-global-context [blocked]

Common Layouts

LayoutPurpose
coverTitle/cover slide
centerCentered content
defaultStandard slide
two-colsTwo columns (use ::right::)
two-cols-headerHeader + two columns
image / image-left / image-rightImage layouts
iframe / iframe-left / iframe-rightEmbed URLs
quoteQuotation
sectionSection divider
fact / statementData/statement display
intro / endIntro/end slides

Resources