Reaching the 80%:
multilingual, finally easy
“Maybe not everybody knows this, but 80% of the world does not speak English — not as their first language, not as their second,” Dries begins. “Multilingual allows us to reach potentially billions of people.”
“Drupal, being born in Belgium, has always been good at multilingual. But two problems: one — multilingual is hard, not just in Drupal, and it’s always been hard to set up and configure. And two — Drupal Canvas, our amazing new page builder, didn’t support multilingual.”
“But that has changed. So let’s take a look at this video.”
Try it yourself: toggle the language of this Canvas hero exactly like the demo’s in-context preview does — the fictional Forma architecture agency, switching from English to Nederlands.
Architecture that leads change
Forma agency is a collective of designers, strategists, and builders creating architecture built to last for generations.
Architectuur die verandering leidt
Wij creëren architectuur die gebouwd is om generaties lang mee te gaan.
Mastering Multilingual Experiences with Drupal CMS 2.2 & Drupal Canvas: A Complete Technical Guide
Executive Overview
For decades, Drupal has stood as the gold standard for building enterprise-grade, ambitious multilingual web experiences. However, configuring multilingual Drupal historically meant navigating labyrinthine configuration screens, managing dozens of interdependent core modules (language, content_translation, config_translation, locale), and meticulously checking hundreds of field-level translation checkboxes.
Drupal CMS 2.2 fundamentally rewrites this paradigm. By combining:
- An overhauled fast-language installer,
- Turnkey Drupal Recipes with guided checklists,
- A 3-tiered content translation configuration system,
- Drupal Canvas (the native visual page builder) with instant side-by-side visual previews, and
- Integrated AI-assisted translation workflows,
Drupal eliminates setup friction while retaining 100% of its deep enterprise multilingual architecture.
In this comprehensive tutorial, we walk step-by-step through setting up, configuring, authoring, and deploying multilingual experiences in Drupal CMS 2.2, culminating in an exploration of Dashi, the next-generation multilingual demo.
Architecture at a Glance
View source diagram
┌──────────────────────────────────────────────┐
│ Drupal CMS 2.2 │
└──────────────────────┬───────────────────────┘
│
┌───────────────────────────────────┼───────────────────────────────────┐
▼ ▼ ▼
┌──────────────────────────┐ ┌──────────────────────────┐ ┌──────────────────────────┐
│ Installer & Recipes │ │ Simplified Configuration │ │ Drupal Canvas & AI │
├──────────────────────────┤ ├──────────────────────────┤ ├──────────────────────────┤
│ • Instant Lang Selector │ │ • 1-Click Recommended │ │ • Visual Live Preview │
│ • Multilingual Recipe │ │ • 1-Checkbox per Type │ │ • Native Side-by-Side UI │
│ • Interactive Checklist │ │ • Granular Field Modal │ │ • Automated AI Translate │
└──────────────────────────┘ └──────────────────────────┘ └──────────────────────────┘1. Fast-Track Installation & Language Selection
In earlier releases, installing Drupal in a non-English language required manual download of .po translation catalogs or clunky dropdown menus. Drupal CMS 2.2 re-engineers this with a clean, searchable modal dialog available directly from the initial launch screen.
1.1 The Quick-Search Installer Interface
When launching the installation wizard:
View source diagram
┌─────────────────────────────────────────────────────────────────────────────┐
│ Drupal CMS │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ Install your site in a different language │ │
│ ├───────────────────────────────────────────────────────────────────────┤ │
│ │ [ 🔍 Zoeken... / Search... ] │ │
│ │ │ │
│ │ Afrikaans Esperanto Magyar Slovenčina │ │
│ │ العربية (Arabic) Español Bahasa Melayu Slovenščina │ │
│ │ Català Français Nederlands [*] Svenska │ │
│ │ Cymraeg Deutsch Polski Tiếng Việt │ │
│ │ Dansk Italiano Português Türkçe │ │
│ │ English (Default) 日本語 Română Українська │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ Give your site a name │
│ [ My Drupal CMS Site ] │
│ [ Next > ] │
└─────────────────────────────────────────────────────────────────────────────┘1.2 Under the Hood: Automated Localization Fetching
When you select a language (for instance, Nederlands):
- The installer queries the Drupal localization server (
localize.drupal.org). - The core package catalog (
nl.po) is fetched asynchronously and parsed into memory. - The setup UI immediately updates its layout and typography dynamically without requiring a full container rebuild.
Headless / Automated CLI Alternative
If provisioning via Composer and Drush, trigger the recipe directly:
# Create the Drupal CMS project
composer create-project drupal/cms-project:^2.2 mysite --no-interaction
cd mysite
# Install in a designated language (e.g., Dutch)
vendor/bin/drush site:install \
--locale=nl \
--site-name="Mijn Drupal CMS Site" \
--db-url=mysql://drupal:drupal@127.0.0.1:3306/drupal_db \
-y2. One-Click Multilingual Setup Recipe
Rather than manually navigating to the Extend screen to enable Language, Content Translation, Interface Translation, and Configuration Translation, Drupal CMS 2.2 introduces the Multilingual Recipe.
2.1 Installing the Recipe via UI
In the administration dashboard, navigate to Recommended Add-ons:
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ Multilingual Recipe [A あ] │
├───────────────────────────────────────────────────────────────────────────┤
│ Adds support for translating your site into multiple languages. │
│ │
│ [🔒 Verified] [🛡️ Protected] [ Install ] │
└───────────────────────────────────────────────────────────────────────────┘Clicking Install activates the recipe runner. Once complete, the button transforms into:
[ ✔ Installed ] ▾
├─ Finish multilingual setup
└─ View documentation2.2 The Guided Multilingual Setup Checklist
Instead of leaving site builders wondering what to configure next, Drupal CMS 2.2 presents an interactive, stateful checklist widget:
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ Multilingual setup checklist │
├───────────────────────────────────┬───────────────────────────────────────┤
│ │ │
│ Configure languages │ [✔] Add languages │
│ ████████████░░░░░░░░ 2 of 3 (67%)│ Enabled languages: │
│ │ - English (default) │
│ Translate your site │ - Dutch │
│ ░░░░░░░░░░░░░░░░░░░░ 0 of 4 (0%) │ [Configure languages] │
│ │ │
│ │ [✔] Confirm language detection │
│ │ Detection methods: │
│ │ URL (Prefix, e.g. /nl/...) │
│ │ [Configure detection methods] │
│ │ │
│ │ [ ] Configure content translation │
└───────────────────────────────────┴───────────────────────────────────────┘2.3 Declarative Recipe Blueprint (recipe.yml)
The recipe abstracts complex Drupal configuration into declarative YAML. Here is an equivalent recipe definition:
# recipes/drupal_cms_multilingual/recipe.yml
name: 'Multilingual'
type: 'Feature'
description: 'Enables turnkey multilingual setup, translation UI, and URL negotiation.'
install:
- language
- locale
- content_translation
- config_translation
- canvas_translation # Bridge module for Drupal Canvas
config:
actions:
language.negotiation:
set_language_negotiation_url_prefixes:
en: ''
nl: 'nl'
es: 'es'
uk: 'uk'3. The 3-Tier Content Translation Configuration
Historically, enabling translation for content entities was infamous for its "wall of checkboxes"—an overwhelming table where users had to manually enable translation for bundles, then expand each bundle to check title, body, taxonomy references, moderation state, revision log messages, and more.
Drupal CMS 2.2 solves this with a progressive disclosure model across three distinct tiers.
View source diagram
Tier 1: 1-Click Recommended Setup
│
▼
Tier 2: 1-Checkbox Per Entity Type
│
▼
Tier 3: Granular Field-Level Customizer ModalTier 1: One-Button Recommended Setup
For 90% of sites, standard best practices apply (translatable titles and content bodies; shared taxonomy structures; synchronized publication dates).
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ 💡 Not sure where to start? │
│ Enable translation for Page, Blog post, Utility page, Person profile, │
│ Project, Tags and Custom menu link with all of their supported fields. │
│ You can fine-tune everything on this page afterwards. │
│ │
│ [ Start with recommended setup ] │
└───────────────────────────────────────────────────────────────────────────┘A single click applies curated entity-translation presets across all standard content types, media types, and custom taxonomy vocabularies.
Tier 2: One-Checkbox Configuration Per Content Type
When auditing or refining translations, Drupal CMS 2.2 presents a clean, filterable list where each entity type has an immediate high-level toggle:
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ [ 🔍 Filter by subtype or type... page ] │
├──────────────┬──────────────┬─────────┬──────────────────┬──────────────┬─┤
│ Translatable │ Subtype │ Type │ Default Language │ Translatable │ │
├──────────────┼──────────────┼─────────┼──────────────────┼──────────────┼─┤
│ [✔] │ Utility page │ Content │ Site default │ All fields │C│
│ [✔] │ Page │ Content │ Site default │ All fields │u│
│ [ ] │ System Block │ Block │ Site default │ - │s│
└──────────────┴──────────────┴─────────┴──────────────────┴──────────────┴─┘
[C = Customize Button]Toggling the checkbox instantly provisions or de-provisions baseline translation capability for that entity type without reloading the page.
Tier 3: Granular Field Customization Modal
When your content architecture requires asymmetric translation (e.g., untranslatable numerical data, shared images, or localized alt tags), click Customize to open the entity customizer modal.
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ Customize: Blog post (Content) [ × ] │
├───────────────────────────────────────────────────────────────────────────┤
│ Default language: │
│ [ Site's default language (English) ] │
│ │
│ (●) Make translatable │
│ (●) Hide non-translatable fields on translation forms │
│ │
│ TRANSLATABLE FIELDS (22 of 24) [Select all | None] │
│ ───────────────────────────────────────────────────────────────────────── │
│ [✔] Published [✔] Authored by │
│ [✔] Title [✔] Authored on │
│ [✔] Body / Content [ ] Sticky at top of lists │
│ [✔] Hero Banner Image [ ] Internal Reference Code │
│ [✔] Moderation state [✔] Meta description │
│ │
│ [ Cancel ] [ Save ] │
└───────────────────────────────────────────────────────────────────────────┘Key Architecture Enhancements:
- "Hide non-translatable fields on translation forms": Eliminates confusion for content translators by completely stripping out layout parameters, internal UUIDs, and synchronized shared flags from their editing canvas.
- Smart Synchronizations: When fields like
StickyorAuthored onare deselected, changes made on the primary language edition automatically cascade to all localized variants.
4. Visual Translation in Drupal Canvas
Drupal Canvas (the native visual page builder shipping out-of-the-box with Drupal CMS) provides full, real-time in-context editing. Drupal CMS 2.2 embeds translation directly into the visual canvas.
4.1 In-Context Translation Preview
When editing any Canvas-powered landing page, a localized viewport toolbar enables real-time switching between available languages:
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ ▤ Layers │ Canvas: Home [Published] │ 🌐 English ▾ │ 👁 Preview │ [Save] │
├──────────┴──────────────────────────┴──────────────┴───────────┴──────────┤
│ ├─ English │
│ ├─ Nederlands <-- Select │
│ └─ Configure languages │
└───────────────────────────────────────────────────────────────────────────┘Selecting Nederlands swaps the visual canvas on the fly:
View source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ │
│ F O R M A Over Projecten Blog │
│ │
│ Architectuur die verandering leidt │
│ │
│ Wij creëren architectuur die │
│ gebouwd is om generaties │
│ lang mee te gaan. │
│ │
└───────────────────────────────────────────────────────────────────────────┘Content authors can edit layout blocks and text nodes directly on the visual page while previewing how German compounds, Dutch grammar, or French character lengths affect responsive wraps.
5. Built-in Canvas Translation UI with AI Automation
For rigorous editorial environments, switching between views is not enough—editors need side-by-side linguistic parity checks, change-tracking, and rapid machine translations.
5.1 Native Side-by-Side Canvas Translation Workspace
Clicking Translate Page opens the dedicated dual-pane translation inspector:
View source diagram
┌─────────────────────────────────────────────────────────────────────────────┐
│ ⎗ All pages / Home (Dutch Translation) English ➔ Nederlands (NL) │
├──────────────────────────────────────────────────────┬──────────────────────┤
│ [✨ AI translate empty] │ Status: In review │
├──────────────────────────────────────────────────────┴──────────────────────┤
│ FIELD: Title │
│ Source (en): Home │
│ Target (nl): [ Home ] │
├─────────────────────────────────────────────────────────────────────────────┤
│ FIELD: Meta description │
│ Source (en): Forma agency is a collective of designers, strategists, and... │
│ Target (nl): [ Forma is een collectief van ontwerpers, strategen en... ] │
├─────────────────────────────────────────────────────────────────────────────┤
│ FIELD: Hero Heading │
│ Source (en): Architecture that leads change │
│ Target (nl): [ Architectuur die verandering leidt ] │
├─────────────────────────────────────────────────────────────────────────────┤
│ [ Review & publish ▾ ] │
└─────────────────────────────────────────────────────────────────────────────┘5.2 One-Click AI Translation Workflow
The [✨ AI translate empty] button connects the Drupal Canvas layout directly to configured AI large language models (such as OpenAI, Anthropic Claude, or local Ollama instances via Drupal's AI abstraction layer).
How the Automated AI Flow Operates:
- Extraction: Canvas extracts all empty target translation keys and structural block tokens.
- Context Packaging: The payload includes the source text, field definition (e.g., "Heading 1", "Meta description"), target locale (
nl-NL), and site-wide tone-of-voice guidelines. - Execution: The model returns linguistically accurate, context-aware translations that respect HTML markup and layout placeholders.
- Human Review: The target inputs are populated instantly, marked with visual badges for human inspection, and routed into the
In revieweditorial state before publication.
6. Case Study: The "Dashi" Multilingual Demo
To showcase the unified power of Drupal CMS 2.2 and Drupal Canvas, the community has introduced Dashi—the successor to the classic Umami profile, rebuilt entirely from scratch for the Canvas era.
View source diagram
U M A M I (Classic Drupal) ──▶ D A S H I (Drupal CMS 2.2 + Canvas)
• Standard Node Templates • Dynamic Canvas Layout Blocks
• Traditional Form Editing • Real-Time In-Context Visual Editing
• Manual Field Synchronizations • AI-Assisted Multilingual WorkflowsView source diagram
┌───────────────────────────────────────────────────────────────────────────┐
│ 🌐 English ▾ │ Tablet ▾ │ 👁 Preview │ │
├───────────────────────────────────────────────────────────────────────────┤
│ │
│ dashi [ 🔍 Search by ingredient... ] My account │
│ ────────────────────────────────────────────────────────────────────── │
│ FEATURED RECIPE • EASY │
│ │
│ Super easy vegetarian pasta bake ┌────────────────────────┐ │
│ │ [Photo: Pasta Bake] │ │
│ A wholesome pasta bake is the ultimate │ │ │
│ comfort food. This delicious bake is quick └────────────────────────┘ │
│ to prepare for the whole family. │
│ │
│ [ View recipe ] │
│ │
│ ───────────────────────────────────────────────────────────────────── │
│ Related recipes: │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────────────────┐ │
│ │ Borscht with │ │ Thai green curry │ │ Gluten-free pizza │ │
│ │ pork ribs │ │ │ │ │ │
│ │ [View recipe ->] │ │ [View recipe ->] │ │ [View recipe ->] │ │
│ └──────────────────┘ └──────────────────┘ └───────────────────────┘ │
└───────────────────────────────────────────────────────────────────────────┘6.1 What Dashi Demonstrates
- Complex Component Localization: Recipes contain compound data models:
- Servings, prep time, cooking time, and difficulty ratings.
- Translatable ingredient tables with synchronized unit measurements.
- Step-by-step cooking directions with inline media.
- Cross-Cultural Content: Rather than simple literal machine translations, Dashi includes culturally authentic international recipes contributed, cooked, and photographed by real Drupal community members across the globe (e.g., Ukrainian Borscht, authentic Thai curry).
- Canvas Reusable Components: Dynamic recipe collection grids that seamlessly adapt their localized taxonomy filters (e.g.,
Main courses,Vegetarian,Baking) automatically based on the active language prefix.
7. Hands-On Verification & CLI Cheat Sheet
For site builders and DevOps engineers deploying Drupal CMS 2.2, here is a quick reference workflow to verify and manage multilingual states using Drush:
7.1 Managing Languages via Terminal
# Add Spanish and Dutch language packages
vendor/bin/drush language:add es
vendor/bin/drush language:add nl
# Set English as default, with prefix negotiation enabled
vendor/bin/drush config:set language.negotiation url.prefixes.es 'es' -y
vendor/bin/drush config:set language.negotiation url.prefixes.nl 'nl' -y
# Update interface translations from community servers
vendor/bin/drush locale:check
vendor/bin/drush locale:update7.2 Inspecting Canvas Translations
# Export active Canvas translation configuration
vendor/bin/drush config:export --filter=canvas_translation
# Clear render cache to force preview rebuilds
vendor/bin/drush crConclusion & Next Steps
Drupal CMS 2.2 removes the complexity barrier from multilingual web publishing:
- Setup takes seconds with the new searchable language picker and automated recipe runner.
- Configuration is intuitive with progressive disclosure replacing the dreaded checkbox matrix.
- Content authoring is fluid with Canvas visual preview and side-by-side AI translation.
To explore this hands-on, spin up a local instance today by visiting: 👉 drupal.org/cms
“Big shout-out to Gabor and Pam and the Drupal Canvas team for making this happen. I’ve talked to so many of you here in Europe — so many people have said, ‘I wish I could use Drupal Canvas, but I can’t until it supports multilingual.’ So — big deal.”
“And also… one of my life goals is to get one of my own photos into this demo.”
“That was the first way to reach more people. The second way is JavaScript frontends.”
Next up, Tutorial II: JavaScript frontends — where new engineers start their careers, and where Canvas is about to meet them with zero Drupalisms.