0
# Storybook Addon Docs
1
2
Storybook Addon Docs automatically transforms component stories into comprehensive documentation. It provides two primary approaches: DocsPage for zero-configuration automatic documentation and MDX for full-control long-form documentation, supporting all major frontend frameworks with minimal setup.
3
4
## Package Information
5
6
- **Package Name**: @storybook/addon-docs
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @storybook/addon-docs`
10
11
## Core Imports
12
13
ESM imports:
14
15
```typescript
16
// Main addon entry
17
import { DocsRenderer } from "@storybook/addon-docs";
18
19
// Documentation blocks
20
import {
21
Canvas, Story, ArgsTable, Description, Controls,
22
DocsPage, DocsContainer, Primary, Source, Stories
23
} from "@storybook/addon-docs/blocks";
24
25
// Framework-specific imports
26
import { setCompodocJson } from "@storybook/addon-docs/angular";
27
import { setJSONDoc } from "@storybook/addon-docs/ember";
28
import HOC from "@storybook/addon-docs/svelte/HOC.svelte";
29
30
// MDX React shim
31
import { MDXProvider } from "@storybook/addon-docs/mdx-react-shim";
32
```
33
34
CommonJS:
35
36
```javascript
37
// Main addon entry
38
const { DocsRenderer } = require("@storybook/addon-docs");
39
40
// Documentation blocks
41
const {
42
Canvas, Story, ArgsTable, Description, Controls,
43
DocsPage, DocsContainer, Primary, Source, Stories
44
} = require("@storybook/addon-docs/blocks");
45
46
// Framework-specific imports
47
const { setCompodocJson } = require("@storybook/addon-docs/angular");
48
const { setJSONDoc } = require("@storybook/addon-docs/ember");
49
```
50
51
## Basic Usage
52
53
```typescript
54
// Configure in .storybook/main.js
55
export default {
56
addons: ["@storybook/addon-docs"],
57
docs: {
58
defaultName: "Docs",
59
autodocs: true
60
}
61
};
62
63
// Use in MDX files
64
import { Canvas, Story, ArgsTable } from "@storybook/addon-docs/blocks";
65
import * as ButtonStories from "./Button.stories";
66
67
<Canvas of={ButtonStories.Primary} />
68
<ArgsTable of={ButtonStories} />
69
```
70
71
## Architecture
72
73
The addon is built around several key systems:
74
75
- **Documentation Blocks**: 25+ React components for building docs pages (Canvas, Story, ArgsTable, etc.)
76
- **MDX Integration**: Enhanced MDX components with Storybook-specific functionality
77
- **Framework Support**: Dedicated integrations for React, Angular, Vue, Svelte, Web Components
78
- **Control System**: 10+ interactive controls for manipulating story arguments
79
- **Rendering Engine**: DocsRenderer class that handles content generation and display
80
- **Configuration Presets**: Webpack and Vite integration for seamless build setup
81
82
## Capabilities
83
84
### Documentation Blocks
85
86
Core building blocks for creating comprehensive documentation pages. These components automatically extract and display story metadata, source code, and interactive controls.
87
88
```typescript { .api }
89
// Core documentation blocks
90
function Canvas(props: CanvasProps): React.ReactElement;
91
function Story(props: StoryProps): React.ReactElement;
92
function ArgsTable(props: ArgsTableProps): React.ReactElement;
93
function Description(props: DescriptionProps): React.ReactElement;
94
95
interface CanvasProps {
96
of?: ModuleExport;
97
meta?: ModuleExports;
98
withToolbar?: boolean;
99
sourceState?: 'hidden' | 'shown' | 'none';
100
additionalActions?: Array<{title: string; onClick: () => void}>;
101
}
102
```
103
104
[Documentation Blocks](./blocks.md)
105
106
### Interactive Controls
107
108
Control components that provide interactive interfaces for manipulating story arguments in real-time, supporting all common input types with full type safety.
109
110
```typescript { .api }
111
function Controls(props: ControlsProps): React.ReactElement;
112
function BooleanControl(props: BooleanProps): React.ReactElement;
113
function ColorControl(props: ColorProps): React.ReactElement;
114
function NumberControl(props: NumberProps): React.ReactElement;
115
116
interface ControlsProps {
117
of?: Renderer['component'] | ModuleExports;
118
include?: PropDescriptor;
119
exclude?: PropDescriptor;
120
sort?: SortType;
121
}
122
```
123
124
[Interactive Controls](./controls.md)
125
126
### MDX Integration
127
128
Enhanced MDX components and utilities for creating long-form documentation with embedded stories and interactive elements.
129
130
```typescript { .api }
131
function CodeOrSourceMdx(props: {children: string}): React.ReactElement;
132
function AnchorMdx(props: {id: string; children: React.ReactNode}): React.ReactElement;
133
function HeaderMdx(props: {as: 'h1'|'h2'|'h3'|'h4'|'h5'|'h6'; children: React.ReactNode}): React.ReactElement;
134
135
const HeadersMdx: {
136
h1: React.FC<{children: React.ReactNode}>;
137
h2: React.FC<{children: React.ReactNode}>;
138
h3: React.FC<{children: React.ReactNode}>;
139
h4: React.FC<{children: React.ReactNode}>;
140
h5: React.FC<{children: React.ReactNode}>;
141
h6: React.FC<{children: React.ReactNode}>;
142
};
143
```
144
145
[MDX Integration](./mdx.md)
146
147
### Framework Integration
148
149
Framework-specific utilities and components for extracting documentation from Angular, Vue, Svelte, and Web Components, with specialized features for each ecosystem.
150
151
```typescript { .api }
152
// Angular integration
153
function setCompodocJson(compodocJson: any): void;
154
155
// Ember integration
156
function setJSONDoc(jsonDoc: any): void;
157
```
158
159
[Framework Integration](./frameworks.md)
160
161
### Configuration and Presets
162
163
Build tool integration and configuration options for seamless setup with popular bundlers and frameworks.
164
165
```typescript { .api }
166
interface DocsParameters {
167
docs?: {
168
autodocs?: boolean;
169
defaultName?: string;
170
disable?: boolean;
171
page?: React.ComponentType;
172
container?: React.ComponentType<DocsContainerProps>;
173
source?: Partial<SourceBlockParameters>;
174
canvas?: Partial<CanvasBlockParameters>;
175
};
176
}
177
```
178
179
[Configuration](./configuration.md)
180
181
## Types
182
183
```typescript { .api }
184
interface DocsTypes {
185
parameters: DocsParameters;
186
}
187
188
interface ModuleExports {
189
default?: any;
190
[key: string]: any;
191
}
192
193
type ModuleExport = any;
194
195
type PropDescriptor = string | string[] | RegExp;
196
197
type SortType = 'alpha' | 'requiredFirst' | 'none';
198
199
interface DocsContainerProps {
200
context: DocsContextProps;
201
children: React.ReactNode;
202
}
203
204
interface DocsContextProps {
205
id: string;
206
title: string;
207
name: string;
208
storyById: (id: string) => any;
209
componentStories: () => any[];
210
getStoryContext: (story: any) => any;
211
loadStory: (id: string) => Promise<any>;
212
}
213
214
interface CanvasBlockParameters {
215
/** Source code display configuration */
216
sourceState?: 'hidden' | 'shown' | 'none';
217
/** Story layout in canvas */
218
layout?: 'padded' | 'fullscreen' | 'centered';
219
/** Disable source snippets */
220
disable?: boolean;
221
/** Additional actions for toolbar */
222
additionalActions?: ActionItem[];
223
/** Custom source transformation */
224
withSource?: SourceType;
225
}
226
227
interface SourceBlockParameters {
228
/** Source code type */
229
type?: 'auto' | 'code' | 'dynamic';
230
/** Code language */
231
language?: SupportedLanguage;
232
/** Code formatting */
233
format?: boolean | 'dedent';
234
/** Exclude from source */
235
excludeDecorators?: boolean;
236
/** Source transformation function */
237
transform?: (code: string, context: any) => string;
238
}
239
240
interface ActionItem {
241
/** Action title */
242
title: string;
243
/** Click handler */
244
onClick: () => void;
245
/** Disabled state */
246
disabled?: boolean;
247
/** Icon component */
248
icon?: React.ComponentType;
249
}
250
251
type SourceType =
252
| 'auto'
253
| 'code'
254
| 'dynamic'
255
| 'none';
256
257
type SupportedLanguage =
258
| 'javascript' | 'typescript' | 'jsx' | 'tsx'
259
| 'html' | 'css' | 'scss' | 'json'
260
| 'markdown' | 'yaml' | 'bash';
261
```