0
# Configuration and Frontmatter
1

2
Core configuration interfaces for Slidev presentations and individual slides, including theme settings, font options, and slide-specific metadata.
3

4
## Capabilities
5

6
### SlidevConfig Interface
7

8
Main configuration interface for Slidev presentations, combining headmatter config with resolved options.
9

10
```typescript { .api }
11
/**
12
 * Main Slidev configuration interface combining headmatter with resolved options
13
 */
14
interface SlidevConfig extends 
15
  Omit<Required<HeadmatterConfig>, keyof ResolvedSlidevConfigSub>,
16
  ResolvedSlidevConfigSub {}
17

18
interface ResolvedSlidevConfigSub {
19
  export: ResolvedExportOptions;
20
  drawings: ResolvedDrawingsOptions;
21
  fonts: ResolvedFontOptions;
22
  aspectRatio: number;
23
}
24
```
25

26
### HeadmatterConfig Interface
27

28
Configuration options for the presentation headmatter section.
29

30
```typescript { .api }
31
/**
32
 * Configuration interface for presentation headmatter
33
 */
34
interface HeadmatterConfig extends TransitionOptions {
35
  /** Title of the slides */
36
  title?: string;
37
  /** String template to compose title */
38
  titleTemplate?: string;
39
  /** Theme to use for the slides */
40
  theme?: string;
41
  /** List of Slidev addons */
42
  addons?: string[];
43
  /** Download remote assets in local using vite-plugin-remote-assets */
44
  remoteAssets?: boolean | 'dev' | 'build';
45
  /** Show a download button in the SPA build */
46
  download?: boolean | string;
47
  /** Show a copy button in code blocks */
48
  codeCopy?: boolean;
49
  /** The author of the slides */
50
  author?: string;
51
  /** Information shows on the built SPA */
52
  info?: string | boolean;
53
  /** Prefer highlighter */
54
  highlighter?: 'shiki';
55
  /** Enable Twoslash */
56
  twoslash?: boolean | 'dev' | 'build';
57
  /** Show line numbers in code blocks */
58
  lineNumbers?: boolean;
59
  /** Force slides color schema */
60
  colorSchema?: 'dark' | 'light' | 'all' | 'auto';
61
  /** Router mode for vue-router */
62
  routerMode?: 'hash' | 'history';
63
  /** Aspect ratio for slides */
64
  aspectRatio?: number | string;
65
  /** The actual width for slides canvas */
66
  canvasWidth?: number;
67
  /** Controls whether texts in slides are selectable */
68
  selectable?: boolean;
69
  /** Configure for themes */
70
  themeConfig?: SlidevThemeConfig;
71
  /** Configure fonts for the slides and app */
72
  fonts?: FontOptions;
73
  /** Configure the icon for app */
74
  favicon?: string;
75
  /** Options for drawings */
76
  drawings?: DrawingsOptions;
77
  /** URL of PlantUML server used to render diagrams */
78
  plantUmlServer?: string;
79
  /** Enable slides recording */
80
  record?: boolean | 'dev' | 'build';
81
  /** Expose the server to inbound requests */
82
  remote?: string | boolean;
83
  /** Engine for Atomic CSS */
84
  css?: 'unocss';
85
  /** Enable presenter mode */
86
  presenter?: boolean | 'dev' | 'build';
87
  /** Enable browser exporter */
88
  browserExporter?: boolean | 'dev' | 'build';
89
  /** Attributes to apply to the HTML element */
90
  htmlAttrs?: Record<string, string>;
91
  /** Support MDC syntax */
92
  mdc?: boolean;
93
  /** Enable built-in editor */
94
  editor?: boolean;
95
  /** Enable context menu */
96
  contextMenu?: boolean | 'dev' | 'build' | null;
97
  /** Enable wake lock */
98
  wakeLock?: boolean | 'dev' | 'build';
99
  /** Force the filename used when exporting the presentation */
100
  exportFilename?: string | null;
101
  /** Enable Monaco */
102
  monaco?: boolean | 'dev' | 'build';
103
  /** Where to load monaco types from */
104
  monacoTypesSource?: 'cdn' | 'local' | 'none';
105
  /** Additional node packages to load as monaco types */
106
  monacoTypesAdditionalPackages?: string[];
107
  /** Packages to ignore when loading monaco types */
108
  monacoTypesIgnorePackages?: string[];
109
  /** Additional local modules to load as dependencies of monaco runnable */
110
  monacoRunAdditionalDeps?: string[];
111
  /** Seo meta tags settings */
112
  seoMeta?: SeoMeta;
113
}
114
```
115

116
### Frontmatter Interface
117

118
Configuration options for individual slides.
119

120
```typescript { .api }
121
/**
122
 * Configuration interface for individual slide frontmatter
123
 */
124
interface Frontmatter extends TransitionOptions {
125
  /** Slide layout to use */
126
  layout?: BuiltinLayouts | string;
127
  /** Custom class added to the slide root element */
128
  class?: string | string[] | Record<string, unknown>;
129
  /** Manually specified the total clicks needed to this slide */
130
  clicks?: number;
131
  /** Manually specified the total clicks needed to this slide to start */
132
  clicksStart?: number;
133
  /** Preload the slide when the previous slide is active */
134
  preload?: boolean;
135
  /** Completely hide and disable the slide */
136
  hide?: boolean;
137
  /** Same as hide, completely hide and disable the slide */
138
  disabled?: boolean;
139
  /** Hide the slide for the Toc components */
140
  hideInToc?: boolean;
141
  /** Override the title for the TitleRenderer and Toc components */
142
  title?: string;
143
  /** Override the title level for the TitleRenderer and Toc components */
144
  level?: number;
145
  /** Create a route alias that can be used in the URL or with the Link component */
146
  routeAlias?: string;
147
  /** Custom zoom level for the slide */
148
  zoom?: number;
149
  /** Store the positions of draggable elements */
150
  dragPos?: Record<string, string>;
151
  /** Includes a markdown file */
152
  src?: string;
153
}
154
```
155

156
### Font Configuration
157

158
Font configuration options for presentations.
159

160
```typescript { .api }
161
/**
162
 * Font configuration interface
163
 */
164
interface FontOptions {
165
  /** Sans serif fonts (default fonts for most text) */
166
  sans?: string | string[];
167
  /** Serif fonts */
168
  serif?: string | string[];
169
  /** Monospace fonts, for code blocks and etc. */
170
  mono?: string | string[];
171
  /** Load webfonts for custom CSS */
172
  custom?: string | string[];
173
  /** Weights for fonts */
174
  weights?: string | (string | number)[];
175
  /** Import italic fonts */
176
  italic?: boolean;
177
  /** Font provider */
178
  provider?: 'none' | 'google' | 'coollabs';
179
  /** Specify web fonts names */
180
  webfonts?: string[];
181
  /** Specify local fonts names, be excluded from webfonts */
182
  local?: string[];
183
  /** Use fonts fallback */
184
  fallbacks?: boolean;
185
}
186

187
interface ResolvedFontOptions {
188
  sans: string[];
189
  mono: string[];
190
  serif: string[];
191
  weights: string[];
192
  italic: boolean;
193
  provider: 'none' | 'google' | 'coollabs';
194
  webfonts: string[];
195
  local: string[];
196
}
197
```
198

199
### Drawing Configuration
200

201
Configuration options for drawing functionality.
202

203
```typescript { .api }
204
/**
205
 * Drawing configuration interface
206
 */
207
interface DrawingsOptions {
208
  /** Persist the drawings to disk */
209
  persist?: boolean | string;
210
  /** Enable drawing functionality */
211
  enabled?: boolean | 'dev' | 'build';
212
  /** Only allow drawing from presenter mode */
213
  presenterOnly?: boolean;
214
  /** Sync drawing for all instances */
215
  syncAll?: boolean;
216
}
217

218
interface ResolvedDrawingsOptions {
219
  persist: string | false;
220
  enabled: boolean | 'dev' | 'build';
221
  presenterOnly: boolean;
222
  syncAll: boolean;
223
}
224
```
225

226
### Transition Configuration
227

228
Configuration for slide transitions.
229

230
```typescript { .api }
231
/**
232
 * Transition configuration interface
233
 */
234
interface TransitionOptions {
235
  /** Page transition, powered by Vue's TransitionGroup */
236
  transition?: BuiltinSlideTransition | string | TransitionGroupProps | null;
237
}
238

239
interface TransitionGroupProps {
240
  appear?: boolean;
241
  persisted?: boolean;
242
  tag?: string;
243
  moveClass?: string;
244
  css?: boolean;
245
  duration?: number | {
246
    enter: number;
247
    leave: number;
248
  };
249
  enterFromClass?: string;
250
  enterActiveClass?: string;
251
  enterToClass?: string;
252
  appearFromClass?: string;
253
  appearActiveClass?: string;
254
  appearToClass?: string;
255
  leaveFromClass?: string;
256
  leaveActiveClass?: string;
257
  leaveToClass?: string;
258
}
259

260
type BuiltinSlideTransition = 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'fade' | 'zoom' | 'none';
261
```
262

263
### SEO Configuration
264

265
SEO metadata configuration interface.
266

267
```typescript { .api }
268
/**
269
 * SEO metadata configuration interface
270
 */
271
interface SeoMeta {
272
  ogTitle?: string;
273
  ogDescription?: string;
274
  ogImage?: string;
275
  ogUrl?: string;
276
  twitterCard?: 'summary' | 'summary_large_image' | 'app' | 'player';
277
  twitterSite?: string;
278
  twitterTitle?: string;
279
  twitterDescription?: string;
280
  twitterImage?: string;
281
  twitterUrl?: string;
282
}
283
```
284

285
### Built-in Layouts
286

287
Type definitions for built-in slide layouts.
288

289
```typescript { .api }
290
/**
291
 * Built-in slide layout types
292
 */
293
type BuiltinLayouts =
294
  | '404'
295
  | 'center'
296
  | 'cover'
297
  | 'default'
298
  | 'end'
299
  | 'error'
300
  | 'fact'
301
  | 'full'
302
  | 'iframe-left'
303
  | 'iframe-right'
304
  | 'iframe'
305
  | 'image-left'
306
  | 'image-right'
307
  | 'image'
308
  | 'intro'
309
  | 'none'
310
  | 'quote'
311
  | 'section'
312
  | 'statement'
313
  | 'two-cols-header'
314
  | 'two-cols';
315

316
type SlidevThemeConfig = Record<string, string | number>;
317
```
318

319
## Types
320

321
```typescript { .api }
322
/**
323
 * Headmatter interface combining configuration with defaults
324
 */
325
interface Headmatter extends HeadmatterConfig, Omit<Frontmatter, 'title'> {
326
  /** Default frontmatter options applied to all slides */
327
  defaults?: Frontmatter;
328
}
329

330
interface ResolvedExportOptions extends Omit<ExportArgs, 'entry' | 'theme'> {
331
  withClicks?: boolean;
332
  executablePath?: string;
333
  withToc?: boolean;
334
}
335
```