0
# @slidev/types
1

2
@slidev/types provides comprehensive TypeScript type definitions and interfaces for the Slidev presentation framework ecosystem. It serves as the shared foundation for type safety across all Slidev packages, containing type definitions for slide configuration, frontmatter schemas, presentation options, CLI interfaces, code execution contexts, and various plugin systems.
3

4
## Package Information
5

6
- **Package Name**: @slidev/types
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @slidev/types`
10

11
## Core Imports
12

13
```typescript
14
import type { 
15
  SlidevConfig, 
16
  Frontmatter, 
17
  SlideInfo, 
18
  CodeRunner,
19
  AppSetup,
20
  MonacoSetup,
21
  ContextMenuItem,
22
  MarkdownTransformer,
23
  TocItem,
24
  RootsInfo,
25
  ResolvedSlidevOptions
26
} from "@slidev/types";
27
```
28

29
For CommonJS:
30

31
```javascript
32
const { SlidevConfig, Frontmatter, SlideInfo } = require("@slidev/types");
33
```
34

35
## Basic Usage
36

37
```typescript
38
import type { SlidevConfig, Frontmatter, SlideInfo } from "@slidev/types";
39

40
// Define slide configuration
41
const config: SlidevConfig = {
42
  title: "My Presentation",
43
  theme: "default",
44
  highlighter: "shiki",
45
  fonts: {
46
    sans: "Inter",
47
    mono: "Fira Code"
48
  }
49
};
50

51
// Define slide frontmatter
52
const slideFrontmatter: Frontmatter = {
53
  layout: "cover",
54
  title: "Welcome",
55
  class: "text-center"
56
};
57

58
// Work with slide information
59
function processSlide(slide: SlideInfo) {
60
  console.log(`Slide ${slide.index}: ${slide.title}`);
61
  return slide.content;
62
}
63
```
64

65
## Architecture
66

67
@slidev/types is organized around several key areas:
68

69
- **Configuration Types**: Core presentation and slide configuration interfaces
70
- **Frontmatter System**: Schema definitions for slide metadata and presentation settings
71
- **Setup System**: Plugin and extension interfaces for customizing Slidev behavior
72
- **Click System**: Types for slide interactions and animations
73
- **Code Execution**: Interfaces for running and displaying code in presentations
74
- **CLI Interface**: Command-line argument and option definitions
75
- **Options System**: Configuration interfaces for server options and resolved utilities
76
- **Context Menu System**: Types for right-click menus and interactive options
77
- **Markdown Transform**: Interfaces for custom markdown processing during build
78
- **Table of Contents**: Hierarchical navigation structure for presentations
79

80
## Capabilities
81

82
### Configuration and Frontmatter
83

84
Core configuration interfaces for presentations and individual slides, including theme settings, font options, and slide-specific metadata.
85

86
```typescript { .api }
87
interface SlidevConfig extends Omit<Required<HeadmatterConfig>, keyof ResolvedSlidevConfigSub>, ResolvedSlidevConfigSub {}
88

89
interface HeadmatterConfig extends TransitionOptions {
90
  title?: string;
91
  theme?: string;
92
  addons?: string[];
93
  highlighter?: 'shiki';
94
  fonts?: FontOptions;
95
  drawings?: DrawingsOptions;
96
}
97

98
interface Frontmatter extends TransitionOptions {
99
  layout?: BuiltinLayouts | string;
100
  class?: string | string[] | Record<string, unknown>;
101
  clicks?: number;
102
  title?: string;
103
  hide?: boolean;
104
}
105
```
106

107
[Configuration and Frontmatter](./config-frontmatter.md)
108

109
### Setup and Plugin System  
110

111
Interfaces for extending Slidev with custom functionality including app initialization, Monaco editor setup, code runners, and various plugin hooks.
112

113
```typescript { .api }
114
type AppSetup = (context: AppContext) => Awaitable<void>;
115
type MonacoSetup = (m: typeof monaco) => Awaitable<MonacoSetupReturn | void>;
116
type CodeRunnersSetup = (runners: CodeRunnerProviders) => Awaitable<CodeRunnerProviders | void>;
117

118
interface AppContext {
119
  app: App;
120
  router: Router;
121
}
122
```
123

124
[Setup and Plugin System](./setup-plugins.md)
125

126
### Code Execution System
127

128
Types for executing and displaying code within presentations, including context interfaces and output formatting options.
129

130
```typescript { .api }
131
type CodeRunner = (code: string, ctx: CodeRunnerContext) => Awaitable<CodeRunnerOutputs>;
132

133
interface CodeRunnerContext {
134
  options: Record<string, unknown>;
135
  highlight: (code: string, lang: string, options?: Partial<CodeToHastOptions>) => string;
136
  run: (code: string, lang: string) => Promise<CodeRunnerOutputs>;
137
}
138

139
type CodeRunnerOutput = CodeRunnerOutputHtml | CodeRunnerOutputError | CodeRunnerOutputText | CodeRunnerOutputTextArray | CodeRunnerOutputDom;
140
```
141

142
[Code Execution System](./code-execution.md)
143

144
### Click and Interaction System
145

146
Types for managing slide interactions, animations, and click-based progression through presentation content.
147

148
```typescript { .api }
149
interface ClicksContext {
150
  current: number;
151
  readonly clicksStart: number;
152
  calculateSince: (at: RawSingleAtValue, size?: number) => ClicksInfo | null;
153
  calculateRange: (at: RawRangeAtValue) => ClicksInfo | null;
154
  register: (el: ClicksElement, info: Pick<ClicksInfo, 'delta' | 'max'> | null) => void;
155
}
156

157
interface ClicksInfo {
158
  start: number;
159
  end: number;
160
  max: number;
161
  delta: number;
162
}
163
```
164

165
[Click and Interaction System](./clicks-interactions.md)
166

167
### CLI and Build System
168

169
Command-line interface types for Slidev's build, export, and development commands.
170

171
```typescript { .api }
172
interface CommonArgs {
173
  entry: string;
174
  theme?: string;
175
}
176

177
interface ExportArgs extends CommonArgs {
178
  'output'?: string;
179
  'format'?: string;
180
  'timeout'?: number;
181
  'with-clicks'?: boolean;
182
}
183

184
interface BuildArgs extends ExportArgs {
185
  out: string;
186
  base?: string;
187
  inspect: boolean;
188
}
189
```
190

191
[CLI and Build System](./cli-build.md)
192

193
### Slide Data and Processing
194

195
Core data structures for slide information, markdown processing, and presentation data management.
196

197
```typescript { .api }
198
interface SlideInfo extends SlideInfoBase {
199
  index: number;
200
  source: SourceSlideInfo;
201
  noteHTML?: string;
202
}
203

204
interface SlidevData {
205
  slides: SlideInfo[];
206
  entry: SlidevMarkdown;
207
  config: SlidevConfig;
208
  features: SlidevDetectedFeatures;
209
}
210
```
211

212
[Slide Data and Processing](./slide-data.md)
213

214
### Options and Configuration System
215

216
Server configuration, entry options, and resolved utilities for Slidev runtime environment.
217

218
```typescript { .api }
219
interface RootsInfo {
220
  cliRoot: string;
221
  clientRoot: string;
222
  userRoot: string;
223
  userPkgJson: Record<string, any>;
224
  userWorkspaceRoot: string;
225
}
226

227
interface SlidevEntryOptions {
228
  entry: string;
229
  theme?: string;
230
  remote?: string;
231
  inspect?: boolean;
232
  download?: boolean;
233
  base?: string;
234
}
235

236
interface ResolvedSlidevOptions extends RootsInfo, SlidevEntryOptions {
237
  data: SlidevData;
238
  themeRaw: string;
239
  themeRoots: string[];
240
  addonRoots: string[];
241
  roots: string[];
242
  mode: 'dev' | 'build' | 'export';
243
  utils: ResolvedSlidevUtils;
244
}
245
```
246

247
[Options and Configuration System](./options-system.md)
248

249
### Context Menu System
250

251
Types for Slidev's context menu system with right-click menus and interactive options.
252

253
```typescript { .api }
254
type ContextMenuItem = ContextMenuOption | 'separator';
255

256
type ContextMenuOption = {
257
  action: () => void;
258
  disabled?: boolean;
259
} & (
260
  | {
261
    small?: false;
262
    icon?: Component | string;
263
    label: string | Component;
264
  }
265
  | {
266
    small: true;
267
    icon: Component | string;
268
    label: string;
269
  }
270
);
271
```
272

273
[Context Menu System](./context-menu.md)
274

275
### Markdown Transform System
276

277
Types for custom markdown transformation during slide processing and rendering.
278

279
```typescript { .api }
280
interface MarkdownTransformContext {
281
  s: MagicString;
282
  slide: SlideInfo;
283
  options: ResolvedSlidevOptions;
284
}
285

286
type MarkdownTransformer = (ctx: MarkdownTransformContext) => Awaitable<void>;
287
```
288

289
[Markdown Transform System](./markdown-transform.md)
290

291
### Table of Contents System
292

293
Hierarchical navigation structure and TOC item management for presentations.
294

295
```typescript { .api }
296
interface TocItem {
297
  no: number;
298
  active?: boolean;
299
  activeParent?: boolean;
300
  children: TocItem[];
301
  hasActiveParent?: boolean;
302
  level: number;
303
  titleLevel: number;
304
  path: string;
305
  hideInToc?: boolean;
306
  title?: string;
307
}
308
```
309

310
[Table of Contents System](./table-of-contents.md)