Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Drupal Addon
Storybook addon to facilitate integrating Storybook with Drupal projects.
npm install @lullabot/storybook-drupal-addon
Last updated 3 months ago
Downloads per week
Readme View on GitHub

Drupal Storybook Addon

A library for best-practice Drupal integration addons in Storybook:

  • Easy-to-use Drupal integration
  • Simple drop-down menu
  • URL-linkable state for sharing


Follow the instructions in the documentation for the Drupal module CL Server.

Start Storybook

Start the development server Storybook server:

yarn storybook

Tips for writing YML stories

Storybook addon authors

As an addon author, you can use this library by adding it as a dependency and adding the following to your src/manager.ts and src/preview.ts files:


export * from '@lullabot/storybook-drupal-addon/manager';


import type { Renderer, ProjectAnnotations } from '@storybook/types';
import drupalPreview from '@lullabot/storybook-drupal-addon/preview';
import { withYourDrupalDecorator } from './withYourDecorator';

// @ts-ignore
const drupalDecorators = drupalPreview?.decorators || [];

const preview: ProjectAnnotations<Renderer> = {
    decorators: [...drupalDecorators, withYourI18nDecorator],

export default preview;

The currently selected drupal theme is available in the drupalTheme global, so you can access it in a decorator using the following snippet:

import { MyProvider } from 'your-drupal-library';
import { useGlobals } from '@storybook/manager-api';

const myDecorator = (story, context) => {
  const [{drupalTheme}] = useGlobals();
  return <MyProvider drupalTheme={drupalTheme}>;
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI