Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
use in your storybook
npm install storybook-addon-stylerscloud
Last updated 7 months ago
Downloads per week
Readme View on GitHub

Storybook Addon

A Storybook addon to use in your storybook

Getting started

1. Install

Install using npm/yarn

yarn add -D storybook-addon-stylerscloud

2. Register the addon in main.js

To configure storybook to include addon, insert storybook-addon-stylerscloud to addons field in .storybook/main.js

// .storybook/main.js
module.exports = {
  addons: ["storybook-addon-stylerscloud"],

3. Configure with project id

Configure addon with your project id in .storybook/preview.js (edit or create it)

// .storybook/preview.js
export const parameters = {
  stylersCloudProjectId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  stylersCloudNonProdDomains: [-1204607085, 1505998205],

You can find project id (stylersCloudProjectId) in client settings or in snippet we sent you.

If you want to use only this way add stylersCloudSupportMode: true to config and remove stylersCloudNonProdDomains (it is not needed).

Domain hashes

To get domain hashes required in stylersCloudNonProdDomains you can use this code:

  1. open domain where should run (eg.
  2. run code below in devtools console
  3. output of script is hash of domain you are currently on (insert it to stylersCloudNonProdDomains)
var domain = location.hostname.split(".").slice(-3).join(".");
function hash(s) {
  var h = 0,
    l = s.length,
  if (l == 0) return h;
  for (i = 0; i < l; i++) {
    h = (h << 5) - h + s.charCodeAt(i);
    h = h & h;
  return h;

exising defaults are

localhost = -1204607085 = 1505998205

Using in storybook

You can open window from top-right corner inside Canvas/Docs frame.


More about is start-up automating CSS. If you are not our client yet, feel free to contact us.

Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI