Skip to content

Docs: Rewrite frameworks to focus on new users #33155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
valentinpalkovic merged 4 commits into from
Nov 26, 2025
Merged

Docs: Rewrite frameworks to focus on new users #33155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
21d04b2
Docs: Rewrite frameworks to focus on new users
Sidnioulz Nov 24, 2025
8ef3ddf
Update docs/get-started/frameworks/react-native-web-vite.mdx
Sidnioulz Nov 25, 2025
44cc381
Docs: Remove FAQ item relating to Storybook 6
Sidnioulz Nov 25, 2025
5f31846
Docs: Make version compat more visible in framework docs
Sidnioulz Nov 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 93 additions & 122 deletions docs/get-started/frameworks/angular.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,102 +6,31 @@ sidebar:
title: Angular
---

Storybook for Angular is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It includes:
Storybook for Angular is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Angular](https://angular.io/) applications. It uses Angular builders and integrates with [Compodoc](https://compodoc.app/) to provide automatic documentation generation.

* 🧱 Uses Angular builders
* 🎛️ Compodoc integration
* 💫 and more!
## Install

## Requirements
To install Storybook in an existing Angular project, run this command in your project's root directory:

* Angular ≥ 18.0 \< 21.0
* Webpack ≥ 5.0
<CodeSnippets path="create-command.md" variant="new-users" />

## Getting started
You can then get started [writing stories](/docs/get-started/whats-a-story/), [running tests](/docs/writing-tests/) and [documenting your components](/docs/writing-docs/). For more control over the installation process, refer to the [installation guide](/docs/install/).

### In a project without Storybook
### Compatible versions

Follow the prompts after running this command in your Angular project's root directory:

{/* prettier-ignore-start */}

<CodeSnippets path="create-command.md" />

{/* prettier-ignore-end */}

[More on getting started with Storybook.](../install.mdx)

### In a project with Storybook

This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:

{/* prettier-ignore-start */}

<CodeSnippets path="storybook-upgrade.md" />

{/* prettier-ignore-end */}

#### Automatic migration

When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/angular`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.

#### Manual migration

First, install the framework:

{/* prettier-ignore-start */}

<CodeSnippets path="angular-install.md" />

{/* prettier-ignore-end */}

Then, update your `.storybook/main.js|ts` to change the framework property:

{/* prettier-ignore-start */}

<CodeSnippets path="angular-add-framework.md" />

{/* prettier-ignore-end */}

Finally, update your `angular.json` to include the Storybook builder:

```jsonc title="angular.json"
{
"projects": {
"your-project": {
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
// The path to the storybook config directory
"configDir": ".storybook",
// The build target of your project
"browserTarget": "your-project:build",
// The port you want to start Storybook on
"port": 6006
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/schema.json
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "your-project:build",
"outputDir": "dist/storybook/your-project"
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/build-storybook/schema.json
}
}
}
}
}
}
```
<GetStartedVersions versions={[{
name: 'Angular',
range: '≥ 18.0 < 21.0',
icon: '/images/logos/renderers/logo-angular.svg'
}, {
name: 'Webpack',
range: '5',
icon: '/images/logos/builders/webpack.svg'
}]} />

## Run Storybook

To run Storybook for a particular project, please run the following:
To run Storybook for a particular project, run the following:

```sh
ng run <your-project>:storybook
Expand All @@ -115,15 +44,19 @@ ng run <your-project>:build-storybook

You will find the output in the configured `outputDir` (default is `dist/storybook/<your-project>`).

## Setup Compodoc
## Configure

To make the most out of Storybook in your Angular project, you can set up Compodoc integration and Storybook [decorators](/docs/writing-stories/decorators/) based on your project needs.

### Compodoc

You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are elements you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).

### Automatic setup
#### Automatic setup

When installing Storybook via `npx storybook@latest init`, you can set up Compodoc automatically.

### Manual setup
#### Manual setup

If you have already installed Storybook, you can set up Compodoc manually.

Expand Down Expand Up @@ -187,7 +120,7 @@ const preview: Preview = {};
export default preview;
```

## `applicationConfig` decorator
### Application-wide providers

If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.

Expand Down Expand Up @@ -230,7 +163,7 @@ export const WithCustomApplicationProvider: Story = {
}
```

## `moduleMetadata` decorator
### Angular dependencies

If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../../writing-stories/decorators.mdx) either for all stories of a component or for individual stories.

Expand Down Expand Up @@ -270,66 +203,104 @@ export const WithCustomProvider: Story = {
};
```


## FAQ

### How do I migrate to an Angular Storybook builder?
### How do I manually install the Angular framework?

The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
The easiest way to install the Angular framework is to run the upgrade command, but you can also set it up manually. First, install the framework:

You can run `npx storybook@latest automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.
{/* prettier-ignore-start */}

#### Do you have only one Angular project in your workspace?
<CodeSnippets path="angular-install.md" />

First, go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).
{/* prettier-ignore-end */}

Second, adjust your `package.json` script section. Usually, it will look like this:
Then, update your `.storybook/main.js|ts` to change the framework property:

```jsonc title="package.json"
{
"scripts": {
"storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
"build-storybook": "build-storybook" // or `storybook build`
}
}
```
{/* prettier-ignore-start */}

<CodeSnippets path="angular-add-framework.md" />

{/* prettier-ignore-end */}

Now, you can run Storybook with `ng run <your-project>:storybook` and build it with `ng run <your-project>:build-storybook`. Adjust the scripts in your `package.json` accordingly.
Finally, update your `angular.json` to include the Storybook builder:

```json title="package.json"
```jsonc title="angular.json"
{
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook"
"projects": {
"your-project": {
"architect": {
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
// The path to the storybook config directory
"configDir": ".storybook",
// The build target of your project
"browserTarget": "your-project:build",
// The port you want to start Storybook on
"port": 6006
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/schema.json
}
},
"build-storybook": {
"builder": "@storybook/angular:build-storybook",
"options": {
"configDir": ".storybook",
"browserTarget": "your-project:build",
"outputDir": "dist/storybook/your-project"
// More options available, documented here:
// https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/build-storybook/schema.json
}
}
}
}
}
}
```

Also, `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If we're running `compodoc` in your `package.json` scripts like this:
### How do I migrate to an Angular Storybook builder?

```json title="package.json"
The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.

You can run `npx storybook@latest automigrate` to let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.

#### With a single project in your Angular workspace

Go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).

Then, adjust your `package.json` script section, to replace the existing Storybook scripts with the Angular CLI commands:

```diff title="package.json"
{
"scripts": {
"docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
"storybook": "npm run docs:json && start-storybook -p 6006",
"build-storybook": "npm run docs:json && build-storybook"
- "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
- "build-storybook": "build-storybook" // or `storybook build`
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
Comment on lines +280 to 282

@coderabbitai coderabbitai Bot Nov 24, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix malformed package.json diff entries.

The package.json migration example contains duplicate script entries. Lines 271–273 show three lines removing "storybook", but the third line should reference "build-storybook" instead of duplicating "storybook".

Apply this diff to correct the package.json example:

 {
   "scripts": {
-    "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
-    "storybook": "ng run <project-name:storybook",
-    "storybook": "ng run <project-name:storybook",
+    "storybook": "ng run <project-name>:storybook",
+    "build-storybook": "ng run <project-name>:build-storybook",
   }
 }

Also note that the project name syntax is incomplete (missing > after <project-name).

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In docs/get-started/frameworks/angular.mdx around lines 271 to 273, the
package.json migration example contains duplicate "storybook" script entries and
an incomplete project-name token; update the third duplicated line to
"build-storybook" and ensure the project name syntax is closed (use
"<project-name>" not "<project-name") so the three scripts read: one storybook
script with ng run <project-name>:storybook, a second storybook removal/update
as appropriate, and a build-storybook script using ng run
<project-name>:build-storybook.

}
```

Change it to:
Note that `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If you were running `compodoc` in your `package.json` scripts, you can remove the related script:

```json title="package.json"
```diff title="package.json"
{
"scripts": {
"storybook": "ng run <project-name>:storybook",
"build-storybook": "ng run <project-name>:build-storybook"
- "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
- "storybook": "npm run docs:json && start-storybook -p 6006",
- "build-storybook": "npm run docs:json && build-storybook"
+ "storybook": "ng run <project-name:storybook",
+ "storybook": "ng run <project-name:storybook",
}
}
```

#### I have multiple projects in my Angular workspace

In this case, you have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook. Please note that each project should have a dedicated `.storybook` folder placed at the project's root.
#### With multiple projects in your Angular workspace

In case you have multiple projects, you will have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook with. Please note that each project should have a dedicated `.storybook` folder placed at the project's root directory.

You can run `npx storybook@latest init` sequentially for each project to set up Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.

Expand Down
11 changes: 10 additions & 1 deletion docs/get-started/frameworks/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,13 @@ sidebar:
title: Frameworks
---

<HomeRenderers />

## Supported frameworks

<HomeRenderers />

## Community-maintained frameworks

Storybook includes an active community that supports additional frameworks and libraries. These community-maintained frameworks are actively developed and maintained by community contributors.

<CommunityRenderers />
Loading
Loading