Tag Editor

Edit story and component tags from the Storybook sidebar

View on GithubNew to Storybook?Get started

Downloads per week

📔 Table of Contents

📔 Table of Contents
📦 Installation
👀 Usage
🐌 Limitations
👩🏽‍💻 Contributing
🆘 Support
✉️ Contact
💛 Acknowledgments
- Thanks
- Built With

📦 Installation

[!IMPORTANT] It also uses the sidebar context menu API from storybook#36316, which is not released yet. Until it ships, you need a canary build of Storybook.

// package.json
{
  "devDependencies": {
    "storybook": "https://pkg.pr.new/storybook@aa7e796",
    "@storybook/react-vite": "https://pkg.pr.new/@storybook/react-vite@aa7e796"
  }
}

This addon needs Storybook 11 and Node 22.12 or later. Install it in one step with the Storybook CLI:

pnpx storybook add storybook-addon-tag-editor

Or install it manually, by adding the development dependency and editing main.ts and preview.ts:

pnpm add -D storybook-addon-tag-editor

// .storybook/main.ts
import { defineMain } from '@storybook/react-vite/node';

export default defineMain({
  addons: ['storybook-addon-tag-editor'],
});

And in .storybook/preview.ts, alongside your other addons:

// .storybook/preview.ts
import { definePreview } from '@storybook/react-vite';
import tagEditor from 'storybook-addon-tag-editor';

export default definePreview({
  addons: [tagEditor()],
});

👀 Usage

Hover or focus a docs page, component or story in the sidebar, open its context menu, and pick Edit tags. Note that component autodocs do not have tags, so the menu option is missing for those entries.

The editor UI lets you add, remove and invert tags, and create new tags. It shows tags inherited from a parent component or the global preview configuration.

Please provide feedback if you or your users find it difficult to understand and use the editor UI.

🐌 Limitations

Dev Mode Only

Storybook renders the sidebar context menu in development only, so the addon does nothing in a built Storybook.

Static Tags and Default CSF Only

The addon reads and writes tags with csf-tools for CSF files and remark for MDX. Both need a literal array of strings.

Tags injected into stories via the Indexer API can be edited, but edits will not persist as they are not actually derived from CSF files. Custom CSF formats like Svelte CSF are not supported.

Formatting

csf-tools is unaware of your formatting and linting preferences. Run your formatter after editing tags in the UI and prior to committing your changes.

👩🏽‍💻 Contributing

Code of Conduct

Please read the Code of Conduct first.

Developer Certificate of Origin

To ensure that contributors are legally allowed to share the content they contribute under the license terms of this project, contributors must adhere to the Developer Certificate of Origin (DCO). All contributions made must be signed to satisfy the DCO. This is handled by a Pull Request check.

By signing your commits, you attest to the following:

The contribution was created in whole or in part by you and you have the right to submit it under the open source license indicated in the file; or

The contribution is based upon previous work that, to the best of your knowledge, is covered under an appropriate open source license and you have the right under that license to submit that work with modifications, whether created in whole or in part by you, under the same open source license (unless you are permitted to submit under a different license), as indicated in the file; or

The contribution was provided directly to you by some other person who certified 1., 2. or 3. and you have not modified it.

You understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information you submit with it, including your sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved.

Getting Started

This project uses PNPM as a package manager, and needs Node 22.12 or later.

See the installation instructions for PNPM
Run pnpm i

Useful commands

pnpm start builds the addon in watch mode and starts the local Storybook
pnpm build builds and packages the addon code
pnpm test runs the test suite, pnpm test:coverage adds a coverage report
pnpm check type-checks the source
pnpm lint runs ESLint and Prettier

Release System

This package auto-releases on pushes to main with semantic-release. No changelog is maintained and the version number in package.json is not synchronised.