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:

Terminal
npm install pixeleye --save-dev

Terminal
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

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


export default config;

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


export default config;

Running the Pixeleye CLI

Terminal
npm run storybook & pixeleye storybook --url http://localhost:6006

Terminal
npm run storybook & pixeleye storybook --url http://localhost:6006

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

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

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

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

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

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

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

Was this page helpful?

Last modified: 2/29/2024