mercury_editor_demo_recipe

The fastest way to see Mercury Editor in action. Apply this recipe to get a fully working demo — content type, paragraph components, demo content, and Style Options — all wired together automatically.

Mercury Editor is a visual, component-based page builder for Drupal. Instead of editing raw text fields, editors use a drag-and-drop interface to assemble pages from reusable components (called paragraphs), choose multi-column layouts, and control the visual style of each component — all without leaving the edit screen.

This recipe is the quickest path to exploring what Mercury Editor feels like. It installs all required modules via Composer, creates a demo content type pre-configured for Mercury Editor, and imports sample content you can open and edit immediately.

New to Drupal? A recipe is a one-command way to install and configure a set of features in Drupal 10.3+. Think of it as a starter kit you apply to an existing site.

This recipe depends on the Mercury Editor Demo companion module, which provides the Single Directory Components (SDC), Twig templates, Style Options definitions, and CSS assets that the recipe's configuration references. Both are installed together automatically.

Features

• Demo content type (ME Test CT) — a content type fully configured for Mercury Editor, ready to use out of the box.
• 8 paragraph component types — Button, Card, Divider, Heading, Image, Section, Slideshow, and Text.
• Multi-column Section layouts — one column, two column, two column bricks, three column (25/50/25), and three column (33/34/33).
• Style Options on Button, Card, and Divider — demonstrates how editors can control the visual appearance of components directly in the Mercury Editor UI, no code required.
• Pre-built demo node — "Drupal Like You've Never Seen It" imports 88+ demo paragraphs covering every component type so you can explore without building from scratch.
• Image and Remote Video media types — installed and ready to use in Image and Slideshow components.
• SVG image support — the image field is configured to accept SVG files in addition to standard formats.
• Mercury Editor outline icons — each component type displays a recognizable icon in the editor outline panel.
• All dependencies installed automatically — Mercury Editor, Mercury Layouts, Style Options, Heading, Twig Field Value, and SVG Image are all required and installed by the recipe.

Post-Installation

1. Require the recipe via Composer (from your project root):

composer require atendesigngroup/mercury_editor_demo_recipe

2. Apply the recipe (from your Drupal docroot, e.g. web/):

drush recipe ../recipes/mercury_editor_demo_recipe

3. Explore the sample page

The recipe creates a sample page titled "Drupal Like You've Never Seen It" pre-loaded with components showcasing everything the demo includes.

1. Go to Content in the admin toolbar and open "Drupal Like You've Never Seen It".
2. Click Edit to open it in Mercury Editor and browse the pre-built components.
3. Click any component to select it, then use the Style panel (on Card, Button, or Divider) to see Style Options in action.
4. Click a Section component to change the column layout.
5. Use the + button to add new components from the component picker.

4. Build your own page

Go to Content → Add content → ME Test CT to start a new page from scratch using Mercury Editor.

Additional Requirements

• Drupal 10.3 or 11 — Drupal recipes require core 10.3+. On Drupal 10, recipes may need to be enabled via an experimental flag depending on your minor version.
• Composer — all dependencies are managed via Composer and installed automatically when you require this recipe.

The following modules are required and pulled in automatically:

• Mercury Editor — the core page builder this demo is built around.
• Mercury Editor Demo — companion module providing SDC components, Twig templates, Style Options definitions, and CSS assets.
• Mercury Layouts — provides the multi-column Section layout options.
• Style Options — powers the visual style controls on paragraph components.
• Heading — semantic heading field used by the Heading paragraph type.
• Twig Field Value — used in templates to pass field values into SDC components as props.
• SVG Image — adds SVG support to image fields and media.

Recommended modules/libraries

No additional modules are needed beyond what the recipe installs. Once you have the demo running, explore the Mercury Editor project page for information on additional contrib modules that extend its functionality.

Supporting this Recipe

Maintained by Aten Design Group. Contribute via the issue queue or reach out to Aten directly if your organization would like to sponsor continued development of Mercury Editor and its ecosystem.

Community Documentation

• Mercury Editor — the core module this recipe demonstrates.
• Mercury Editor Demo — the companion module installed alongside this recipe.