New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook poleaxe
If there is storybook-axe, why not to put it on a stick?
npm install storybook-addon-poleaxe
Last updated 2 months ago
326
Downloads per week
Readme View on GitHub

Storybook Poleaxe


storybook a11y poleaxe

a11y axe 🪓 on a stick


npm downloads

Idea

Inspired by HTML-tree

Provides:

  • 👁 highlighting for Headings on the page, helping to understand their placement
  • 🌳 tree view of a page structure, creating a capability to "see" your page as a glossary
Screen Shot 2021-11-22 at 7 49 35 pm Screen Shot 2021-11-22 at 7 49 56 pm

Installation

// .storybook/main.js
module.exports = {
addons: [require.resolve('storybook-addon-poleaxe/preset')],
};

Configuration

You can enable or disable highlighting by default for a specific story via story parameters

HighlightedByDefault.parameters = {
  poleaxe: {
    highlighter: true,
  }
}

You can also control the behavior of MutationObserver

StaticStory.parameters = {
  poleaxe: {
    mutationObserver: true | false, // enabled of disabled for all
    mutationObserver: 'highlighter' | 'panel', // enabled only for some pieces
  }
}

See also

License

MIT

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI