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