storybook with twig for drupal

Storybook is great. I love using Storybook when building out component libraries or design systems, it’s a near-perfect tool for prototyping and testing components with all their different variations and states. Being able to do this in isolation from the actual implementation speeds up development and confidence that edge cases are covered. It’s primarily used with javascript components, like React.

With a little bit of configuration, you can use storybook for twig templates too. this can be handy if you work with Drupal, which uses twig for its theme layer. I would recommend using Wingsuit, as they’ve figured all of this out in a rock solid way. But if you aren’t sold on tailwind or have some esoteric requirements that mean you need to roll your own… here’s how to do that:

Storybook needs:

• @storybook/html base
• twing for twig support. twing is necessary for storybook, when Drupal consumes the components it will use twigphp.
• drupal-attribute and drupal-twig-extensions add javascript support for drupal-specific twig filters & functions. this wont matter much in storybook, but it will let you re-use templates between the two without breaking compilation.

Drupal needs:

• components module enabled, namespace defined
• library that includes design system js + styles

example repo