How can we help you?

With Stark's Storybook Addon, you can quickly run WCAG Audits right from within your Storybook panels, and test your designs against all of Stark's vision simulations.

---

Installing the Add-on

Run the following command to install the addon in your Storybook repo:

npm install -D storybook-addon-stark

Then include Stark's Storybook Addon in your addons list:

// .storybook/main.ts
export default {
  addons: ["storybook-addon-stark"],
};

---

Using the Addon

There are two main ways to use the Stark addon:

1. At the top of the Storybook preview, click the Stark logo and select a Vision Simulation from the dropdown.
2. To remove the simulation, simply select Reset Vision Simulation from the dropdown.

1. In the Storybook Panels, select Stark.
2. Stark will automatically audit the Storybook preview frame for accessibility issues.
3. Change between Violations, Potentials, and Passed test results by using the tabs at the top.
4. More information on how to fix issues can be found by clicking the "WCAG Explained" links below each code block.

---

Using the CLI

The CLI tool in the Stark Storybook addon allows you to push complete WCAG audit results up to Stark. This is typically much quicker than setting up a CI/CD workflow, as Stark will just automatically iterate through all of your stories and upload the results. It's built right into the addon, so if you followed the installation steps above, you can get started:

1. In the project that you'd like Storybook results to be sent to, scroll down to where it says Add Storybook.
2. Upon clicking that, you'll see two fields: a Stark token you'll need when you run the CLI tool and a name you want to give the asset for easy reference.
3. Once you've copied out that token and hit the Save Storybook Integration button, we can jump over to using the CLI tool.

1. Back in your terminal, simply run the following command, making sure to put in your unique project token:
   

   npx stark-scan-storybook --stark-token stark_1234567890

2. Running that command will automatically build your Storybook and iterate through each of your stories and run a scan. Don't worry, it'll only scan your story frame and not all of the Storybook UI. It may ask you to install Playwright (to run the scans) if you don't have it installed already:
   

   npx playwright install chromium

3. Reminder that you can put your Stark token into an environment variable (STARK_TOKEN).

Options
You can pass in the following (optional) parameters:

• --help: View some help instructions as well as all of the parameters you can pass in.
• --storybook-script: Your custom script cmd if it differs from the default. (Default: storybook build)
• --out-dir: Built Storybook output directory (Default: storybook-static)
• --skip-build: Skip the build step and use an existing out-dir. Helpful if you've already built your Storybook previously in other scripts/runs.
• --port: Static server port (default: auto-detect)
• --silent: Suppress all output except errors

---

Have any questions about using our Storybook Addon? Suggestions or feedback? Don’t hesitate to reach out to us at support@getstark.co.