Mix
A comprehensive collection of simple but useful features for Drupal site building, management, development, and user experience improvement.
mix
Install
composer require 'drupal/mix:^1.10'
Overview
Mix is an all-in-one utility module that provides a wide range of features commonly needed in Drupal projects without requiring multiple dedicated modules. It focuses on simplifying common tasks, automating workflows, and centralizing settings for more efficient site management.
The module includes development tools like a quick dev/prod mode toggle that controls caching, Twig debugging, CSS/JS aggregation, and error display. It also offers content management features such as content synchronization across environments, configuration import ignore for environment-specific settings, and enhanced menu system with token support, HTML titles, and role-based visibility.
For user experience, Mix provides form enhancements like duplicate submission prevention, unsaved form warnings, and a standalone password change page. It also includes SEO features with meta tag management for frontpage and nodes, custom 500 error pages, and X-Generator header removal for security through obscurity.
Features
- Development mode toggle that quickly switches between dev and prod configurations, controlling Twig debugging, cache backends, CSS/JS aggregation, and error message verbosity
- Environment indicator that displays a customizable text banner at the top of all pages to identify the current environment (Development, Staging, Production, etc.)
- Show form ID feature that displays the form ID and hook_form_FORM_ID_alter() code template before each form for easier module development
- Hide submit button functionality that disables submit buttons after click to prevent duplicate form submissions
- Unsaved form confirmation that warns users with a browser dialog when attempting to leave a page with unsaved form changes
- Content synchronization (Beta) that allows blocks, menu links, and taxonomy terms to be exported and imported alongside configuration, solving the broken block problem when syncing configs between environments
- Configuration import ignore that allows specific configurations or config keys to be excluded during import, useful for maintaining environment-specific settings on production
- Custom 500 error page with configurable HTML content for a branded user experience during server errors
- Meta tags management for frontpage (title, description, keywords, custom meta tags) and nodes (description with token support)
- Enhanced menu system with token support in menu titles and URLs ([current-user:xxx], [site:xxx]), HTML in menu titles, link/container attributes (id, class, target), and role-based visibility
- Block CSS classes allowing custom CSS classes to be added to any block wrapper element through the block configuration form
- Dropdown menu display option that transforms menu blocks into CSS-only responsive dropdown menus with mobile toggle support
- Standalone password change page that moves password fields from the user edit form to a dedicated /user/{uid}/password page with a Password tab
- Register with password option that shows password fields on the user registration form instead of relying on email-based password reset
- Remove X-Generator feature that strips the X-Generator HTTP header and Generator meta tag to obfuscate the Drupal platform
- Hide revision field option that hides the revision information fieldset from all users except UID 1 for a cleaner editing interface
- User picture token ([current-user:picture] and [current-user:picture:image-style]) for displaying user avatars in menus
Use Cases
Rapid Theme Development
Enable development mode to quickly iterate on theme development without manually clearing caches. The dev mode disables render, page, and dynamic page caches, enables Twig debugging with template suggestions in HTML comments, and shows all error messages with backtrace. Combined with the Show form ID feature, developers can easily identify which forms to alter and test changes instantly.
Multi-Environment Deployment
Use the environment indicator to clearly distinguish between development, staging, and production environments. Configure different indicator text for each environment and use config import ignore to prevent dev-mode settings from being imported to production. Keep development modules like Devel from being enabled on production by adding core.extension:module.devel to the ignore list.
Syncing Block Content Between Environments
When placing blocks that are defined as block_content entities, the block placement config references the block by UUID, but the actual content is stored separately. Enable content synchronization, mark specific blocks for export in the block library page, then export/import configuration normally. Run 'Generate missing contents' on the target environment to create the blocks. This solves the 'This block is broken or missing' error common when syncing configurations.
User-Friendly Registration Flow
Enable 'Register with password' to allow users to set their password during registration instead of receiving an email with a one-time login link. This is especially useful for sites where immediate access is important. The setting integrates directly into the admin user settings page at /admin/config/people/accounts.
Simplified User Profile Management
Enable the standalone password page to move password change functionality to a dedicated /user/{uid}/password page with a 'Password' tab on user profiles. This keeps the main user edit form cleaner and provides a focused interface for password changes with proper validation including current password verification.
Responsive Dropdown Menus Without JavaScript
Use the block-level dropdown option for menu blocks to convert standard menus into responsive dropdown menus using pure CSS. The implementation uses checkbox-based state management for mobile toggles, ensuring functionality even when JavaScript is disabled. Customize appearance by overriding the dropdown.css styles or the menu.html.twig template.
Role-Based Menu Item Visibility
Use the advanced menu link settings to restrict menu items to specific user roles. This allows creating admin-only menu items in the main navigation or role-specific links without using access control modules. Menu visibility is evaluated at render time with proper cache contexts.
Dynamic Menu Content with Tokens
Create personalized menus using tokens in menu link titles and URLs. Display the current user's picture in the menu with [current-user:picture:thumbnail], create a 'My Profile' link with /user/[current-user:uid], or show the site name dynamically. The module supports [current-user:xxx], [site:xxx], and [date:xxx] tokens in menu content.
SEO Optimization Without Heavy Modules
Use Mix's meta tag settings as a lightweight alternative to full-featured SEO modules. Configure frontpage meta tags including title with tokens, description, keywords, and custom meta tags for site verification and Open Graph. For nodes, set up description templates using [node:summary] or other node tokens to automatically generate meta descriptions.
Branded Error Pages
Replace the default Drupal 500 error page with a custom branded page that maintains site identity even during unexpected errors. The error page content is stored in configuration and can include full HTML with custom styles. Error details are appended based on the system's error reporting level, allowing developers to see debug information while regular users see a friendly message.
Preventing Duplicate Form Submissions
Enable the hide submit button feature to prevent users from accidentally submitting forms multiple times by clicking the submit button repeatedly. The JavaScript library creates a disabled clone of the button and hides the original after the first click, maintaining form functionality while preventing duplicates.
Protecting Unsaved Form Data
Enable unsaved form confirmation to warn users when they attempt to navigate away from a page with unsaved form changes. This is particularly valuable for content editing forms where losing work could be frustrating. The feature tracks form state changes and displays a browser-native confirmation dialog.
Tips
- The development mode toggle is safer than manually editing settings.php for local development, as it stores the setting in config and automatically rebuilds caches and containers when toggled.
- Use the config import ignore feature to maintain environment-specific settings like dev_mode itself, ensuring development settings never accidentally get imported to production.
- Content sync supports block_content, menu_link_content, and taxonomy_term entities. The sync ID format is mix.content_sync.{entity_type}.{bundle}.{uuid}.
- When using menu tokens, the module automatically sets route_name to <none> for links with token URLs to prevent routing errors. Token replacement happens at render time.
- The dropdown menu CSS uses checkbox state (:checked + ul) for mobile toggles, making it work without JavaScript. Override the CSS for custom styling.
- Block CSS classes are stored in third party settings and properly cleaned up when empty. Multiple classes can be separated by spaces.
- The environment indicator uses cache tags (mix:environment-indicator) so changes between non-empty values only invalidate specific caches rather than rebuilding all caches.
- Meta tag tokens are processed with XSS filtering for security. Custom meta tags in the frontpage settings should be valid HTML meta elements.
- The standalone password page respects password reset tokens from emails, allowing users to change password without entering current password when using the reset flow.
- For security, consider enabling 'Remove X-Generator' on production sites to avoid advertising the CMS platform, though this is security through obscurity.
Technical Details
Admin Pages 3
/admin/config/mix
Main configuration page for the Mix module containing all primary settings organized into logical sections including development, content synchronization, configuration management, error pages, and SEO.
/admin/config/mix/meta
Configure meta tags for the frontpage and node pages. This page can be accessed as a modal from the main Mix settings page or directly.
/user/{user}/password
Standalone password change page that appears when the 'Standalone change password page' option is enabled. Provides a dedicated form for changing the user password with current password verification (bypassed for password reset tokens and admin users).
Hooks 18
hook_form_alter
Attaches hide submit button and unsaved form confirmation libraries to forms. Also displays form ID when show_form_id is enabled and hides revision field when configured.
hook_form_user_admin_settings_alter
Adds 'Show password fields on registration form' checkbox to the user admin settings form.
hook_form_user_register_form_alter
Adds password fields to the user registration form when register_password is enabled.
hook_form_user_form_alter
Hides password fields on user edit form and redirects to standalone password page when standalone_password_page is enabled.
hook_form_block_form_alter
Adds CSS class(es) field and dropdown checkbox (for menu blocks) to block configuration forms.
hook_form_menu_link_content_form_alter
Adds advanced settings (roles, link attributes, container attributes, allow HTML, menu token) to menu link forms.
hook_page_top
Adds environment indicator banner to the top of all pages when configured.
hook_page_attachments_alter
Removes system_meta_generator from attachments when remove_x_generator is enabled.
hook_preprocess_html
Adds meta tags and modifies page title for frontpage and node pages based on meta settings.
hook_preprocess_block
Adds custom CSS classes and dropdown functionality to blocks based on third party settings.
hook_preprocess_menu
Processes menu items to replace tokens, hide items based on role restrictions, and apply container attributes.
hook_menu_links_discovered_alter
Scans menu links for tokens and stores original values in options for later processing.
hook_link_alter
Replaces tokens in menu link URLs and allows HTML in menu titles.
hook_theme_registry_alter
Registers custom mix_menu theme based on core menu theme for dropdown functionality.
hook_token_info
Provides [current-user:picture] and [current-user:picture:image-style] tokens for displaying user avatars.
hook_tokens
Implements token replacement for user picture tokens.
hook_block_presave
Cleans up empty third party settings before block entity is saved.
hook_views_pre_render
Adds content sync IDs to block_content view results for display in the admin list.
Security Notes 5
- The 'Allow HTML' option in menu links should be used carefully as it allows raw HTML in menu titles. Only trusted users should have access to edit menu links with this option.
- Content synchronization exports full entity data including any fields. Review exported content before importing to ensure no sensitive data is inadvertently transferred.
- Custom error page content is rendered as HTML. Ensure the configured content doesn't include any user-supplied or untrusted content.
- Development mode disables multiple caching layers and enables verbose error reporting. Never enable on production environments as it exposes detailed error information.
- The config import ignore feature operates on the active storage during import. Ensure the ignore list itself is properly configured on each environment as it's also subject to being ignored.