Storybook Integration

Storybook is a JavaScript UI Component Development Environment. It is a great tool for testing your website and Pixeleye integrates seamlessly with it.

Quick start

Installation

We require the Pixeleye cli tool:

npm install pixeleye --save-dev

npm install pixeleye --save-dev

Get a project token

You can get a project token from the Pixeleye dashboard. You will need this to authenticate your project with Pixeleye.

See Getting Started for more information.

Create a pixeleye.config.{js,ts} file

/** @type {import('pixeleye').Config} */
const config = {
  token: "YOUR_PROJECT_TOKEN",
  // or
  // token: process.env.PIXELEYE_PROJECT_TOKEN,
  // ...
};


export default config;

/** @type {import('pixeleye').Config} */
const config = {
  token: "YOUR_PROJECT_TOKEN",
  // or
  // token: process.env.PIXELEYE_PROJECT_TOKEN,
  // ...
};


export default config;

Running the Pixeleye CLI

npm run storybook & pixeleye storybook http://localhost:6006

npm run storybook & pixeleye storybook http://localhost:6006

We recommend adding the something like this to your package.json file:

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "pixeleye": "npm run storybook & pixeleye storybook http://localhost:6006"
  }
}

{
  "scripts": {
    "storybook": "start-storybook -p 6006",
    "pixeleye": "npm run storybook & pixeleye storybook http://localhost:6006"
  }
}

You should run this command in your ci/cd pipeline.

External storybook

You can enter any url to capture a storybook. This is useful if you have a public storybook or a storybook running on a different server.

pixeleye storybook https://example.com/storybook

pixeleye storybook https://example.com/storybook

Dark/Light, Mobile/Desktop, and more

We support capturing multiple variants of your components. As long as there's a url parameter for it, we can capture it.

Dark/Light mode example

Using the official storybook theme addon

/** @type {import('pixeleye').Config}*/
const config = {
  token: "YOUR_PROJECT_TOKEN",
  storybookOptions: {
    variants: [
      {
        name: "Dark",
        params: "globals=theme:dark",
      },
      {
        name: "Light",
        params: "globals=theme:light",
      },
    ],
  }
}

/** @type {import('pixeleye').Config}*/
const config = {
  token: "YOUR_PROJECT_TOKEN",
  storybookOptions: {
    variants: [
      {
        name: "Dark",
        params: "globals=theme:dark",
      },
      {
        name: "Light",
        params: "globals=theme:light",
      },
    ],
  }
}

Specific story config

You can also specify specific config options for stores.

In your story file add a pixeleye object to the parameters object.

import type { Meta } from "@storybook/react";
import type { StoryParams } from "pixeleye";
import Button from "./button";

const meta: Meta<typeof Button> & StoryParams = {
  component: Button,
  title: "UI/Button",
  parameters: {
    pixeleye: {
      skip: true,
    },
  },
};

import type { Meta } from "@storybook/react";
import type { StoryParams } from "pixeleye";
import Button from "./button";

const meta: Meta<typeof Button> & StoryParams = {
  component: Button,
  title: "UI/Button",
  parameters: {
    pixeleye: {
      skip: true,
    },
  },
};

You can also define this on a global level in your .storybook/preview.js or on a per component level in the parameters object.

Config options

• skip - Skip capturing this story
• selector - A CSS selector to capture a specific element in the story. If you want to just capture the story, try #storybook-root > *