Storybook Addon RAW styled-component 💅🏻
This addon for Storybook adds a tab that displays the compiled HTML for each story. It uses highlight.js for syntax highlighting.
🌎 Demo
Storybook Addon RAW styled-component
🔥 Getting Started
npm i --save-dev @khriztianmoreno/storybook-addon-raw-styled-component
📝 Register addon
Create a file called addons.js
inside the .storybook
directory and add the
following content:
// .storybook/main.js
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: [
..., // Others addon
'@khriztianmoreno/storybook-addon-raw-styled-component/register'
],
};
👨🏼💻 Usage
Add withHTML
as a global decorator inside .storybook/config.js
:
// .storybook/preview.js
import { addDecorator } from '@storybook/html';
import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';
addDecorator(withHTML);
The HTML is formatted with Prettier. You can override the Prettier config
(except parser
and plugins
) by providing an object following the
Prettier API override format:
// .storybook/preview.js
import { addDecorator } from '@storybook/html';
import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';
addDecorator(
withHTML({
prettier: {
tabWidth: 2,
useTabs: false,
htmlWhitespaceSensitivity: 'strict',
},
}),
);
🎗 Supported frameworks
Right now, the addon can be used with React.js framework