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
@stormid/storybook-html-addon-markup
This storybook addon adds a panel showing the rendered static HTML markup of a story.
npm install @stormid/storybook-html-addon-markup
Last updated about 3 years ago
33
Downloads per week
Readme View on GitHub

@stormid/storybook-html-addon-markup

This storybook addon adds a panel showing the rendered static HTML markup of a story.

Usage

Install

$ npm i @stormid/storybook-html-addon-markup --dev

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import '@stormid/storybook-html-addon-markup';

import the withMarkup decorator to add static markup to your stories.

For all stories:

import React from 'react';
import { storiesOf, addDecorator } from '@storybook/html';
import { withMarkup } from '@storybook/addon-a11y';

// should only be added once
// best place is in config.js
addDecorator(withMarkup);
configure(require.context('../src', true, /\.stories\.js$/), module);

Or per story:

import { h, Fragment } from 'preact';
import render from 'preact-render-to-string/jsx';
import MyComponent from '../../src/templates/components/my-component';
import { withMarkup } from '@storybook/addon-a11y';

export default { 
    title: 'My component',
    decorators: [withMarkup]
};

export const Default = () => render(<MyComponent />);
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