---
sidebar_position: 1.1
sidebar_custom_props:
  section: "Setup"
  section_position: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

# Installation

:::tip[Already Included]
If you're using `@sp-days-framework/create-sp-days`, the Slidev Docusaurus Plugin is already installed and configured. You can start creating presentations right away!
:::

Install the Docusaurus plugin using your preferred package manager:

<Tabs>
  <TabItem value="npm" label="npm" default>
    ```bash
    npm install @sp-days-framework/docusaurus-plugin-slidev
    ```
  </TabItem>
  <TabItem value="yarn" label="Yarn">
    ```bash
    yarn add @sp-days-framework/docusaurus-plugin-slidev
    ```
  </TabItem>
</Tabs>

Install Slidev dependencies:

<Tabs>
  <TabItem value="sp-theme" label="Sykehuspartner Theme" default>
    ```bash
    npm install @sp-days-framework/slidev-theme-sykehuspartner
    ```

    Includes everything needed for Sykehuspartner branded presentations.
  </TabItem>
  <TabItem value="default" label="Default Theme">
    ```bash
    npm install @slidev/theme-default
    ```
  </TabItem>
</Tabs>

Add the plugin to your `docusaurus.config.js`:

```js title="docusaurus.config.js"
module.exports = {
  plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
};
```

**Optional:** Add the `slidev` script for live preview during development:

```json title="package.json" {4}
{
  "scripts": {
    "docusaurus": "docusaurus",
    "slidev": "slidev"
  }
}
```

## Configuration

### Basic Plugin Setup

The plugin works with default settings:

```js title="docusaurus.config.js"
module.exports = {
  plugins: ["@sp-days-framework/docusaurus-plugin-slidev"],
};
```

### Adding to Navbar

To add the Slidev overview page to your navbar, update your `docusaurus.config.js`:

```js title="docusaurus.config.js"
module.exports = {
  themeConfig: {
    navbar: {
      items: [
        // ... other items
        { to: "/slidev", label: "Slides", position: "left" },
      ],
    },
  },
};
```

### Plugin Options

Customize the plugin behavior:

```js title="docusaurus.config.js"
module.exports = {
  plugins: [
    [
      "@sp-days-framework/docusaurus-plugin-slidev",
      {
        path: "./slidev",
        theme: "@sp-days-framework/slidev-theme-sykehuspartner",
        routeBasePath: "/slidev",
      },
    ],
  ],
};
```

Common options:

| Option              | Type      | Default                               | Description                                                         |
| ------------------- | --------- | ------------------------------------- | ------------------------------------------------------------------- |
| `path`              | `string`  | `'./slidev'`                          | Directory for Slidev files (also determines URL path)               |
| `theme`             | `string`  | `undefined`                           | Global theme override for all presentations                         |
| `routeBasePath`     | `string`  | `'/slidev'`                           | URL path for the auto-generated overview page                       |
| `pageTitle`         | `string`  | `'Slidev Presentations'`              | Title for the overview page                                         |
| `maxParallelBuilds` | `number`  | `4`                                   | Maximum parallel Slidev builds (capped at CPU count)                |

See [Advanced Configuration](./advanced-configuration.mdx) for all options.

### Frontmatter Configuration

Configure individual presentations:

```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
```

Common frontmatter options:

| Option        | Description                                    |
| ------------- | ---------------------------------------------- |
| `theme`       | Theme to use (overrides plugin global theme)   |
| `title`       | Presentation title                             |
| `description` | Brief description for overview page            |
| `author`      | Author name(s)                                 |
| `layout`      | Layout for the slide (e.g., `cover`, `intro`)  |

## Development vs Production Modes

The plugin operates differently in development and production modes due to technical limitations:

**Why no live preview in development?**
- Slidev's CLI can only run one presentation at a time
- Building presentations takes 5-10+ seconds each
- Running builds during development would significantly slow down the dev server

This design choice prioritizes developer experience by keeping the documentation development workflow fast.

### Development Mode (`npm run start`)

- Presentations are **not built** automatically
- Overview page shows "Build Required" badges
- Much faster startup time

**Use for:** Active documentation development

### Production Mode (`npm run build`)

- All presentations are **automatically built**
- Overview page shows interactive preview thumbnails
- Presentations are fully functional

**Use for:** Deploying to production or testing integration

### Recommended Workflow

<Tabs>
  <TabItem value="slides" label="Working on Slides" default>
    ```bash
    # Live preview with hot-reload
    npm run slidev ./slidev/your-presentation.md
    ```
    
    Edit your presentation and see changes instantly.
  </TabItem>
  <TabItem value="verify" label="Verify Integration">
    ```bash
    # Build and serve to see final result
    npm run build
    npm run serve
    ```
    
    Navigate to `/slidev` to see the overview page.
  </TabItem>
  <TabItem value="docs" label="Working on Docs">
    ```bash
    # Fast development server (slides not built)
    npm run start
    ```
    
    Focus on documentation without waiting for slide builds.
  </TabItem>
</Tabs>