Storybook for Azure DevOps

Your team's UI components, documented and running, right inside Azure DevOps.

Storybook is where teams build, document and review UI components in isolation. This extension brings it into Azure DevOps: every project gets a Designs hub that shows the project's Storybook live, next to its boards, repos and pipelines. There's no extra hosting and no extra sign-in. The Storybook is read straight from your Azure Repos, with your own permissions.

Why teams use it

One place for your components. Designers, developers, testers and product owners with access to your code browse the same living component library, without cloning a repository or running anything locally.

Versioned with your code. The hub reads the Storybook build straight from your repository, at the latest commit of its branch. There's no separate deployment to drift out of date: push a new build and everyone sees it.

Runs with your permissions. The Storybook is read from Azure Repos as the signed-in user and nothing is uploaded anywhere. People without access to the repository don't see it.

Link straight to a story. The address in your browser follows the story or docs page you have open. Put it in a work item, a pull request or a chat, and it opens the Designs hub on that page.

Matches your Azure DevOps theme. In a dark Azure DevOps theme the Storybook is dark too, and it switches along when you change the theme.

Up and running in one click. No Storybook yet? Create a ready-to-run one with a design system, components and guidelines, or point to the one already in your code.

A workflow around one Storybook

Every step works from the same Storybook. A product owner plans the work in Azure Boards, including the design. A designer designs it in the project Storybook, with its design system, components and guidelines. A developer builds it with those components and stories in VS Code and Azure Repos, and a tester tests every state in Azure Test Plans.

Review, deploy, run. A reviewer checks the code and the new stories in a pull request, and Azure Pipelines deploys the release to production. Feedback becomes the next work item in Azure Boards, and the whole team always sees the latest Storybook in the Designs hub.

What's in the project Storybook

Start with a design system, not a blank page. Create project Storybook gives your team what a component library needs on day one: a design system, ready-made components and guidelines that show how to use them. It's built on Storybook's own design system, so it looks good from the first click, and it's yours to make your own.

Design System

Your brand in one place. Colour, typography, iconography and layouts, all driven by a single tokens file. Change a colour or a font size once and every page and component follows, in the light and the dark theme.

Components

Ready to use, ready to copy. Ten essentials, from buttons and text fields to alerts, badges and avatars, built on native, accessible HTML. Every state has a story, and every component follows your Azure DevOps theme.

Guidelines

How to get it right. Practical do's and don'ts with live examples for accessibility, content design, design tokens, onboarding and waiting states, so the whole team builds the same way.

Get started in a minute

1. Open Designs in your project.

2. Add the project's Storybook:

   • Create project Storybook creates a <project>.Storybook repository with a ready-to-run Storybook (React, Vite and TypeScript) with the design system, components and guidelines above. It's already built, so you can browse it straight away.
     
   • Publish code as Storybook uses a Storybook that's already in one of your repositories. Pick the repository, branch and folder, just like Publish code as wiki, and commit its storybook-static build too (see below).

3. Browse your components in the Designs hub.

Each project has one Storybook, so everyone looks at the same component library.

Light or dark, just like Azure DevOps

The Storybook follows the theme you picked in Azure DevOps. In a dark theme it's dark too, and when you switch themes in your Azure DevOps settings it switches along, staying on the story you had open.

Storybook's interface takes its colours from your Azure DevOps theme, so it looks like part of Azure DevOps. This works for every Storybook in the hub, also one you publish from your own code, without changing it.

Keep it up to date

The hub shows the built Storybook (the storybook-static folder) committed to the repository. If your .gitignore lists storybook-static (storybook init adds it), remove that line once so the build can be committed. After changing components or stories, build it and commit the result:

npm run build-storybook
git add storybook-static
git commit -m "Build Storybook"

The Designs hub shows the new build as soon as the commit is pushed.

What you need

• An Azure DevOps Services organization.
  
• Permission to create repositories in the project, for Create project Storybook.
  
• Basic access or higher, and Read permission on the Storybook's repository, for everyone who views it. Stakeholder access doesn't include Azure Repos, so Designs doesn't appear for Stakeholders.
  
• A current version of Microsoft Edge, Google Chrome, Mozilla Firefox or Safari.
  
• Stories that mock requests with Mock Service Worker (msw-storybook-addon), or that register their own service worker, can't run in the Designs hub.

Permissions

The extension asks for Code (read, write & manage). It uses it to create the project's Storybook repository and to read the built Storybook from your repositories. It acts as the signed-in user, so it can't see or change anything that user can't.

The Storybook build committed to your repository runs inside the Designs hub with the same access as the person viewing it. Treat pushing to the Storybook's branch like changing the extension itself: protect that branch with a branch policy that requires a reviewer.

Learn more

• Storybook documentation
• Writing stories