--- name: slidev description: Comprehensive guide for Slidev - a web-based presentation framework for developers. Covers Markdown syntax, layouts, components, animations, theming, and exporting. Use this skill when creating or working with developer presentations using Slidev. --- # Slidev ## Overview Slidev is a presentation platform for developers that enables creating slides using Markdown while leveraging Vue and web technologies for interactive, pixel-perfect designs. This skill provides complete guidance for creating, customizing, and exporting Slidev presentations. Use this skill when: - Creating new developer presentations - Working with Markdown-based slides - Adding interactive components and animations - Customizing slide layouts and themes - Integrating code blocks with syntax highlighting - Exporting presentations to PDF, PPTX, or PNG - Setting up Slidev projects ## Quick Start ### Installation and Setup Create a new Slidev presentation: ```bash # Using pnpm (recommended) pnpm create slidev # Using npm npm init slidev # Using yarn yarn create slidev # Using bun bun create slidev ``` Or try online at https://sli.dev/new (StackBlitz) ### Essential Commands Start development server: ```bash slidev # or specify entry file slidev slides.md ``` Build for production: ```bash slidev build ``` Export to PDF: ```bash slidev export ``` Export to other formats: ```bash slidev export --format pptx slidev export --format png slidev export --format md ``` Format slides: ```bash slidev format ``` --- ## Markdown Syntax ### Slide Separators Separate slides with `---` padded by blank lines: ```md # Slide 1 Content here --- # Slide 2 More content ``` ### Frontmatter and Headmatter Configure entire deck with headmatter (first YAML block): ```md --- theme: default background: https://cover.sli.dev title: My Presentation info: | ## Slidev Starter Presentation slides for developers class: text-center highlighter: shiki --- ``` Configure individual slides with frontmatter: ```md --- layout: center background: ./images/bg.jpg class: text-white --- # Centered Slide Content here ``` ### Code Blocks Code with syntax highlighting: ````md ```ts console.log('Hello, World!') ``` ```` With line numbers: ````md ```ts {lines:true} function greet(name: string) { console.log(`Hello, ${name}!`) } ``` ```` With line highlighting: ````md ```ts {2,4-6} function calculate() { const x = 10 // highlighted const y = 20 const sum = x + y // highlighted const product = x * y // highlighted const difference = x - y // highlighted return sum } ``` ```` ### Presenter Notes Add notes at the end of slides using comment blocks: ```md # Slide Title Content visible to audience ``` --- ## Layouts ### Using Layouts Specify layout in frontmatter: ```md --- layout: cover --- # Presentation Title ``` ### Built-in Layouts **Basic Layouts:** - `default` - Standard layout for any content - `center` - Centers content on screen - `cover` - Opening slide for presentations - `end` - Closing slide - `none` - Unstyled layout **Content Layouts:** - `intro` - Introduction with title and author details - `section` - Marks new presentation sections - `quote` - Displays quotations with emphasis - `fact` - Highlights data or facts prominently - `statement` - Features affirmations as main content - `full` - Utilizes entire screen space **Image Layouts:** - `image` - Full-screen image display - `image-left` - Image on left, content on right - `image-right` - Image on right, content on left **Iframe Layouts:** - `iframe` - Full-screen web page embedding - `iframe-left` - Web page on left side - `iframe-right` - Web page on right side **Multi-Column Layouts:** - `two-cols` - Two-column content separation - `two-cols-header` - Header spanning both columns with left/right split ### Two-Column Layout Example ```md --- layout: two-cols --- # Left Column Content for left side ::right:: # Right Column Content for right side ``` ### Two-Column with Header ```md --- layout: two-cols-header --- # Header Across Both Columns ::left:: Left column content ::right:: Right column content ``` --- ## Components ### Built-in Components **Navigation:** - `` - Navigate between slides - `` - Directional lines with customization - `` - Draggable arrows **Text:** - `` - Auto-sizing text to fit container - `` - Display parsed slide titles - `` - Table of contents generation **Media:** - `` - Embed YouTube videos - `` - Embed Twitter posts - `` - HTML5 video with autoplay **Utilities:** - `` - Current slide number - `` - Total slide count - `` - Scaling and transformation - `` - Theme-based content rendering - `` - Conditional rendering by context - `` - Cycle between content on click - `` - Draggable functionality ### Component Usage Examples ```md This text will auto-size ``` ### Custom Components Create custom Vue components in `./components/` directory. They are auto-imported without manual registration. Example structure: ``` ./components/ MyComponent.vue Counter.vue slides.md ``` Use in slides: ```md ``` --- ## Animations ### Click Animations **v-click Directive:** ```md
Appears on click
Appears on next click
``` **v-after Directive:** ```md
First
Appears with previous
``` **v-clicks for Lists:** ```md - First item - Second item - Third item ``` ### Animation Positioning **Absolute positioning:** ```md
Shows at step 1
Shows at step 2
Shows at step 3
``` **Relative positioning:** ```md
First
Skip one step
Same time as previous
``` ### Motion Animations Use `@vueuse/motion` for directional animations: ```md
Slides in from left
``` ### Slide Transitions Configure in frontmatter: ```md --- transition: slide-left --- ``` Available transitions: - `fade` - `slide-left` - `slide-right` - `slide-up` - `slide-down` - `view-transition` --- ## Styling ### UnoCSS Integration Slidev uses UnoCSS with Tailwind-compatible utilities: ```md
Column 1
Column 2
``` ### Custom Styles Create `./styles/index.css`: ```css .my-custom-class { @apply text-2xl font-bold text-blue-500; } ``` ### Slide-Scoped Styles Add styles to specific slides: ```md # Slide Title Content here ``` ### Dark Mode Support UnoCSS dark mode utilities: ```md
Adapts to theme
``` --- ## Exporting ### Browser Export (Recommended) 1. Start dev server: `slidev` 2. Click "Export" button in navigation bar 3. Or visit `http://localhost:3030/export` 4. Choose format and download ### CLI Export Install Playwright first: ```bash pnpm add -D playwright-chromium ``` Export to PDF: ```bash slidev export # or specify output slidev export --output my-presentation.pdf ``` Export to PPTX: ```bash slidev export --format pptx ``` Export to PNG: ```bash slidev export --format png ``` Export with animations: ```bash slidev export --with-clicks ``` Export specific slides: ```bash slidev export --range 1,6-8,10 ``` Export in dark mode: ```bash slidev export --dark ``` ### Export Options - `--output` - Custom filename - `--format` - Export format (pdf, pptx, png, md) - `--with-clicks` - Include animation steps - `--range` - Specific slides (e.g., 1,6-8,10) - `--dark` - Use dark theme - `--timeout` - Increase timeout for large presentations - `--wait` - Add delay before export - `--with-toc` - Generate PDF outline --- ## Configuration ### Directory Structure ``` ./ ├─ components/ # Custom Vue components ├─ layouts/ # Custom layouts ├─ public/ # Static assets ├─ setup/ # Custom setup code ├─ snippets/ # Code snippets ├─ styles/ # Custom styles ├─ slides.md # Main presentation file ├─ vite.config.ts # Vite configuration └─ uno.config.ts # UnoCSS configuration ``` ### UnoCSS Configuration Create `uno.config.ts`: ```ts import { defineConfig } from 'unocss' export default defineConfig({ shortcuts: { 'bg-main': 'bg-white text-[#181818] dark:(bg-[#121212] text-[#ddd])' } }) ``` ### Vite Configuration Extend Vite config in `vite.config.ts`: ```ts import { defineConfig } from 'vite' export default defineConfig({ // Your custom Vite config }) ``` --- ## Features ### Code Features **Line Numbers:** ````md ```ts {lines:true} function example() { return true } ``` ```` **Line Highlighting:** ````md ```ts {2-4} function calculate() { const x = 10 // highlighted const y = 20 // highlighted const sum = x + y // highlighted return sum } ``` ```` **Monaco Editor:** ````md ```ts {monaco} // Editable code block console.log('Edit me!') ``` ```` **Monaco with Auto-Run:** ````md ```ts {monaco-run} console.log('Runs automatically') ``` ```` ### Diagrams **Mermaid:** ````md ```mermaid graph TD A[Start] --> B[Process] B --> C[End] ``` ```` **PlantUML:** ````md ```plantuml @startuml Alice -> Bob: Hello Bob -> Alice: Hi @enduml ``` ```` ### LaTeX Inline math: ```md Pythagorean theorem: $a^2 + b^2 = c^2$ ``` Block math: ```md $$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$ ``` ### Icons Use Iconify icons directly: ```md GitHub Love ``` ### Drawing Enable drawing on slides with presenter mode. Drawings are synchronized across devices. ### Recording Record presentations with audio using the built-in recording feature. --- ## Advanced Features ### Importing Slides Import slides from other files: ```md --- src: ./slides/intro.md --- --- src: ./slides/content.md --- ``` ### Global Layers Create `global-top.vue` or `global-bottom.vue` for persistent UI elements: ```vue ``` ### Custom Shortcuts Configure in frontmatter: ```md --- shortcuts: next: space prev: shift+space toggleOverview: o --- ``` ### Remote Access Enable remote control for presentations: ```bash slidev --remote ``` Access from another device using the displayed URL. --- ## Theming ### Using Themes Install theme package: ```bash pnpm add slidev-theme-seriph ``` Configure in headmatter: ```md --- theme: seriph --- ``` ### Available Official Themes - `default` - Built-in default theme - `seriph` - Elegant serif theme - `apple-basic` - Apple-style theme - `bricks` - Brick-pattern theme - `shibainu` - Cute Shiba Inu theme Browse more at https://sli.dev/themes/gallery ### Creating Custom Themes Generate theme package: ```bash pnpm create slidev-theme ``` For detailed theme development, see `references/theming.md`. --- ## Best Practices ### Organization - Use one slide per concept - Keep slides focused and minimal - Use layouts consistently - Group related slides in sections ### Performance - Optimize images before importing - Lazy load heavy components - Use built-in components when possible - Test export early for large presentations ### Collaboration - Version control `slides.md` and assets - Document custom components - Share themes via npm packages - Use consistent formatting ### Presenting - Test presenter mode before presenting - Prepare speaker notes - Test all interactive features - Have PDF backup ready --- ## Troubleshooting ### Build Issues If build fails, try: ```bash # Clear cache rm -rf node_modules/.vite # Rebuild slidev build ``` ### Export Issues **Missing content:** Add wait time ```bash slidev export --wait 2000 ``` **Broken emojis:** Install system fonts or use icon libraries **Large file size:** Export specific slides or reduce image quality ### Port Conflicts Specify custom port: ```bash slidev --port 3333 ``` ### Theme Not Loading Ensure theme is installed: ```bash pnpm add slidev-theme-NAME ``` And configured correctly in headmatter: ```md --- theme: NAME --- ``` --- ## Resources For comprehensive documentation on specific topics, see: - `references/syntax-guide.md` - Complete Markdown syntax reference - `references/components-api.md` - Detailed component API documentation - `references/theming.md` - Theme creation and customization - `references/features.md` - Advanced features and integrations ### Official Links - Website: https://sli.dev - Documentation: https://sli.dev/guide - GitHub: https://github.com/slidevjs/slidev - Themes Gallery: https://sli.dev/themes/gallery - Discord Community: https://chat.sli.dev --- ## Common Workflows ### Creating Basic Presentation ```bash # Initialize pnpm create slidev # Edit slides.md # Add content with Markdown # Start dev server slidev # Export when done slidev export ``` ### Using Custom Components ```bash # Create component mkdir components cat > components/Counter.vue << 'EOF' EOF # Use in slides.md # ``` ### Theming Workflow ```bash # Install theme pnpm add slidev-theme-seriph # Configure in slides.md headmatter # --- # theme: seriph # --- # Preview slidev ``` ### Multi-File Presentation Create slide files: ```bash mkdir slides echo "# Introduction" > slides/intro.md echo "# Content" > slides/content.md ``` Import in `slides.md`: ```md --- src: ./slides/intro.md --- --- src: ./slides/content.md --- ``` --- ## Technology Stack Slidev is built on: - **Vite** - Fast build tool - **Vue 3** - Component framework - **UnoCSS** - Atomic CSS engine - **Shiki** - Syntax highlighter - **Monaco Editor** - Code editor - **Mermaid** - Diagram generation - **KaTeX** - Math rendering - **VueUse** - Vue composition utilities - **Iconify** - Icon library This enables fast development, rich interactivity, and extensive customization options.