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#

bash

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#

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#

TopicDescriptionReferenceMarkdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntaxAnimationsv-click, v-clicks, motion, transitionscore-animationsHeadmatterDeck-wide configuration optionscore-headmatterFrontmatterPer-slide configuration optionscore-frontmatterCLI CommandsDev, build, export, theme commandscore-cliComponentsBuilt-in Vue componentscore-componentsLayoutsBuilt-in slide layoutscore-layoutsExportingPDF, PPTX, PNG export optionscore-exportingHostingBuild and deploy to various platformscore-hostingGlobal Context$nav, $slidev, composables APIcore-global-context

Feature Reference#

Code & Editor#

FeatureUsageReferenceLine highlighting ```ts {2,3}code-line-highlightingClick-based highlighting ```ts {1|2-3|all}code-line-highlightingLine numberslineNumbers: true or {lines:true}code-line-numbersScrollable code{maxHeight:'100px'}code-max-heightCode tabs::code-group (requires comark: true)code-groupsMonaco editor ```ts {monaco}editor-monacoRun code ```ts {monaco-run}editor-monaco-runEdit files<<< ./file.ts {monaco-write}editor-monaco-writeCode animations ````md magic-movecode-magic-moveTypeScript types ```ts twoslashcode-twoslashImport code<<< @/snippets/file.jscode-import-snippet

Diagrams & Math#

FeatureUsageReferenceMermaid diagrams ```mermaiddiagram-mermaidPlantUML diagrams ```plantumldiagram-plantumlLaTeX math$inline$ or $$block$$diagram-latex

Layout & Styling#

FeatureUsageReferenceCanvas sizecanvasWidth, aspectRatiolayout-canvas-sizeZoom slidezoom: 0.8layout-zoomScale elements<Transform :scale="0.5">layout-transformLayout slots::right::, ::default::layout-slotsScoped CSS<style> in slidestyle-scopedGlobal layersglobal-top.vue, global-bottom.vuelayout-global-layersDraggable elementsv-drag, <v-drag>layout-draggableIcons<mdi-icon-name />style-icons

Animation & Interaction#

FeatureUsageReferenceClick animationsv-click, <v-clicks>core-animationsRough markersv-mark.underline, v-mark.circleanimation-rough-markerDrawing modePress C or config drawings:animation-drawingDirection stylesforward:delay-300style-directionNote highlighting[click] in notesanimation-click-marker

Syntax Extensions#

FeatureUsageReferenceComark syntaxcomark: true + {style="color:red"}syntax-comarkBlock frontmatter ```yaml instead of ---syntax-block-frontmatterImport slidessrc: ./other.mdsyntax-importing-slidesMerge frontmatterMain entry winssyntax-frontmatter-merging

Presenter & Recording#

FeatureUsageReferenceRecordingPress G for camerapresenter-recordingTimerduration: 30min, timer: countdownpresenter-timerRemote controlslidev --remotepresenter-remoteRuby textnotesAutoRuby:presenter-notes-ruby

Export & Build#

FeatureUsageReferenceExport optionsslidev exportcore-exportingBuild & deployslidev buildcore-hostingBuild with PDFdownload: truebuild-pdfCache imagesAutomatic for remote URLsbuild-remote-assetsOG imageseoMeta.ogImage or og-image.pngbuild-og-imageSEO tagsseoMeta:build-seo-metaExport 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#

FeatureUsageReferenceSide editorClick edit iconeditor-sideVS Code extensionInstall antfu.slideveditor-vscodePrettierprettier-plugin-slideveditor-prettierEject themeslidev theme ejecttool-eject-theme

Lifecycle & API#

FeatureUsageReferenceSlide hooksonSlideEnter(), onSlideLeave()api-slide-hooksNavigation API$nav, useNav()core-global-context

Common Layouts#

LayoutPurposecoverTitle/cover slidecenterCentered contentdefaultStandard slidetwo-colsTwo columns (use ::right::)two-cols-headerHeader + two columnsimage / image-left / image-rightImage layoutsiframe / iframe-left / iframe-rightEmbed URLsquoteQuotationsectionSection dividerfact / statementData/statement displayintro / endIntro/end slides

Resources#

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