slidev
Verifiedby slidevjs · Updated Apr 16, 2026
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.
See It In Action
Let me explore what's already in the project and understand the current state.
Got it. The existing deck has 4 slides covering only Orchestrator + Sandbox. The scope update adds Streaming Pipeline, Fault Tolerance, and an end-to-end Mermaid diagram. Let me build the full deck now.
Let me check a couple of Slidev references for the features I'll use, then build the full deck.
I have everything I need. Let me build the complete deck now.
Build succeeded. Now let me export the PDF backup.
Done. Here's what you've got:
15 slides covering the full expanded scope:
| # | Slide | Status |
|---|---|---|
| 1 | Title / cover | kept |
| 2 | Agenda (animated) | updated |
| 3 | Section: System Overview | new |
| 4 | What the runtime does | new |
| 5 | End-to-end Mermaid data flow | new (requested) |
| 6 | Section: Orchestrator | kept |
| 7 | Orchestrator deep-dive (two-col with types) | enhanced |
| 8 | Sandbox runtime (grid layout) | enhanced |
| 9 | Section: Streaming Pipeline | new |
| 10 | Streaming architecture + ring buffer diagram | new (requested) |
| 11 | SSE event protocol table + types | new (requested) |
| 12 | Section: Fault Tolerance | new |
| 13 | Circuit breaker state machine (Mermaid) | new (requested) |
| 14 | Checkpoint/resume + DLQ (two-col with diagram) | new (requested) |
| 15 | Streaming + Checkpoints interaction (sequence diagram) | new (requested) |
| 16 | Infrastructure overview | new |
| 17 | Q&A | kept |
Presenter notes are included on every slide for your reference during the talk.
Files ready:
slides.md— full deck, runnpm run devto presentslides.pdf(190 KB) — PDF backup for Zoom fallbackdist/— static build
To present: npm run dev → opens at http://localhost:3030. Press P for presenter mode with notes.
External Tools
| Tool | Type |
|---|---|
| node | binary |
| pnpm | binary |
Permissions
| Scope | Description |
|---|---|
| filesystem:read | |
| filesystem:write | |
| process:spawn |
SKILL.md
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
FAQ
What does slidev do?
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.
When should I use slidev?
Use it when you need a repeatable workflow that produces text report, downloadable file, source code.
What does slidev output?
In the evaluated run it produced text report, downloadable file, source code.
How do I install or invoke slidev?
Ask the agent to use this skill when the task matches its documented workflow.
Which agents does slidev support?
Agent support is inferred from the source, but not explicitly declared.
What tools, channels, or permissions does slidev need?
It uses node, pnpm; channels commonly include text, file, code, image; permissions include filesystem:read, filesystem:write, process:spawn.
Is slidev safe to install?
Static analysis marked this skill as medium risk; review side effects and permissions before enabling it.
How is slidev different from an MCP or plugin?
A skill packages instructions and workflow conventions; tools, MCP servers, and plugins are dependencies the skill may call during execution.
Does slidev outperform not using a skill?
About slidev
When to use slidev
You need to create a technical slide deck with code samples, diagrams, or interactive content. You want to preview and iterate on slides locally with a dev server. You need to build or export a Slidev deck for sharing as a web app or presentation file.
When slidev is not the right choice
You need a generic office presentation workflow outside the Slidev ecosystem. You cannot use a Node.js and pnpm-based toolchain in the environment.
What it produces
Produces text report, downloadable file and source code.