---
title: Slidev Integration
hide_title: true
sidebar_class_name: title-logo-sidebar-docusaurus
sidebar_label: "Slidev Integration"
sidebar_position: 0
---

import LogoDocusaurus from './logo-docusaurus.svg';

<div align="center">
  <div style={{ display: 'flex', justifyContent: 'center', margin: '1rem' }}>
    <LogoDocusaurus width="110" height="110"/>
  </div>
  <div align="center">
    # Slidev Integration
  </div>
  <div align="center">
    <p>
      *Seamlessly integrate Slidev presentations into your Docusaurus site!*
    </p>
    <h4>
      <a href="./slidev-integration/install">🔧 Setup</a> · 
      <a href="https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-slidev">📦 NPM Package</a> · 
      <a href="https://github.com/helse-sorost/sp-days-framework">💻 Source Code</a>
    </h4>
  </div>
</div>

---

## Features

- **Automatic Discovery** - Scans directories for Slidev markdown files and builds them automatically
- **Interactive Overview Page** - Auto-generated gallery with presentation previews, metadata, and sorting
- **Zero-Config Setup** - Works out of the box with sensible defaults
- **Theme Support** - Global or per-presentation theme configuration with automatic validation
- **Development & Production Modes** - Fast development workflow with separate slide preview

## Getting Started

### 1. Create Your Presentation

Create a presentation in the `/slidev/` directory:

```markdown title="slidev/introduction.md"
---
theme: "@sp-days-framework/slidev-theme-sykehuspartner"
title: Introduction to Docker
description: Learn containerization fundamentals
author: Your Name
layout: cover
---

# Introduction to Docker
## Containerization Made Simple

---

# What is Docker?

Docker is a platform for developing, shipping, and running applications in containers.
```
### 2. Live Preview During Development

Run Slidev directly to work on your presentation with hot-reload:

```bash
npm run slidev ./slidev/my-presentation.md
```

This opens your presentation in the browser with live updates as you edit.

### 3. View in Docusaurus

Build your Docusaurus site to see presentations integrated:

```bash
npm run build
npm run serve
```

Open the page and select "Slides" in the navbar to see the overview gallery.

:::note[Development Mode Limitation]

Presentations are **not built** during `npm run start`, [read more about it here.](./install.mdx#development-vs-production-modes)

:::

See [Setup](./install.mdx) for installation and configuration.

## How It Works

1. **Scan Phase** - Plugin scans the `/slidev/` directory for `.md` files during build
2. **Extract Metadata** - Frontmatter is parsed from each file (title, description, theme, author)
3. **Build Phase** - In production, Slidev builds each presentation to `static/slides/`
4. **Generate Overview** - Creates an interactive overview page (default: `/slidev`) with previews
5. **Serve** - Built presentations are accessible via unique URLs