Mercury Editor 3: A Better Visual Editing Experience for Drupal

Last week, I released Mercury Editor 3! It's been a long time coming, and I'm excited to share a number of new features that make it easier than ever to create and edit structured content in Drupal.

Mercury Editor has always been about making Drupal's powerful content architecture more approachable for editors. Version 3 takes a big step forward, with automatic saving, undo and redo, improved component navigation, and a more refined editing experience.

What's New in Mercury Editor 3

Auto-Save

As you type, add or remove media, reorder fields, and make other changes, Mercury Editor automatically saves your work and updates the live preview. No need to constantly switch between editing, saving, and previewing.

Undo and Redo

Experiment with confidence. Mercury Editor now supports undo and redo, making it easy to try different content arrangements and quickly reverse changes without starting over.

Component Tree View

A new component tree provides an outline of layout sections and components, making it easier to navigate complex pages. Quickly find and select components, even when they're nested several levels deep.

A Refined Editing Experience

We've updated and refined the entire interface to make editing more intuitive. Editors can navigate layouts, mix and match components, and experiment with content, all while working within the design system and editorial guidelines established for their website.

How Mercury Editor Works

At its core, Mercury Editor provides a live visual preview for editing structured content in Drupal.

Rather than replacing Drupal's content architecture, Mercury Editor builds on it. It works with familiar Drupal entities, including nodes and taxonomy terms, and uses the same fields and forms your site already relies on.

The difference is the editing experience.

Mercury Editor moves the traditional content edit form into a collapsible sidebar alongside a live preview of the content. As editors make changes, the preview updates automatically, showing them what their content will look like without having to save and reload the page.

This makes a huge difference when editing complicated content. Editors can immediately see how their changes affect the page, without having to guess where a field appears or what the finished result will look like.

Even Better with Paragraphs and Layout Paragraphs

Mercury Editor really shines on websites using Paragraphs and Layout Paragraphs.

With Layout Paragraphs, content components become interactive elements in the live preview. Editors can click directly on components to edit them, drag and drop to rearrange content, add new components, and remove existing ones.

Everything happens in context, with the preview updating as changes are made.

No more wondering which field controls a particular piece of content, whether an image will fit, or how to find that nested component several layers deep.

Editors can build expressive, flexible pages using reusable components while staying within the design and brand guidelines established by their site builders and developers.

It's an intuitive editing experience built on Drupal's existing strengths.

Mercury Editor and Drupal Canvas

With all the excitement around Drupal Canvas, it's worth explaining how Mercury Editor fits into the picture.

At first glance, there are obvious similarities. Both provide visual, interactive experiences for working with components in Drupal. Both make it possible to build sophisticated pages without writing code.

But they take fundamentally different architectural approaches and have different primary goals.

Drupal Canvas: Visual Site Building and Theming

Drupal Canvas is quickly gaining momentum as a new approach to browser-based site building and theming in Drupal.

It provides tools for creating, styling, and assembling components, building pages, and defining the visual structure of a website. It gives site builders greater control over the design and presentation of content directly in the browser.

Canvas represents an exciting direction for Drupal, particularly for teams looking to make site building and theming more accessible.

Mercury Editor: Visual Editing for Structured Content

Mercury Editor has a different focus.

It's not a site building or theming tool. It doesn't provide an interface for creating components or defining the templates used by entire content types.

Instead, Mercury Editor focuses on the experience of editing content within Drupal's existing entity and field architecture.

Think of a university website with content types for Faculty, Programs, and News. Developers and site builders establish the fields, components, layouts, and templates used by those content types. Mercury Editor gives content editors a visual, interactive interface for working with the content itself.

For sites using Layout Paragraphs, that includes building flexible page layouts from reusable components. But those components are still part of Drupal's structured content model, using familiar fields, entity references, and other Drupal functionality.

Mercury Editor is fundamentally about making structured content easier to edit, not changing how that content is modeled or rendered.

And that's an important distinction.

Drupal's entity and field architecture remains one of its greatest strengths, particularly for organizations managing complex, structured content across large websites.

Mercury Editor makes that architecture more accessible to the people responsible for maintaining content every day.

Canvas and Mercury Editor are different approaches, but I think both have an important role to play in Drupal's future.

Give Mercury Editor a Try

The fastest way to experience Mercury Editor is with the Mercury Editor Demo Recipe.

The recipe installs and configures Mercury Editor along with a demo content type, reusable paragraph components, layouts, and sample content.

Note: The demo recipe creates new content types, paragraph types, and sample content on your website, so I recommend trying it in a development environment.

From your Drupal project root, run:

composer require 'drupal/mercury_editor_demo_recipe:^3.0'

Then, from your Drupal document root (typically web/), apply the recipe:

drush recipe ../recipes/mercury_editor_demo_recipe

The recipe installs Mercury Editor and its required dependencies automatically.

Alternatively, you can install Mercury Editor directly:

composer require 'drupal/mercury_editor:^3.0'
drush en mercury_editor

Then enable Mercury Editor for the desired entity types under Administration → Configuration → Mercury Editor settings.

Mercury Editor is open source and completely free to use.

More importantly, it's a community project, and we'd love your help making it better.

Give it a try, share your feedback, submit feature requests, or report bugs in the Mercury Editor issue queue.

I'm excited about how far Mercury Editor has come, and even more excited about what's next.