slidev-quick-start

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:

1. Ask for your project name
2. Create the project directory
3. Install dependencies
4. 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](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev)