storybook-addon-twig-wordpressTwig patterns in Storybook

Render WordPress/Timber Twig templates in the browser with @namespace resolution, parent/child theme cascade, and full WordPress context.

Get Started

View on GitHub

🌿

Twig in the browser

Renders _*.tpl.twig pattern templates using twig.js — no PHP server required. The same templates that run in WordPress work in Storybook.

🔗

@namespace resolution

Map any namespace alias to a pattern directory — {% include '@components/button/_button.twig' %} and {% embed %} resolve correctly. Namespaces are fully configurable to match your Timber theme's prependPath() registration.

🪆

Parent/child cascade

Parent theme → child theme pattern override chain, mirroring Timber's PHP Twig path resolution order. Child stories and templates win automatically.

🎨

Design token injection

A JSON file of compiled SCSS variables is parsed at build time and injected into every story under a configurable key — the same values your Twig templates reference in WordPress.

🔧

twig.js shims included

Patches for random(), |filter(v => v), short-ternary, {% import _self %} macro hoisting, function(), and source() — common PHP Twig features that twig.js doesn't support.

🎛️

Contextual color controls

colorArgType() renders any contextual-color field as a select control in Storybook's Controls panel. No more typing color names from memory.