Previewing Drupal 11 SDCs with Storybook: A Practical Guide

Staff Reporter

Key Features and Updates in Drupal 11: What You Need to Know

In his latest guide, Phil Norton walks developers through previewing Single Directory Components (SDCs) in Drupal 11 using Storybook, a JavaScript-based component explorer for live UI testing outside of Drupal templates.

The article explains how to create an example “Author” component complete with markup, styles, and configuration, and render it using the Drupal Storybook module. Phil also covers npm setup, defining stories, configuring CORS, and hosting locally via DDEV—allowing teams to build components in isolation, maintain design consistency, and present polished demos before integration.

The comprehensive tutorial includes YAML definitions, Twig templates, and CSS setup for the SDC, and dives into how Storybook interacts with Drupal via Drush commands and .stories.twig/.stories.json files. It concludes with advanced topics like DDEV integration, Storybook configuration, and options for static hosting.

Whether previewing components for internal reviews or client demos, the Storybook workflow enhances SDC development by enabling real-time feedback and visual validation before deployment. Phil emphasizes that if you're building with SDCs, you should also be using Storybook.

Reference: Drupal 11: Using Storybook To Preview Single Directory Components by Philip Norton, #! code (Hash Bang Code) (28 September 2025)

Drupal 11

Storybook

Single Directory Components

Disclosure: This content is produced with the assistance of AI.

Disclaimer: The opinions expressed in this story do not necessarily represent that of TheDropTimes. We regularly share third-party blog posts that feature Drupal in good faith. TDT recommends Reader's discretion while consuming such content, as the veracity/authenticity of the story depends on the blogger and their motives.

Note: The vision of this web portal is to help promote news and stories around the Drupal community and promote and celebrate the people and organizations in the community. We strive to create and distribute our content based on these content policy. If you see any omission/variation on this please reach out to us at #thedroptimes channel on Drupal Slack and we will try to address the issue as best we can.