| 1 | --- |
| 2 | name: slidev |
| 3 | 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. |
| 4 | --- |
| 5 | |
| 6 | # Slidev - Presentation Slides for Developers |
| 7 | |
| 8 | Web-based slides maker built on Vite, Vue, and Markdown. |
| 9 | |
| 10 | ## When to Use |
| 11 | |
| 12 | - Technical presentations or slidedecks with live code examples |
| 13 | - Syntax-highlighted code snippets with animations |
| 14 | - Interactive demos (Monaco editor, runnable code) |
| 15 | - Mathematical equations (LaTeX) or diagrams (Mermaid, PlantUML) |
| 16 | - Record presentations with presenter notes |
| 17 | - Export to PDF, PPTX, or host as SPA |
| 18 | - Code walkthroughs for developer talks or workshops |
| 19 | |
| 20 | ## Quick Start |
| 21 | |
| 22 | ```bash |
| 23 | pnpm create slidev # Create project |
| 24 | pnpm run dev # Start dev server (opens http://localhost:3030) |
| 25 | pnpm run build # Build static SPA |
| 26 | pnpm run export # Export to PDF (requires playwright-chromium) |
| 27 | ``` |
| 28 | |
| 29 | **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. |
| 30 | |
| 31 | ## Basic Syntax |
| 32 | |
| 33 | ```md |
| 34 | --- |
| 35 | theme: default |
| 36 | title: My Presentation |
| 37 | --- |
| 38 | |
| 39 | # First Slide |
| 40 | |
| 41 | Content here |
| 42 | |
| 43 | --- |
| 44 | |
| 45 | # Second Slide |
| 46 | |
| 47 | More content |
| 48 | |
| 49 | <!-- |
| 50 | Presenter notes go here |
| 51 | --> |
| 52 | ``` |
| 53 | |
| 54 | - `---` separates slides |
| 55 | - First frontmatter = headmatter (deck config) |
| 56 | - HTML comments = presenter notes |
| 57 | |
| 58 | ## Core References |
| 59 | |
| 60 | | Topic | Description | Reference | |
| 61 | |-------|-------------|-----------| |
| 62 | | Markdown Syntax | Slide separators, frontmatter, notes, code blocks | [core-syntax](references/core-syntax.md) | |
| 63 | | Animations | v-click, v-clicks, motion, transitions | [core-animations](references/core-animations.md) | |
| 64 | | Headmatter | Deck-wide configuration options | [core-headmatter](references/core-headmatter.md) | |
| 65 | | Frontmatter | Per-slide configuration options | [core-frontmatter](references/core-frontmatter.md) | |
| 66 | | CLI Commands | Dev, build, export, theme commands | [core-cli](references/core-cli.md) | |
| 67 | | Components | Built-in Vue components | [core-components](references/core-components.md) | |
| 68 | | Layouts | Built-in slide layouts | [core-layouts](references/core-layouts.md) | |
| 69 | | Exporting | PDF, PPTX, PNG export options | [core-exporting](references/core-exporting.md) | |
| 70 | | Hosting | Build and deploy to various platforms | [core-hosting](references/core-hosting.md) | |
| 71 | | Global Context | $nav, $slidev, composables API | [core-global-context](references/core-global-context.md) | |
| 72 | |
| 73 | ## Feature Reference |
| 74 | |
| 75 | ### Code & Editor |
| 76 | |
| 77 | | Feature | Usage | Reference | |
| 78 | |---------|-------|-----------| |
| 79 | | Line highlighting | `` ```ts {2,3} `` | [code-line-highlighting](references/code-line-highlighting.md) | |
| 80 | | Click-based highlighting | `` ```ts {1\|2-3\|all} `` | [code-line-highlighting](references/code-line-highlighting.md) | |
| 81 | | Line numbers | `lineNumbers: true` or `{lines:true}` | [code-line-numbers](references/code-line-numbers.md) | |
| 82 | | Scrollable code | `{maxHeight:'100px'}` | [code-max-height](references/code-max-height.md) | |
| 83 | | Code tabs | `::code-group` (requires `comark: true`) | [code-groups](references/code-groups.md) | |
| 84 | | Monaco editor | `` ```ts {monaco} `` | [editor-monaco](references/editor-monaco.md) | |
| 85 | | Run code | `` ```ts {monaco-run} `` | [editor-monaco-run](references/editor-monaco-run.md) | |
| 86 | | Edit files | `<<< ./file.ts {monaco-write}` | [editor-monaco-write](references/editor-monaco-write.md) | |
| 87 | | Code animations | `` ````md magic-move `` | [code-magic-move](references/code-magic-move.md) | |
| 88 | | TypeScript types | `` ```ts twoslash `` | [code-twoslash](references/code-twoslash.md) | |
| 89 | | Import code | `<<< @/snippets/file.js` | [code-import-snippet](references/code-import-snippet.md) | |
| 90 | |
| 91 | ### Diagrams & Math |
| 92 | |
| 93 | | Feature | Usage | Reference | |
| 94 | |---------|-------|-----------| |
| 95 | | Mermaid diagrams | `` ```mermaid `` | [diagram-mermaid](references/diagram-mermaid.md) | |
| 96 | | PlantUML diagrams | `` ```plantuml `` | [diagram-plantuml](references/diagram-plantuml.md) | |
| 97 | | LaTeX math | `$inline$` or `$$block$$` | [diagram-latex](references/diagram-latex.md) | |
| 98 | |
| 99 | ### Layout & Styling |
| 100 | |
| 101 | | Feature | Usage | Reference | |
| 102 | |---------|-------|-----------| |
| 103 | | Canvas size | `canvasWidth`, `aspectRatio` | [layout-canvas-size](references/layout-canvas-size.md) | |
| 104 | | Zoom slide | `zoom: 0.8` | [layout-zoom](references/layout-zoom.md) | |
| 105 | | Scale elements | `<Transform :scale="0.5">` | [layout-transform](references/layout-transform.md) | |
| 106 | | Layout slots | `::right::`, `::default::` | [layout-slots](references/layout-slots.md) | |
| 107 | | Scoped CSS | `<style>` in slide | [style-scoped](references/style-scoped.md) | |
| 108 | | Global layers | `global-top.vue`, `global-bottom.vue` | [layout-global-layers](references/layout-global-layers.md) | |
| 109 | | Draggable elements | `v-drag`, `<v-drag>` | [layout-draggable](references/layout-draggable.md) | |
| 110 | | Icons | `<mdi-icon-name />` | [style-icons](references/style-icons.md) | |
| 111 | |
| 112 | ### Animation & Interaction |
| 113 | |
| 114 | | Feature | Usage | Reference | |
| 115 | |---------|-------|-----------| |
| 116 | | Click animations | `v-click`, `<v-clicks>` | [core-animations](references/core-animations.md) | |
| 117 | | Rough markers | `v-mark.underline`, `v-mark.circle` | [animation-rough-marker](references/animation-rough-marker.md) | |
| 118 | | Drawing mode | Press `C` or config `drawings:` | [animation-drawing](references/animation-drawing.md) | |
| 119 | | Direction styles | `forward:delay-300` | [style-direction](references/style-direction.md) | |
| 120 | | Note highlighting | `[click]` in notes | [animation-click-marker](references/animation-click-marker.md) | |
| 121 | |
| 122 | ### Syntax Extensions |
| 123 | |
| 124 | | Feature | Usage | Reference | |
| 125 | |---------|-------|-----------| |
| 126 | | Comark syntax | `comark: true` + `{style="color:red"}` | [syntax-comark](references/syntax-comark.md) | |
| 127 | | Block frontmatter | `` ```yaml `` instead of `---` | [syntax-block-frontmatter](references/syntax-block-frontmatter.md) | |
| 128 | | Import slides | `src: ./other.md` | [syntax-importing-slides](references/syntax-importing-slides.md) | |
| 129 | | Merge frontmatter | Main entry wins | [syntax-frontmatter-merging](references/syntax-frontmatter-merging.md) | |
| 130 | |
| 131 | ### Presenter & Recording |
| 132 | |
| 133 | | Feature | Usage | Reference | |
| 134 | |---------|-------|-----------| |
| 135 | | Recording | Press `G` for camera | [presenter-recording](references/presenter-recording.md) | |
| 136 | | Timer | `duration: 30min`, `timer: countdown` | [presenter-timer](references/presenter-timer.md) | |
| 137 | | Remote control | `slidev --remote` | [presenter-remote](references/presenter-remote.md) | |
| 138 | | Ruby text | `notesAutoRuby:` | [presenter-notes-ruby](references/presenter-notes-ruby.md) | |
| 139 | |
| 140 | ### Export & Build |
| 141 | |
| 142 | | Feature | Usage | Reference | |
| 143 | |---------|-------|-----------| |
| 144 | | Export options | `slidev export` | [core-exporting](references/core-exporting.md) | |
| 145 | | Build & deploy | `slidev build` | [core-hosting](references/core-hosting.md) | |
| 146 | | Build with PDF | `download: true` | [build-pdf](references/build-pdf.md) | |
| 147 | | Cache images | Automatic for remote URLs | [build-remote-assets](references/build-remote-assets.md) | |
| 148 | | OG image | `seoMeta.ogImage` or `og-image.png` | [build-og-image](references/build-og-image.md) | |
| 149 | | SEO tags | `seoMeta:` | [build-seo-meta](references/build-seo-meta.md) | |
| 150 | |
| 151 | **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. |
| 152 | |
| 153 | ### Editor & Tools |
| 154 | |
| 155 | | Feature | Usage | Reference | |
| 156 | |---------|-------|-----------| |
| 157 | | Side editor | Click edit icon | [editor-side](references/editor-side.md) | |
| 158 | | VS Code extension | Install `antfu.slidev` | [editor-vscode](references/editor-vscode.md) | |
| 159 | | Prettier | `prettier-plugin-slidev` | [editor-prettier](references/editor-prettier.md) | |
| 160 | | Eject theme | `slidev theme eject` | [tool-eject-theme](references/tool-eject-theme.md) | |
| 161 | | MCP server (AI agents) | `http://localhost:<port>/__mcp` or `slidev mcp` | [tool-mcp](references/tool-mcp.md) | |
| 162 | |
| 163 | ### Lifecycle & API |
| 164 | |
| 165 | | Feature | Usage | Reference | |
| 166 | |---------|-------|-----------| |
| 167 | | Slide hooks | `onSlideEnter()`, `onSlideLeave()` | [api-slide-hooks](references/api-slide-hooks.md) | |
| 168 | | Navigation API | `$nav`, `useNav()` | [core-global-context](references/core-global-context.md) | |
| 169 | |
| 170 | ## Common Layouts |
| 171 | |
| 172 | | Layout | Purpose | |
| 173 | |--------|---------| |
| 174 | | `cover` | Title/cover slide | |
| 175 | | `center` | Centered content | |
| 176 | | `default` | Standard slide | |
| 177 | | `two-cols` | Two columns (use `::right::`) | |
| 178 | | `two-cols-header` | Header + two columns | |
| 179 | | `image` / `image-left` / `image-right` | Image layouts | |
| 180 | | `iframe` / `iframe-left` / `iframe-right` | Embed URLs | |
| 181 | | `quote` | Quotation | |
| 182 | | `section` | Section divider | |
| 183 | | `fact` / `statement` | Data/statement display | |
| 184 | | `intro` / `end` | Intro/end slides | |
| 185 | |
| 186 | ## Resources |
| 187 | |
| 188 | - Documentation: https://sli.dev |
| 189 | - Theme Gallery: https://sli.dev/resources/theme-gallery |
| 190 | - Showcases: https://sli.dev/resources/showcases |
| 191 |