Dashboard
Launching the Dashboard
Start the dashboard from your workspace root:
pnpm dev
This command:
- Scans the
presentations/directory and generates presentation metadata - Starts an API server to manage presentation dev servers
- Launches the dashboard UI in your browser
View Modes
The dashboard supports two view modes for displaying your presentations.
Grid View
The default view displays presentations as cards in a responsive grid layout. Each card shows the presentation title, description, theme, and status at a glance.
Grid view works well when you have many presentations and want to see visual overviews.
List View
List view displays presentations as compact rows with key information inline. This mode is useful when you prefer a denser layout or have many presentations to scan through.
Toggle between views using the command palette or by typing Toggle view in the header input.
Search
Filter presentations by typing in the search input below the header. The list updates as you type, showing only presentations whose titles match your query.
The search is case-insensitive and matches anywhere in the title.
Search presentations by title...
When no presentations match your search, the dashboard displays an empty state with a button to clear the filter.
Status Indicators
Each presentation card shows its current server status.
Idle
When a presentation server is not running, the card displays a neutral idle badge. The dev button shows dev and clicking it starts the server.
Live
When a dev server is running, the card displays:
- A green live badge with a pulsing indicator
- The localhost URL and port (e.g.,
localhost:3030) - A "click to open" hint
- The card border glows green
The dev button changes to stop. Clicking the card itself opens the presentation in a new browser tab.
Presentation Cards
Each presentation appears as a card displaying:
| Element | Description |
|---|---|
| Path | The presentation folder path (e.g., ~/my-presentation) |
| Title | The presentation name from its frontmatter |
| Description | Optional description from the presentation's metadata |
| Theme badge | Shows the Slidev theme (e.g., --theme=default) |
| Duration badge | Displays estimated duration if configured (e.g., --duration=30min) |
| Dev button | Starts or stops the presentation's dev server |
| Export button | Exports the presentation to PDF |
Interacting with Presentations
Starting a Dev Server
Click the dev button on a card. The dashboard:
- Starts a Slidev dev server for that presentation
- Opens the presentation in a new browser tab after a short delay
- Updates the card to show the live status
Stopping a Server
When a presentation is running, click the stop button 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.
Exporting to PDF
Click the export button to generate a PDF of the presentation. When complete, the PDF opens in a new browser tab.
Command Palette
Press ⌘K (Mac) or Ctrl+K (Windows/Linux) to open the command palette. This provides quick access to all dashboard actions:
| Command | Description |
|---|---|
| New | Create a new presentation |
| Import | Import existing Slidev presentations |
| Toggle theme | Switch between light and dark mode |
| Toggle view | Switch between grid and list layout |
| Present > name | Start a specific presentation |
| Export > name | Export a specific presentation to PDF |
You can also type commands directly in the header input with autocomplete support.
Theme Toggle
The dashboard supports light and dark modes. Toggle the theme using:
- The sun/moon icon button in the header
- The command palette (
Toggle theme) - Typing
Toggle themein the header input
Your theme preference syncs with your system settings by default.
Creating Presentations
Click the new button or use the New command to open the create presentation dialog. Enter a name for your presentation (lowercase, alphanumeric with hyphens) and the dashboard creates it using the Slidev template with catalog dependencies.