use in your storybook

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.

Made by
Work with
    React native
    Web Components