0
# Slide Data and Processing
1

2
Core data structures for slide information, markdown processing, and presentation data management.
3

4
## Capabilities
5

6
### Slide Information Interfaces
7

8
Core interfaces for representing slide data and metadata.
9

10
```typescript { .api }
11
/**
12
 * Base slide information interface
13
 */
14
interface SlideInfoBase {
15
  /** Revision identifier for the slide */
16
  revision: string;
17
  /** Frontmatter data as key-value pairs */
18
  frontmatter: Record<string, any>;
19
  /** Main slide content */
20
  content: string;
21
  /** Raw frontmatter string */
22
  frontmatterRaw?: string;
23
  /** Speaker notes for the slide */
24
  note?: string;
25
  /** Slide title extracted from content or frontmatter */
26
  title?: string;
27
  /** Heading level for the slide title */
28
  level?: number;
29
}
30

31
/**
32
 * Source slide information with file positioning
33
 */
34
interface SourceSlideInfo extends SlideInfoBase {
35
  /** The filepath of the markdown file */
36
  filepath: string;
37
  /** The index of the slide in the markdown file */
38
  index: number;
39
  /** The range of the slide in the markdown file */
40
  start: number;
41
  contentStart: number;
42
  end: number;
43
  /** Raw slide content including frontmatter */
44
  raw: string;
45
  /** Raw content before being processed by preparsers */
46
  contentRaw: string;
47
  /** Slides imported by this slide */
48
  imports?: SourceSlideInfo[];
49
  /** YAML document for frontmatter parsing */
50
  frontmatterDoc?: YAML.Document;
51
  /** Style of frontmatter formatting */
52
  frontmatterStyle?: FrontmatterStyle;
53
}
54

55
/**
56
 * Processed slide information for rendering
57
 */
58
interface SlideInfo extends SlideInfoBase {
59
  /** The index of the slide in the presentation */
60
  index: number;
61
  /** The importers of this slide. Empty array if entry markdown file */
62
  importChain?: SourceSlideInfo[];
63
  /** The source slide where the content is from */
64
  source: SourceSlideInfo;
65
  /** Processed HTML for speaker notes */
66
  noteHTML?: string;
67
}
68
```
69

70
### Slide Patch Interface
71

72
Interface for updating slide content.
73

74
```typescript { .api }
75
/**
76
 * Editable fields for a slide
77
 */
78
type SlidePatch = Partial<Pick<SlideInfoBase, 'content' | 'note' | 'frontmatterRaw'>> & {
79
  /** Skip HMR update for this patch */
80
  skipHmr?: boolean;
81
  /** The frontmatter patch (only the changed fields), null to remove a field */
82
  frontmatter?: Record<string, any>;
83
}
84
```
85

86
### Slidev Data Structure
87

88
Main data structure containing all presentation information.
89

90
```typescript { .api }
91
/**
92
 * Complete Slidev presentation data structure
93
 */
94
interface SlidevData {
95
  /** Slides that should be rendered (disabled slides excluded) */
96
  slides: SlideInfo[];
97
  /** Entry markdown file information */
98
  entry: SlidevMarkdown;
99
  /** Resolved presentation configuration */
100
  config: SlidevConfig;
101
  /** Presentation headmatter data */
102
  headmatter: Record<string, unknown>;
103
  /** Detected features used in the presentation */
104
  features: SlidevDetectedFeatures;
105
  /** Theme metadata if available */
106
  themeMeta?: SlidevThemeMeta;
107
  /** All markdown files in the presentation */
108
  markdownFiles: Record<string, SlidevMarkdown>;
109
  /** From watched files to indexes of slides that must be reloaded */
110
  watchFiles: Record<string, Set<number>>;
111
}
112
```
113

114
### Markdown File Structure
115

116
Structure representing a markdown file containing slides.
117

118
```typescript { .api }
119
/**
120
 * Slidev markdown file representation
121
 */
122
interface SlidevMarkdown {
123
  /** File path of the markdown file */
124
  filepath: string;
125
  /** Raw markdown content */
126
  raw: string;
127
  /** All slides in this markdown file */
128
  slides: SourceSlideInfo[];
129
  /** Parse errors if any */
130
  errors?: { row: number, message: string }[];
131
}
132
```
133

134
### Feature Detection
135

136
Interface for detecting features used in presentations.
137

138
```typescript { .api }
139
/**
140
 * Features detected in the Slidev presentation
141
 */
142
interface SlidevDetectedFeatures {
143
  /** Whether KaTeX math rendering is used */
144
  katex: boolean;
145
  /** Monaco editor usage, false or referenced module specifiers */
146
  monaco: false | {
147
    types: string[];
148
    deps: string[];
149
  };
150
  /** Whether Twitter embeds are used */
151
  tweet: boolean;
152
  /** Whether Mermaid diagrams are used */
153
  mermaid: boolean;
154
}
155
```
156

157
### Theme Metadata
158

159
Metadata structure for Slidev themes.
160

161
```typescript { .api }
162
/**
163
 * Metadata for "slidev" field in themes' package.json
164
 */
165
interface SlidevThemeMeta {
166
  /** Default configuration values */
167
  defaults?: Partial<SlidevConfig>;
168
  /** Supported color schema */
169
  colorSchema?: 'dark' | 'light' | 'both';
170
  /** Preferred highlighter */
171
  highlighter?: 'shiki';
172
}
173
```
174

175
### Slide Route
176

177
Interface for slide routing information.
178

179
```typescript { .api }
180
/**
181
 * Slide route information for Vue router
182
 */
183
interface SlideRoute {
184
  /** Slide number */
185
  no: number;
186
  /** Route metadata including slide information */
187
  meta: RouteMeta & Required<Pick<RouteMeta, 'slide'>>;
188
  /** Load the slide component itself */
189
  load: () => Promise<{ default: RouteComponent }>;
190
  /** Wrapped async component */
191
  component: Component;
192
}
193
```
194

195
### Preparser Extension
196

197
Interface for extending slide preprocessing.
198

199
```typescript { .api }
200
/**
201
 * Preparser extension interface for custom slide processing
202
 */
203
interface SlidevPreparserExtension {
204
  /** Extension name */
205
  name?: string;
206
  /** Transform raw lines before parsing */
207
  transformRawLines?: (lines: string[]) => Promise<void> | void;
208
  /** Transform slide content */
209
  transformSlide?: (content: string, frontmatter: any) => Promise<string | undefined>;
210
  /** Transform speaker notes */
211
  transformNote?: (note: string | undefined, frontmatter: any) => Promise<string | undefined>;
212
}
213

214
/**
215
 * Preparser extension loader function type
216
 */
217
type PreparserExtensionLoader = (
218
  headmatter: Record<string, unknown>, 
219
  filepath: string, 
220
  mode?: string
221
) => Promise<SlidevPreparserExtension[]>;
222
```
223

224
### Utility Types
225

226
Additional utility types for slide processing.
227

228
```typescript { .api }
229
/**
230
 * Frontmatter style format types
231
 */
232
type FrontmatterStyle = 'frontmatter' | 'yaml';
233

234
/**
235
 * Render context types
236
 */
237
type RenderContext = 'none' | 'slide' | 'overview' | 'presenter' | 'previewNext';
238
```
239

240
## Usage Examples
241

242
**Working with Slide Data:**
243

244
```typescript
245
import type { SlidevData, SlideInfo, SlidePatch } from "@slidev/types";
246

247
function processSlideData(data: SlidevData) {
248
  console.log(`Presentation: ${data.config.title}`);
249
  console.log(`Total slides: ${data.slides.length}`);
250
  
251
  // Process each slide
252
  data.slides.forEach((slide: SlideInfo, index: number) => {
253
    console.log(`Slide ${index + 1}:`);
254
    console.log(`  Title: ${slide.title || 'Untitled'}`);
255
    console.log(`  Layout: ${slide.frontmatter.layout || 'default'}`);
256
    console.log(`  Source: ${slide.source.filepath}:${slide.source.index}`);
257
    
258
    if (slide.noteHTML) {
259
      console.log(`  Has speaker notes`);
260
    }
261
  });
262
  
263
  // Check detected features
264
  if (data.features.katex) {
265
    console.log('KaTeX math rendering detected');
266
  }
267
  if (data.features.monaco) {
268
    console.log('Monaco editor detected with types:', data.features.monaco.types);
269
  }
270
}
271
```
272

273
**Updating Slide Content:**
274

275
```typescript
276
function updateSlideContent(slideIndex: number, patch: SlidePatch) {
277
  const updateData = {
278
    ...patch,
279
    skipHmr: false // Enable HMR by default
280
  };
281
  
282
  if (patch.frontmatter) {
283
    console.log('Updating frontmatter:', patch.frontmatter);
284
  }
285
  
286
  if (patch.content) {
287
    console.log('Updating slide content');
288
  }
289
  
290
  if (patch.note) {
291
    console.log('Updating speaker notes');
292
  }
293
  
294
  // Apply the patch (pseudo-implementation)
295
  return applyPatch(slideIndex, updateData);
296
}
297

298
// Example usage
299
updateSlideContent(0, {
300
  content: '# Updated Title\n\nNew content here',
301
  frontmatter: {
302
    layout: 'cover',
303
    background: 'blue'
304
  },
305
  note: 'Updated speaker notes'
306
});
307
```
308

309
**Processing Markdown Files:**
310

311
```typescript
312
function analyzeMarkdownFile(markdown: SlidevMarkdown) {
313
  console.log(`File: ${markdown.filepath}`);
314
  console.log(`Slides: ${markdown.slides.length}`);
315
  
316
  if (markdown.errors && markdown.errors.length > 0) {
317
    console.log('Parse errors found:');
318
    markdown.errors.forEach(error => {
319
      console.log(`  Line ${error.row}: ${error.message}`);
320
    });
321
  }
322
  
323
  // Analyze slides in the file
324
  markdown.slides.forEach((slide, index) => {
325
    console.log(`  Slide ${index + 1} (${slide.start}-${slide.end}):`);
326
    console.log(`    Content length: ${slide.content.length}`);
327
    console.log(`    Frontmatter keys: ${Object.keys(slide.frontmatter).join(', ')}`);
328
    
329
    if (slide.imports && slide.imports.length > 0) {
330
      console.log(`    Imports ${slide.imports.length} other slides`);
331
    }
332
  });
333
}
334
```
335

336
**Working with Preparser Extensions:**
337

338
```typescript
339
const customPreparser: SlidevPreparserExtension = {
340
  name: 'custom-preprocessor',
341
  
342
  transformRawLines: async (lines: string[]) => {
343
    // Process raw lines before parsing
344
    for (let i = 0; i < lines.length; i++) {
345
      if (lines[i].includes('{{custom}}')) {
346
        lines[i] = lines[i].replace('{{custom}}', 'Processed by custom preparser');
347
      }
348
    }
349
  },
350
  
351
  transformSlide: async (content: string, frontmatter: any) => {
352
    // Transform slide content based on frontmatter
353
    if (frontmatter.useCustomTransform) {
354
      return content.replace(/\$\{(\w+)\}/g, (match, variable) => {
355
        return frontmatter[variable] || match;
356
      });
357
    }
358
    return content;
359
  },
360
  
361
  transformNote: async (note: string | undefined, frontmatter: any) => {
362
    // Transform speaker notes
363
    if (note && frontmatter.enhanceNotes) {
364
      return `Enhanced: ${note}`;
365
    }
366
    return note;
367
  }
368
};
369
```
370

371
## Additional Types
372

373
### Table of Contents
374

375
Interface for table of contents item structure.
376

377
```typescript { .api }
378
/**
379
 * Table of contents item interface
380
 */
381
interface TocItem {
382
  /** Slide number */
383
  no: number;
384
  /** Whether this item is currently active */
385
  active?: boolean;
386
  /** Whether this item is an active parent */
387
  activeParent?: boolean;
388
  /** Child TOC items */
389
  children: TocItem[];
390
  /** Whether this item has an active parent */
391
  hasActiveParent?: boolean;
392
  /** Nesting level */
393
  level: number;
394
  /** Title level for heading hierarchy */
395
  titleLevel: number;
396
  /** Path to the slide */
397
  path: string;
398
  /** Whether to hide this item in TOC */
399
  hideInToc?: boolean;
400
  /** Item title */
401
  title?: string;
402
}
403
```
404

405
### Vite Integration
406

407
Interface for Vite plugin configuration.
408

409
```typescript { .api }
410
/**
411
 * Slidev plugin options for Vite integration
412
 */
413
interface SlidevPluginOptions {
414
  vue?: ArgumentsType<typeof Vue>[0];
415
  vuejsx?: ArgumentsType<typeof VueJsx>[0];
416
  markdown?: ArgumentsType<typeof Markdown>[0];
417
  components?: ArgumentsType<typeof Components>[0];
418
  icons?: ArgumentsType<typeof Icons>[0];
419
  remoteAssets?: ArgumentsType<typeof RemoteAssets>[0];
420
  serverRef?: ArgumentsType<typeof ServerRef>[0];
421
  unocss?: UnoCSSConfig;
422
  staticCopy?: ViteStaticCopyOptions;
423
  inspect?: ViteInspectOptions;
424
}
425
```