0
# Framework Integration
1

2
Storybook provides comprehensive support for multiple frontend frameworks through specialized packages and builders. Each framework package includes optimized configuration, type definitions, and tooling integration.
3

4
## Capabilities
5

6
### React Integration
7

8
Complete React support with TypeScript integration, JSX handling, and React-specific features.
9

10
```typescript { .api }
11
// @storybook/react - Core React renderer
12
import type { Meta, StoryObj } from "@storybook/react";
13
import type { ReactRenderer } from "@storybook/react";
14

15
// React-specific types
16
interface ReactFramework {
17
  component: React.ComponentType<any>;
18
  storyResult: React.ReactElement<any>;
19
}
20

21
// Meta configuration for React components
22
type Meta<T = {}> = Meta<ReactRenderer, T>;
23
type StoryObj<T = {}> = StoryObj<ReactRenderer, T>;
24
```
25

26
**Usage Example:**
27

28
```typescript
29
import type { Meta, StoryObj } from "@storybook/react";
30
import { Button } from "./Button";
31

32
const meta: Meta<typeof Button> = {
33
  title: "Example/Button",
34
  component: Button,
35
  parameters: {
36
    layout: "centered",
37
  },
38
  argTypes: {
39
    backgroundColor: { control: "color" },
40
  },
41
};
42

43
export default meta;
44
type Story = StoryObj<typeof meta>;
45

46
export const Primary: Story = {
47
  args: {
48
    primary: true,
49
    label: "Button",
50
  },
51
};
52
```
53

54
### React + Vite Integration
55

56
Optimized React support with Vite builder for fast development and building.
57

58
```typescript { .api }
59
// @storybook/react-vite - React with Vite builder
60
interface ReactViteFramework extends ReactFramework {
61
  builder: "@storybook/builder-vite";
62
}
63

64
// Vite-specific configuration
65
interface ViteConfig {
66
  viteFinal?: (config: ViteConfig, options: Options) => ViteConfig | Promise<ViteConfig>;
67
}
68
```
69

70
**Configuration Example:**
71

72
```typescript
73
// .storybook/main.ts
74
import type { StorybookConfig } from "@storybook/react-vite";
75

76
const config: StorybookConfig = {
77
  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
78
  addons: ["@storybook/addon-essentials"],
79
  framework: {
80
    name: "@storybook/react-vite",
81
    options: {},
82
  },
83
  async viteFinal(config) {
84
    // Customize Vite config
85
    return {
86
      ...config,
87
      define: {
88
        ...config.define,
89
        __APP_VERSION__: JSON.stringify("1.0.0"),
90
      },
91
    };
92
  },
93
};
94

95
export default config;
96
```
97

98
### Vue 3 Integration
99

100
Complete Vue 3 support with Composition API, TypeScript, and Single File Components.
101

102
```typescript { .api }
103
// @storybook/vue3 - Vue 3 renderer
104
import type { Meta, StoryObj } from "@storybook/vue3";
105
import type { Vue3Renderer } from "@storybook/vue3";
106

107
// Vue 3 specific types
108
interface Vue3Framework {
109
  component: any; // Vue component
110
  storyResult: any; // Vue render result
111
}
112

113
type Meta<T = {}> = Meta<Vue3Renderer, T>;
114
type StoryObj<T = {}> = StoryObj<Vue3Renderer, T>;
115
```
116

117
**Usage Example:**
118

119
```typescript
120
import type { Meta, StoryObj } from "@storybook/vue3";
121
import MyButton from "./MyButton.vue";
122

123
const meta: Meta<typeof MyButton> = {
124
  title: "Example/MyButton",
125
  component: MyButton,
126
  argTypes: {
127
    size: {
128
      control: { type: "select" },
129
      options: ["small", "medium", "large"],
130
    },
131
    color: { control: "color" },
132
  },
133
};
134

135
export default meta;
136
type Story = StoryObj<typeof meta>;
137

138
export const Primary: Story = {
139
  args: {
140
    label: "Button",
141
    size: "medium",
142
    color: "#1976d2",
143
  },
144
};
145
```
146

147
### Angular Integration
148

149
Full Angular support with dependency injection, modules, and Angular-specific features.
150

151
```typescript { .api }
152
// @storybook/angular - Angular renderer
153
import type { Meta, StoryObj } from "@storybook/angular";
154
import type { AngularRenderer } from "@storybook/angular";
155

156
// Angular-specific types
157
interface AngularFramework {
158
  component: any; // Angular component
159
  storyResult: any; // Angular component result
160
}
161

162
type Meta<T = {}> = Meta<AngularRenderer, T>;
163
type StoryObj<T = {}> = StoryObj<AngularRenderer, T>;
164

165
// Angular module configuration
166
interface ModuleMeta extends Meta {
167
  moduleMetadata?: NgModule;
168
}
169
```
170

171
**Usage Example:**
172

173
```typescript
174
import type { Meta, StoryObj } from "@storybook/angular";
175
import { ButtonComponent } from "./button.component";
176

177
const meta: Meta<ButtonComponent> = {
178
  title: "Example/Button",
179
  component: ButtonComponent,
180
  argTypes: {
181
    variant: {
182
      control: { type: "radio" },
183
      options: ["primary", "secondary", "danger"],
184
    },
185
  },
186
  moduleMetadata: {
187
    imports: [CommonModule],
188
    providers: [ButtonService],
189
  },
190
};
191

192
export default meta;
193
type Story = StoryObj<ButtonComponent>;
194

195
export const Primary: Story = {
196
  args: {
197
    label: "Button",
198
    variant: "primary",
199
  },
200
};
201
```
202

203
### Svelte Integration
204

205
Svelte support with reactive statements, stores, and Svelte-specific features.
206

207
```typescript { .api }
208
// @storybook/svelte - Svelte renderer
209
import type { Meta, StoryObj } from "@storybook/svelte";
210
import type { SvelteRenderer } from "@storybook/svelte";
211

212
// Svelte-specific types
213
interface SvelteFramework {
214
  component: any; // Svelte component
215
  storyResult: any; // Svelte render result
216
}
217

218
type Meta<T = {}> = Meta<SvelteRenderer, T>;
219
type StoryObj<T = {}> = StoryObj<SvelteRenderer, T>;
220
```
221

222
**Usage Example:**
223

224
```typescript
225
import type { Meta, StoryObj } from "@storybook/svelte";
226
import Button from "./Button.svelte";
227

228
const meta: Meta<Button> = {
229
  title: "Example/Button",
230
  component: Button,
231
  argTypes: {
232
    variant: { control: "select", options: ["primary", "secondary"] },
233
    size: { control: "select", options: ["sm", "md", "lg"] },
234
  },
235
};
236

237
export default meta;
238
type Story = StoryObj<typeof meta>;
239

240
export const Primary: Story = {
241
  args: {
242
    variant: "primary",
243
    size: "md",
244
    children: "Button",
245
  },
246
};
247
```
248

249
### Web Components Integration
250

251
Support for Web Components and Custom Elements with lit-html rendering.
252

253
```typescript { .api }
254
// @storybook/web-components - Web Components renderer
255
import type { Meta, StoryObj } from "@storybook/web-components";
256
import type { WebComponentsRenderer } from "@storybook/web-components";
257

258
// Web Components specific types
259
interface WebComponentsFramework {
260
  component: string; // Tag name
261
  storyResult: TemplateResult; // lit-html template
262
}
263

264
type Meta<T = {}> = Meta<WebComponentsRenderer, T>;
265
type StoryObj<T = {}> = StoryObj<WebComponentsRenderer, T>;
266
```
267

268
**Usage Example:**
269

270
```typescript
271
import type { Meta, StoryObj } from "@storybook/web-components";
272
import { html } from "lit";
273
import "./my-button.js";
274

275
const meta: Meta = {
276
  title: "Example/MyButton",
277
  component: "my-button",
278
  argTypes: {
279
    variant: { control: "select", options: ["primary", "secondary"] },
280
    disabled: { control: "boolean" },
281
  },
282
};
283

284
export default meta;
285
type Story = StoryObj;
286

287
export const Primary: Story = {
288
  render: (args) => html`
289
    <my-button
290
      variant=${args.variant}
291
      ?disabled=${args.disabled}
292
    >
293
      ${args.label}
294
    </my-button>
295
  `,
296
  args: {
297
    variant: "primary",
298
    label: "Button",
299
    disabled: false,
300
  },
301
};
302
```
303

304
## Builder Packages
305

306
### Vite Builder
307

308
Fast development and building with Vite's optimized bundling and HMR.
309

310
```typescript { .api }
311
// @storybook/builder-vite - Vite builder
312
interface ViteBuilder {
313
  name: "@storybook/builder-vite";
314
  options: ViteBuilderOptions;
315
}
316

317
interface ViteBuilderOptions {
318
  viteConfigPath?: string;
319
  viteFinal?: (config: ViteConfig) => ViteConfig | Promise<ViteConfig>;
320
}
321

322
// Vite configuration hook
323
function viteFinal(config: ViteConfig, options: Options): ViteConfig | Promise<ViteConfig>;
324
```
325

326
**Configuration Example:**
327

328
```typescript
329
// .storybook/main.ts
330
export default {
331
  framework: {
332
    name: "@storybook/react-vite",
333
    options: {
334
      builder: {
335
        viteConfigPath: "./vite.config.ts",
336
      },
337
    },
338
  },
339
  async viteFinal(config, { configType }) {
340
    if (configType === "DEVELOPMENT") {
341
      // Development-specific config
342
      config.server = {
343
        ...config.server,
344
        port: 3000,
345
      };
346
    }
347
    
348
    return config;
349
  },
350
};
351
```
352

353
### Webpack 5 Builder
354

355
Production-ready building with Webpack 5's advanced features and optimizations.
356

357
```typescript { .api }
358
// @storybook/builder-webpack5 - Webpack 5 builder
359
interface Webpack5Builder {
360
  name: "@storybook/builder-webpack5";
361
  options: Webpack5BuilderOptions;
362
}
363

364
interface Webpack5BuilderOptions {
365
  lazyCompilation?: boolean;
366
  fsCache?: boolean;
367
}
368

369
// Webpack configuration hook
370
function webpackFinal(config: WebpackConfig, options: Options): WebpackConfig | Promise<WebpackConfig>;
371
```
372

373
**Configuration Example:**
374

375
```typescript
376
// .storybook/main.ts
377
export default {
378
  framework: {
379
    name: "@storybook/react-webpack5",
380
    options: {
381
      builder: {
382
        lazyCompilation: true,
383
        fsCache: true,
384
      },
385
    },
386
  },
387
  async webpackFinal(config, { configType }) {
388
    // Add custom webpack configuration
389
    config.module.rules.push({
390
      test: /\.scss$/,
391
      use: ["style-loader", "css-loader", "sass-loader"],
392
    });
393
    
394
    return config;
395
  },
396
};
397
```
398

399
## Framework Configuration
400

401
### Main Configuration Types
402

403
Framework-specific configuration interfaces for the main Storybook config.
404

405
```typescript { .api }
406
// Framework-specific StorybookConfig types
407
import type { StorybookConfig as ReactConfig } from "@storybook/react-vite";
408
import type { StorybookConfig as Vue3Config } from "@storybook/vue3-vite";
409
import type { StorybookConfig as AngularConfig } from "@storybook/angular";
410
import type { StorybookConfig as SvelteConfig } from "@storybook/svelte-vite";
411

412
// Base configuration interface
413
interface BaseStorybookConfig {
414
  stories: string[];
415
  addons: (string | { name: string; options?: any })[];
416
  framework: FrameworkConfig;
417
  typescript?: TypescriptConfig;
418
  features?: Features;
419
  core?: CoreConfig;
420
}
421

422
interface FrameworkConfig {
423
  name: string;
424
  options?: Record<string, any>;
425
}
426

427
interface TypescriptConfig {
428
  check?: boolean;
429
  reactDocgen?: "react-docgen-typescript" | "react-docgen" | false;
430
  reactDocgenTypescriptOptions?: any;
431
}
432
```
433

434
### Framework-Specific Features
435

436
Each framework package provides specialized features and integrations.
437

438
```typescript { .api }
439
// React-specific features
440
interface ReactFeatures {
441
  buildStoriesJson?: boolean;
442
  storyStoreV7?: boolean;
443
  modernInlineRender?: boolean;
444
  reactStrictMode?: boolean;
445
}
446

447
// Angular-specific features  
448
interface AngularFeatures {
449
  buildStoriesJson?: boolean;
450
  compodoc?: boolean;
451
  compodocArgs?: string[];
452
}
453

454
// Vue-specific features
455
interface VueFeatures {
456
  buildStoriesJson?: boolean;
457
  vueDocgen?: boolean;
458
}
459
```
460

461
## Integration Patterns
462

463
### Multi-Framework Support
464

465
Supporting multiple frameworks in the same repository:
466

467
```typescript
468
// .storybook-react/main.ts
469
export default {
470
  stories: ["../src/**/*.react.stories.@(js|jsx|ts|tsx)"],
471
  framework: { name: "@storybook/react-vite" },
472
};
473

474
// .storybook-vue/main.ts  
475
export default {
476
  stories: ["../src/**/*.vue.stories.@(js|ts)"],
477
  framework: { name: "@storybook/vue3-vite" },
478
};
479

480
// package.json scripts
481
{
482
  "storybook:react": "storybook dev --config-dir .storybook-react",
483
  "storybook:vue": "storybook dev --config-dir .storybook-vue"
484
}
485
```
486

487
### Custom Framework Configuration
488

489
Creating custom framework configurations:
490

491
```typescript
492
// custom-framework.ts
493
import type { StorybookConfig } from "@storybook/core-common";
494

495
export interface CustomFrameworkConfig extends StorybookConfig {
496
  framework: {
497
    name: "./custom-framework";
498
    options: {
499
      customOption: boolean;
500
    };
501
  };
502
}
503

504
// Usage in main.ts
505
const config: CustomFrameworkConfig = {
506
  framework: {
507
    name: "./custom-framework",
508
    options: {
509
      customOption: true,
510
    },
511
  },
512
};
513
```
514

515
### Framework Migration Helpers
516

517
Utilities for migrating between framework versions:
518

519
```bash
520
# Migrate from Create React App to Vite
521
storybook migrate cra-to-vite
522

523
# Migrate from Webpack to Vite
524
storybook migrate webpack5-to-vite
525

526
# Migrate from Vue 2 to Vue 3
527
storybook migrate vue2-to-vue3
528
```