0
# Slidev CLI
1
2
Slidev is a modern presentation framework designed specifically for developers that transforms Markdown files into interactive, web-based slide presentations. It provides a comprehensive CLI tool for creating, developing, and building presentation slides with built-in features including syntax highlighting for code blocks, live coding capabilities, Vue component integration, multiple export formats (PDF, PPTX, PNG), presenter mode with speaker notes, drawing and annotation tools, LaTeX math support, Mermaid diagram generation, theme system with npm package distribution, UnoCSS styling, recording capabilities, and real-time development server with hot reloading.
3
4
## Package Information
5
6
- **Package Name**: @slidev/cli
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install @slidev/cli` or `npm create slidev`
10
- **Global Installation**: `npm install -g @slidev/cli`
11
12
## Core Imports
13
14
**Node.js API:**
15
16
```typescript
17
import { createServer, parser, ViteSlidevPlugin } from "@slidev/cli";
18
import { resolveOptions } from "@slidev/cli";
19
```
20
21
For CommonJS:
22
23
```javascript
24
const { createServer, parser, ViteSlidevPlugin } = require("@slidev/cli");
25
```
26
27
**CLI Usage:**
28
29
```bash
30
# Global installation
31
npx slidev [entry.md] # Start development server
32
npx slidev build [entry.md] # Build static site
33
npx slidev export [entry.md] # Export to PDF/PNG/PPTX
34
```
35
36
## Basic Usage
37
38
**CLI Development Server:**
39
40
```bash
41
# Start development server with slides.md
42
slidev
43
44
# Start with custom entry file
45
slidev my-presentation.md
46
47
# Start with custom port and open browser
48
slidev --port 3000 --open
49
50
# Enable remote control
51
slidev --remote mypassword
52
```
53
54
**Node.js API Server:**
55
56
```typescript
57
import { createServer, resolveOptions } from "@slidev/cli";
58
59
const options = await resolveOptions({ entry: "slides.md" }, "dev");
60
const server = await createServer(options, {
61
server: { port: 3000 }
62
});
63
64
await server.listen();
65
```
66
67
**Building for Production:**
68
69
```bash
70
# Build static site
71
slidev build
72
73
# Build with custom output directory
74
slidev build --out dist
75
76
# Build with PDF download enabled
77
slidev build --download
78
```
79
80
## Architecture
81
82
Slidev is built around several key components:
83
84
- **CLI Interface**: Command-line tool providing development server, build, export, and formatting capabilities
85
- **Vite Integration**: Built on Vite for fast development and optimized production builds
86
- **Vue.js Framework**: Uses Vue 3 for component rendering and interactive features
87
- **Markdown Parser**: Custom parser for slide content with frontmatter support and slide separation
88
- **Theme System**: Extensible theme architecture supporting npm-distributed themes
89
- **Export Engine**: Multi-format export system using Playwright for PDF/PNG/PPTX generation
90
- **Development Tools**: Hot reloading, presenter mode, drawing tools, and remote control capabilities
91
92
## Capabilities
93
94
### CLI Commands
95
96
Core command-line interface providing development server, build, export, and utility commands for Slidev presentations.
97
98
```typescript { .api }
99
// Development server command
100
slidev [entry] [options]
101
102
// Build command
103
slidev build [entry..] [options]
104
105
// Export command
106
slidev export [entry..] [options]
107
108
// Format command
109
slidev format [entry..]
110
111
// Theme commands
112
slidev theme eject [options]
113
114
// Export notes command
115
slidev export-notes [entry..] [options]
116
```
117
118
[CLI Commands](./cli-commands.md)
119
120
### Development Server
121
122
Node.js API for creating and managing Slidev development servers programmatically.
123
124
```typescript { .api }
125
function createServer(
126
options: ResolvedSlidevOptions,
127
viteConfig?: InlineConfig,
128
serverOptions?: SlidevServerOptions
129
): Promise<ViteDevServer>;
130
```
131
132
[Development Server](./development-server.md)
133
134
### Build System
135
136
Production build functionality for generating static sites and handling export integration.
137
138
```typescript { .api }
139
function build(
140
options: ResolvedSlidevOptions,
141
viteConfig?: InlineConfig,
142
args: BuildArgs
143
): Promise<void>;
144
```
145
146
[Build System](./build-system.md)
147
148
### Export System
149
150
Multi-format export capabilities for generating PDF, PNG, PPTX, and Markdown outputs from Slidev presentations.
151
152
```typescript { .api }
153
function exportSlides(options: ExportOptions): Promise<string>;
154
function exportNotes(options: NotesExportOptions): Promise<string>;
155
function getExportOptions(args: ExportArgs, options: ResolvedSlidevOptions, defaultOutput?: string): ExportOptions;
156
```
157
158
[Export System](./export-system.md)
159
160
### Options Resolution
161
162
Configuration resolution system for processing entry options and creating resolved configurations.
163
164
```typescript { .api }
165
function resolveOptions(
166
entryOptions: SlidevEntryOptions,
167
mode: 'dev' | 'build' | 'export'
168
): Promise<ResolvedSlidevOptions>;
169
```
170
171
[Options Resolution](./options-resolution.md)
172
173
### Vite Plugin
174
175
Vite plugin system providing all necessary transformations and integrations for Slidev functionality.
176
177
```typescript { .api }
178
function ViteSlidevPlugin(
179
options: ResolvedSlidevOptions,
180
pluginOptions?: SlidevPluginOptions,
181
serverOptions?: SlidevServerOptions
182
): Promise<PluginOption[]>;
183
```
184
185
[Vite Plugin](./vite-plugin.md)
186
187
### Markdown Parser
188
189
Re-exported parser functionality from `@slidev/parser/fs` for processing Slidev markdown files with frontmatter and slide separation.
190
191
```typescript { .api }
192
// Re-exported as parser namespace from @slidev/parser/fs
193
import { parser } from "@slidev/cli";
194
195
// Parser provides functions for loading, parsing, and processing slide markdown
196
const parser: {
197
load: (userRoot: string, entry: string, loadedSource?: Record<string, string>, mode?: string) => Promise<SlidevMarkdown>;
198
parse: (content: string, filepath: string) => SlidevMarkdown;
199
save: (markdown: SlidevMarkdown) => Promise<void>;
200
prettify: (markdown: SlidevMarkdown) => void;
201
resolveConfig: (headmatter: Record<string, any>, themeMeta?: SlidevThemeMeta, entry?: string) => SlidevConfig;
202
};
203
```
204
205
## Core Types
206
207
```typescript { .api }
208
interface SlidevEntryOptions {
209
/** Markdown entry file path */
210
entry: string;
211
/** Theme identifier */
212
theme?: string;
213
/** Remote password for control */
214
remote?: string;
215
/** Enable inspect plugin */
216
inspect?: boolean;
217
/** Build with download option */
218
download?: boolean;
219
/** Base URL in dev or build mode */
220
base?: string;
221
}
222
223
interface ResolvedSlidevOptions extends RootsInfo, SlidevEntryOptions {
224
data: SlidevData;
225
themeRaw: string;
226
themeRoots: string[];
227
addonRoots: string[];
228
roots: string[];
229
mode: 'dev' | 'build' | 'export';
230
utils: ResolvedSlidevUtils;
231
}
232
233
interface SlidevServerOptions {
234
loadData?: (loadedSource: Record<string, string>) => Promise<SlidevData | false>;
235
}
236
237
interface BuildArgs extends ExportArgs {
238
out: string;
239
base?: string;
240
download?: boolean;
241
inspect: boolean;
242
}
243
244
interface ExportArgs {
245
'output'?: string;
246
'format'?: string;
247
'timeout'?: number;
248
'wait'?: number;
249
'wait-until'?: string;
250
'range'?: string;
251
'dark'?: boolean;
252
'with-clicks'?: boolean;
253
'executable-path'?: string;
254
'with-toc'?: boolean;
255
'per-slide'?: boolean;
256
'scale'?: number;
257
'omit-background'?: boolean;
258
}
259
260
interface SlidevMarkdown {
261
filepath: string;
262
slides: SourceSlideInfo[];
263
headmatter: Record<string, any>;
264
features: SlidevDetectedFeatures;
265
}
266
267
interface SourceSlideInfo {
268
filepath: string;
269
index: number;
270
start: number;
271
end: number;
272
raw: string;
273
content: string;
274
frontmatter: Record<string, any>;
275
title?: string;
276
level?: number;
277
}
278
279
interface SlidevDetectedFeatures {
280
katex: boolean;
281
monaco: false | { types: string[]; deps: string[] };
282
tweet: boolean;
283
mermaid: boolean;
284
}
285
286
interface SlidevThemeMeta {
287
defaults?: Partial<SlidevConfig>;
288
colorSchema?: 'dark' | 'light' | 'both';
289
highlighter?: 'shiki';
290
}
291
292
interface SlidevConfig {
293
// Core configuration interface (extensive type definition)
294
[key: string]: any;
295
}
296
```