YourAI.tools
JetBrains logo

Skill

slidev

create web-based presentations with Slidev

Published by JetBrains Updated Jul 13
Covers Markdown Presentations Vue Web Development

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.

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

TopicDescriptionReference
Markdown SyntaxSlide separators, frontmatter, notes, code blockscore-syntax
Animationsv-click, v-clicks, motion, transitionscore-animations
HeadmatterDeck-wide configuration optionscore-headmatter
FrontmatterPer-slide configuration optionscore-frontmatter
CLI CommandsDev, build, export, theme commandscore-cli
ComponentsBuilt-in Vue componentscore-components
LayoutsBuilt-in slide layoutscore-layouts
ExportingPDF, PPTX, PNG export optionscore-exporting
HostingBuild and deploy to various platformscore-hosting
Global Context$nav, $slidev, composables APIcore-global-context

Feature Reference

Code & Editor

FeatureUsageReference
Line highlighting```ts {2,3}code-line-highlighting
Click-based highlighting```ts {1|2-3|all}code-line-highlighting
Line numberslineNumbers: 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-movecode-magic-move
TypeScript types```ts twoslashcode-twoslash
Import code<<< @/snippets/file.jscode-import-snippet

Diagrams & Math

FeatureUsageReference
Mermaid diagrams```mermaiddiagram-mermaid
PlantUML diagrams```plantumldiagram-plantuml
LaTeX math$inline$ or $$block$$diagram-latex

Layout & Styling

FeatureUsageReference
Canvas sizecanvasWidth, aspectRatiolayout-canvas-size
Zoom slidezoom: 0.8layout-zoom
Scale elements<Transform :scale="0.5">layout-transform
Layout slots::right::, ::default::layout-slots
Scoped CSS<style> in slidestyle-scoped
Global layersglobal-top.vue, global-bottom.vuelayout-global-layers
Draggable elementsv-drag, <v-drag>layout-draggable
Icons<mdi-icon-name />style-icons

Animation & Interaction

FeatureUsageReference
Click animationsv-click, <v-clicks>core-animations
Rough markersv-mark.underline, v-mark.circleanimation-rough-marker
Drawing modePress C or config drawings:animation-drawing
Direction stylesforward:delay-300style-direction
Note highlighting[click] in notesanimation-click-marker

Syntax Extensions

FeatureUsageReference
Comark syntaxcomark: true + {style="color:red"}syntax-comark
Block frontmatter```yaml instead of ---syntax-block-frontmatter
Import slidessrc: ./other.mdsyntax-importing-slides
Merge frontmatterMain entry winssyntax-frontmatter-merging

Presenter & Recording

FeatureUsageReference
RecordingPress G for camerapresenter-recording
Timerduration: 30min, timer: countdownpresenter-timer
Remote controlslidev --remotepresenter-remote
Ruby textnotesAutoRuby:presenter-notes-ruby

Export & Build

FeatureUsageReference
Export optionsslidev exportcore-exporting
Build & deployslidev buildcore-hosting
Build with PDFdownload: truebuild-pdf
Cache imagesAutomatic for remote URLsbuild-remote-assets
OG imageseoMeta.ogImage or og-image.pngbuild-og-image
SEO tagsseoMeta: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

FeatureUsageReference
Side editorClick edit iconeditor-side
VS Code extensionInstall antfu.slideveditor-vscode
Prettierprettier-plugin-slideveditor-prettier
Eject themeslidev theme ejecttool-eject-theme

Lifecycle & API

FeatureUsageReference
Slide hooksonSlideEnter(), onSlideLeave()api-slide-hooks
Navigation API$nav, useNav()core-global-context

Common Layouts

LayoutPurpose
coverTitle/cover slide
centerCentered content
defaultStandard slide
two-colsTwo columns (use ::right::)
two-cols-headerHeader + two columns
image / image-left / image-rightImage layouts
iframe / iframe-left / iframe-rightEmbed URLs
quoteQuotation
sectionSection divider
fact / statementData/statement display
intro / endIntro/end slides

Resources

AboutPrivacy PolicyTerms and Conditions

© 2026 YourAI.tools. Every skill from an identity-verified publisher.

Independent catalog. Not affiliated with, endorsed by, or sponsored by Anthropic or any listed publisher. All trademarks belong to their respective owners.