slidevjs/slidev

Overview

This skill creates web-based slides for developers using Markdown, Vue components, and Vite. It combines syntax-highlighted code, live editors, animations, and export options to produce interactive technical presentations. Use it to build conference talks, tutorials, and classroom material quickly.

How this skill works

Write slides in Markdown with frontmatter for deck-wide and per-slide configuration. Enhance slides with Vue components, code blocks (Monaco editor, runnable code), diagrams (Mermaid, PlantUML), and LaTeX math. Run a dev server for live preview, record presenter view, and export to PDF, PPTX, or static SPA for hosting.

When to use it

• Preparing technical talks with runnable code examples and live demos
• Teaching programming or running workshops that need interactive slides
• Creating syntax-highlighted slides with animated step-through of code
• Designing slides with diagrams, equations, or embedded iframes
• Exporting finished decks to PDF, PPTX, or deployable SPA

Best practices

• Organize slides with frontmatter and use --- to separate slides for clarity
• Use Monaco editor blocks for editable examples and monaco-run to enable execution
• Leverage code highlighting features (line ranges, click highlighting) to focus attention
• Keep presenter notes in HTML comments and use the presenter view for timing and recording
• Use layouts and scoped CSS for consistent visual structure and responsive canvases

Example use cases

• Conference talk demonstrating a library with live code edits and runnable snippets
• Classroom lecture showing algorithm walkthroughs with step-by-step code highlighting
• Internal engineering demo embedding dashboards or external apps via iframe
• Technical blog post repackaged as an interactive slide deck with export to PDF
• Workshop materials where participants edit and run code directly inside slides