Emulsify

Build component-driven Drupal themes with Emulsify

Emulsify is a Drupal parent theme for teams that want their frontend work to function as a reusable design system, not just a collection of one-off template overrides. It gives Drupal projects a structured starting point for building custom child themes with Twig components, Storybook documentation, Sass, JavaScript, and a Vite-powered frontend workflow.

Use Emulsify when your Drupal theme needs to support repeatable design patterns, shared component documentation, and a clearer connection between frontend development and Drupal implementation. Instead of building page templates in isolation, teams can develop components, document variations, review states, and then use those same patterns inside Drupal.

What Emulsify provides

• A Drupal parent theme for generated child themes: Emulsify provides the shared theme foundation while your project-specific work lives in a custom child theme. This gives teams a clean place to build custom designs without starting from an empty theme or maintaining every baseline template by hand.
• A component-driven theme structure: Emulsify encourages teams to build reusable Twig components that can support many pages, content types, and layouts. This is useful for sites where the same design patterns need to appear consistently across different editorial experiences.
• Storybook integration: Components can be built, reviewed, and documented outside of Drupal. This helps frontend developers work faster, gives designers and stakeholders a place to review UI states, and makes it easier to test component variations before they are wired into Drupal content.
• Emulsify Core 4 tooling: Emulsify uses the current Emulsify frontend workflow for Sass, JavaScript, Twig templates, component metadata, static assets, and Storybook. Shared tooling reduces the amount of custom build configuration each Drupal theme needs to own.
• Vite-based development: Emulsify 7 replaces the older Webpack-based workflow with Vite. For site teams, this means a faster local development loop, a simpler build foundation, and frontend tooling that is easier to maintain over the life of a Drupal project.
• Twig-first Drupal theming: Emulsify is built around Twig because Drupal renders Twig. Components can be written in a way that works in Storybook and in Drupal, which helps reduce the gap between isolated frontend development and real CMS implementation.
• Support for mixed component systems: Emulsify Core supports Twig and React authoring models. Drupal projects can stay Twig-first while still documenting React-based or JavaScript-rendered components in the same broader design system workflow when needed.
• A complete baseline template layer: Emulsify 7 no longer depends on Stable9 as a parent theme. Emulsify owns its baseline templates, which gives the project a clearer and more intentional foundation for generated child themes.
• Child theme generation: Teams can generate project-specific child themes with Emulsify Tools or Drupal core’s Starterkit command. This helps new projects start with the expected structure, settings, and frontend workflow already in place.
• Generated favicon packages: Emulsify 7 includes a favicon workflow built around one SVG source configured in theme settings. From that source, Emulsify can generate the browser, iOS, Android, manifest, and ICO assets a site needs.
• Release-readiness tooling: Emulsify includes checks that help keep generated themes, templates, schema, settings, and build output aligned as the project evolves.

Current stable release: 7.x

The 7.x release line is the current stable version of Emulsify. It is built for Drupal ^11.3 || ^12, pairs with Emulsify Tools 2.x, and uses Emulsify Core 4 with a Vite-based frontend workflow.

Emulsify 7 is a major release. It removes Drupal 10 support, removes Stable9 as the parent theme, replaces Webpack-based generated theme tooling with Vite, and introduces the generated favicon package workflow.

Use 7.x for new Drupal 11.3+/12-ready projects, or for existing projects that are ready to adopt the updated parent theme, generated child theme workflow, and frontend build system.

Child theme generation

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

If Emulsify Tools is installed, generate a child theme with Drush:

drush emulsify my_theme

Emulsify Tools also exposes the fully qualified command name:

drush emulsify_tools:bake my_theme

You can also generate the same child theme with Drupal core’s Starterkit command:

php web/core/scripts/drupal generate-theme my_theme --starterkit whisk --path themes/custom

Both workflows generate a custom theme into web/themes/custom/my_theme, use whisk as the starter source, and keep emulsify as the runtime parent theme.

Do not enable Whisk directly. Whisk is a generation-only Starterkit source for creating Emulsify child themes.

Favicon package workflow

Emulsify 7 includes a generated favicon package workflow built around one SVG source stored in theme settings. From that source, Emulsify can generate browser icons, an SVG favicon, an ICO file, an Apple touch icon, Android web app icons, a web manifest, and package metadata.

The theme settings form handles normal admin configuration, previews, saved settings, and frontend head tags. Emulsify Tools provides the deployment-focused Drush commands used to generate, inspect, reset, and repair favicon package files after configuration imports or deploys.

Runtime page requests do not generate favicon files. Generated packages should be treated as environment-local build artifacts that can be recreated from configuration.

Installation

Install Emulsify with Composer:

composer require 'drupal/emulsify:^7.0'

Emulsify 7 requires Emulsify Tools 2.x:

composer require 'drupal/emulsify_tools:^2.0'

After generating a child theme, install frontend dependencies and start local development from the generated theme directory:

cd web/themes/custom/my_theme

npm install

npm run develop

Upgrading from 6.x

Emulsify 7 is a theme-platform upgrade, not a patch-level update. Before upgrading an existing project, review the upgrade guide, confirm Drupal 11.3+ compatibility, update to Emulsify Tools 2.x, and plan for the move from Webpack to Vite.

Existing 6.x projects should also review copied Twig overrides against the new Emulsify 7 template layer, since Emulsify now owns its baseline templates instead of inheriting from Stable9.

Related projects

• Emulsify Tools: Drupal-side utilities for child theme generation, Twig helpers, namespaces, and favicon deployment commands.
• Emulsify Core: frontend build tooling, Storybook integration, Sass, JavaScript, React, and Twig support.
• Emulsify documentation: project guides, release information, and supporting documentation.

Documentation and development

• Documentation
• GitHub repository
• Storybook demo

All issue tracking and contribution work happens on GitHub.

Supporting organization: Four Kitchens