Slidev Quick Start

This skill helps you get started with Slidev, the presentation framework for developers. You'll learn how to create a new project, understand the basic syntax, and run your first presentation.

When to Use This Skill

• Creating a new Slidev presentation from scratch

• Setting up Slidev for the first time

• Understanding basic Slidev concepts

• Converting an existing presentation to Slidev

• Quickly scaffolding a presentation structure

Prerequisites

• Node.js: Version 18.0 or higher

• Package Manager: npm, pnpm, or yarn

• Text Editor: VS Code recommended (with Slidev extension)

Creating a New Project

Option 1: Using npm init (Recommended)

npm init slidev@latest

This interactive command will:

• Ask for your project name

• Create the project directory

• Install dependencies

• Start the dev server

Option 2: Manual Setup

Create project directory

mkdir my-presentation cd my-presentation

Initialize package.json

npm init -y

Install Slidev

npm install @slidev/cli @slidev/theme-default

Create slides file

touch slides.md

Add scripts to package.json :

{ "scripts": { "dev": "slidev --open", "build": "slidev build", "export": "slidev export" } }

Your First Presentation

Create slides.md with this content:

theme: default title: My First Presentation info: |

My First Slidev Presentation

Created with Slidev class: text-center drawings: persist: false transition: slide-left

Welcome to Slidev

Presentation slides for developers

<div class="pt-12"> <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10"> Press Space for next page <carbon:arrow-right class="inline"/> </span> </div>

What is Slidev?

Slidev is a slides maker and presenter designed for developers

• 📝 Markdown-based - focus on content with Markdown
• 🎨 Themable - themes can be shared and installed
• 🧑‍💻 Developer Friendly - code highlighting, live coding
• 🤹 Interactive - embed Vue components
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export to PDF, PPTX, or host online

layout: center

Thank You!

Documentation · GitHub

Running Your Presentation

Start development server

npm run dev

Or directly with npx

npx slidev

Your presentation will be available at http://localhost:3030

Essential Keyboard Shortcuts

Shortcut Action

Space / →

Next slide/animation

←

Previous slide/animation

↑ / ↓

Navigate slides (skip animations)

o

Overview mode

d

Toggle dark mode

f

Fullscreen

g

Go to slide

Esc

Exit overview/fullscreen

Slide Separator

Use --- (three dashes) surrounded by blank lines to separate slides:

Slide 1

Content for slide 1

Slide 2

Content for slide 2

Slide 3

Content for slide 3

Frontmatter Configuration

The first slide's frontmatter configures the entire presentation:

Presentation metadata

theme: seriph # Theme name title: My Presentation # Browser tab title info: | # Presentation info

About

Description here

Appearance

colorSchema: auto # auto, light, or dark class: text-center # CSS classes for first slide background: /image.jpg # Background image

Features

drawings: persist: false # Save drawings between reloads transition: slide-left # Default transition highlighter: shiki # Code highlighter

Export

exportFilename: slides # Export filename download: true # Show download button

Adding Layouts

Specify layouts per slide using frontmatter:

layout: cover background: https://cover.sli.dev

Cover Slide

layout: two-cols

Left Column

Content here

::right::

Right Column

Content here

layout: center

Centered Content

Adding Code Blocks

Code Example

```typescript interface User { id: number name: string email: string }

function greet(user: User): string { return Hello, ${user.name}! } ```

Adding Speaker Notes

Add HTML comments at the end of a slide for speaker notes:

My Slide

Important content here

<!-- Speaker notes go here.

• Remember to mention X
• Demo the feature Y -->

Best Practices

• Start Simple: Begin with basic Markdown, add features gradually

• One Idea Per Slide: Keep slides focused

• Use Layouts: Leverage built-in layouts for consistent design

• Version Control: Commit slides.md to Git

• Test Export Early: Verify PDF export works before presenting

Common Mistakes to Avoid

❌ Missing blank lines around separators

Slide 1

Slide 2

✓ Correct separator syntax

Slide 1

Slide 2

❌ Invalid frontmatter indentation

theme:seriph # Missing space after colon

✓ Correct frontmatter

theme: seriph

Output Format

When creating a new Slidev presentation, provide:

PROJECT STRUCTURE:

• slides.md (main presentation file)
• package.json (with dev/build/export scripts)
• Optional: public/ directory for assets

FIRST SLIDE FRONTMATTER:

theme: [recommended theme] title: [presentation title]

SUGGESTED SLIDE STRUCTURE:

1. Title/Cover slide
2. Introduction/Agenda
3. Main content slides
4. Summary/Conclusion
5. Thank you/Contact slide

NEXT STEPS:

• Run npm run dev to start
• Edit slides.md to add content
• Use o key for overview