Supaslidev Logo
Concepts

Dashboard Overview

Visual interface and CLI commands for managing all your presentations from one place.

Launching the Dashboard

Start the dashboard from your workspace root:

pnpm dev

This command:

  1. Scans the presentations/ directory and generates presentation metadata
  2. Starts an API server to manage presentation dev servers
  3. Launches the dashboard UI in your browser

The dashboard automatically detects all presentations in your workspace and displays them in a grid layout.

Dashboard Interface

The dashboard UI provides a visual way to manage your presentations.

The header displays the Supaslidev title and a New Presentation button. Click this button to create a new presentation directly from the interface.

Search and Filter

A search input lets you filter presentations by title. As you type, the grid updates to show only matching presentations.

Presentation Cards

Each presentation appears as a card displaying:

  • Thumbnail: A preview image if the presentation has a background configured
  • Title: The presentation name from its frontmatter
  • Description: Optional description from the presentation's metadata
  • Theme badge: Shows which Slidev theme the presentation uses
  • Duration badge: Displays the estimated presentation duration if configured
  • Status indicator: A green dot appears when the dev server is running
  • Present/Stop button: Starts or stops the presentation's dev server

Interacting with Presentations

Starting a presentation: Click the Present button on a card. The dashboard starts a Slidev dev server and opens the presentation in a new browser tab.

Stopping a server: When a presentation is running, the button changes to Stop. Click it to shut down that presentation's dev server.

Opening a running presentation: Click anywhere on a card with a running server to open the presentation in a new tab.

CLI Commands

The dashboard package also provides CLI commands for scriptable workflows.

pnpm dev

Starts the interactive dashboard UI.

pnpm dev

This is the default command. Running pnpm dev without arguments launches the full dashboard interface.

pnpm present <name>

Starts a Slidev dev server for a specific presentation without the dashboard UI.

pnpm present my-talk

Use this when you want to work on a single presentation and don't need the full dashboard interface.

pnpm new [name]

Creates a new presentation in the workspace.

pnpm new quarterly-review

This command:

  1. Validates the name (lowercase alphanumeric with hyphens only)
  2. Checks that a presentation with that name doesn't already exist
  3. Runs pnpm create slidev in the presentations directory
  4. Sets up the new presentation with catalog dependencies

If you omit the name, the command launches Slidev's interactive setup wizard.

pnpm new

pnpm export <name>

Exports a presentation to PDF.

pnpm export my-talk

By default, the PDF is saved to dist/<name>.pdf in your workspace root.

Specify a custom output path with the --output flag:

pnpm export my-talk --output ./exports/presentation.pdf

pnpm deploy <name>

Builds and prepares a presentation for deployment.

pnpm deploy my-talk

This command:

  1. Runs slidev build to generate the static SPA
  2. Creates a deployment package in deploy/<name>/
  3. Adds configuration files for Vercel and Netlify

The output directory contains everything needed to deploy to a static hosting platform:

deploy/my-talk/
├── dist/           # Built presentation files
├── vercel.json     # Vercel configuration
├── netlify.toml    # Netlify configuration
└── package.json    # Minimal package for deployment

Specify a custom output directory:

pnpm deploy my-talk --output ./my-deploy-folder

After running the command, deploy with your preferred platform:

# Vercel
cd deploy/my-talk && vercel

# Netlify
cd deploy/my-talk && netlify deploy --prod

Command Summary

CommandDescription
pnpm devLaunch interactive dashboard UI
pnpm new [name]Create a new presentation
pnpm present <name>Start dev server for one presentation
pnpm export <name>Export presentation to PDF
pnpm deploy <name>Build deployment package

Next Steps

Learn about getting started with quick start or explore export and deploy options for hosting your slides.