Mercury Editor Demo Components

A companion module for the Mercury Editor Demo Recipe. The recipe handles all installation and requires this module automatically.

Mercury Editor Demo is a companion module to the Mercury Editor Demo Recipe. To get a working demo, install the recipe — it requires this module and handles everything else automatically.

This module exists because Drupal recipes cannot provide certain things on their own: custom PHP, Twig templates, Single Directory Components (SDC), CSS/JS assets, and Style Options definitions. This module supplies all of that. The recipe wires it together with content types, fields, and configuration.

New to Drupal or Mercury Editor? Start with the Mercury Editor Demo Recipe.

Features

• A library of SDC components (Button, Card, CTA, Featured Card, Featured Teaser, Teaser, Heading, Divider, Slideshow, Text) used by the demo paragraph types.
• Style Options definitions for controlling component appearance from within the Mercury Editor UI.
• Twig templates demonstrating how to pass Drupal field values into SDC components as props.
• Base CSS design tokens (colors, spacing, typography, animations, sizing, z-index layers).

This module is not intended to be used standalone — it is the non-config half of the Mercury Editor demo experience.

Post-Installation

After applying the Mercury Editor Demo Recipe:

1. Go to Content → Add content and choose the ME Test or ME Test CT content type.
2. Add paragraphs using the Mercury Editor component picker.
3. Use the Style panel to adjust the appearance of components (e.g., card layout, button color, divider style).

Additional Requirements

All requirements are handled by the Mercury Editor Demo Recipe. Drupal core 10.3+ or 11 is required.

Recommended modules/libraries

The Mercury Editor Demo Recipe handles all recommended dependencies automatically.

Similar projects

See the Mercury Editor project page for comparisons with Layout Builder, Gutenberg, and other page-building solutions.

Supporting this Module

Maintained by Aten Design Group. Contribute via the issue queue or reach out to Aten directly if your organization would like to sponsor development.

Community Documentation

• Mercury Editor Demo Recipe — start here
• Mercury Editor — the core module this demo is built around