Emulsify

Build component-driven Drupal themes with Emulsify

Emulsify is a Drupal base theme for creating custom, component-driven design systems. It provides a structured starting point for teams that want to build Drupal themes with reusable components, Storybook documentation, Twig templates, Sass, JavaScript, and a modern frontend workflow.

Emulsify is designed for projects where the Drupal theme is more than a collection of templates. It helps teams create a shared frontend system that can be documented, tested, reused, and maintained across a site or family of sites.

What Emulsify provides

• A Drupal base theme for generating custom child themes.
• Storybook integration for building and documenting components outside of Drupal.
• Twig-based component templates that can be shared between Drupal and Storybook.
• Sass and JavaScript build tooling powered by Emulsify Core.
• Integration with Emulsify Tools for child theme generation and Twig helpers.
• Optional component scaffolding through the Emulsify CLI and compatible component systems.
• A structured starting point for building Drupal themes around reusable frontend components.

Current stable release: 6.x

The 6.x release line is the current stable version of Emulsify Drupal. It supports existing Drupal 10 and Drupal 11 projects and continues to use the established Emulsify Core 3/Webpack-based development workflow.

The final 6.x releases are focused on stability, compatibility, and preparing existing projects for the future 7.x release line. This includes reducing direct reliance on Drupal core’s Stable9 fallback templates, improving generated child theme behavior, and making the upgrade path to 7.x clearer.

Use 6.x if you are maintaining an existing Emulsify Drupal project or need the current stable Webpack-based toolchain.

Upcoming release: 7.x

Emulsify Drupal 7.x is the next major release line. It updates the generated starter theme to use Emulsify Core 4 and the Vite-based build system. It also modernizes Drupal integration for newer Drupal 11 projects, improves child theme generation through Drupal’s Starterkit workflow, and adds new site-builder features such as generated favicon package support.

The 7.x release introduces Whisk as a generation-only starter source for creating custom child themes that use Emulsify as their runtime parent theme.

Use 7.x when you are starting a new project that can adopt the updated toolchain and Drupal compatibility requirements. Review the release notes and upgrade documentation before moving an existing 6.x project to 7.x.

Child theme generation

Emulsify is intended to be used as a parent/base theme. Most projects should generate a custom child theme and do their project-specific development there.

In 6.x, child themes are generated through Emulsify Tools. This keeps project-specific templates, components, Sass, JavaScript, and Storybook work inside the generated child theme while Emulsify provides the shared base theme structure.

In 7.x, child theme generation will be aligned with Drupal’s Starterkit workflow. The Whisk starter source is used during generation, while the generated custom theme uses Emulsify as its runtime parent theme.

Do not enable Whisk directly. It is a generation-only starter source for the 7.x release line.

Installation

Install the current stable release with Composer:

composer require 'drupal/emulsify:^6.1'

Enable Emulsify and generate a child theme:

drush theme:enable emulsify
drush emulsify my_theme

Then install frontend dependencies and start development from the generated child theme:

cd web/themes/custom/my_theme
npm install
npm run develop

Related projects

• Emulsify Core: frontend build tooling, Storybook integration, Sass, JavaScript, and Twig support.
• Emulsify Tools: Drupal integration, child theme generation, and Twig helper functions.
• Emulsify CLI: component scaffolding and optional system-based component installation.
• Emulsify UI Kit: optional starter components and design system patterns.

Documentation

For installation, upgrade notes, and development workflows, see the Emulsify documentation.