slidev

name slidev description Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use when building technical presentations, conference talks, code walkthroughs, teaching materials, or developer decks. 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 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 --- 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 Import code <<< @/snippets/file.js code-import-snippet 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 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 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 Resources Documentation: https://sli.dev Theme Gallery: https://sli.dev/resources/theme-gallery Showcases: https://sli.dev/resources/showcases