Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@khriztianmoreno/storybook-addon-raw-styled-component
A Storybook addon that extracts and displays compiled syntax-highlighted HTML & CSS
npm install @khriztianmoreno/storybook-addon-raw-styled-component
Last updated almost 4 years ago
0
Downloads per week
Readme View on GitHub

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

Join the community
6,561 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI