How to Create a Multi-Language Website in WeWeb

In the WeWeb editor, click the More button (three dots or 'More' in the top navigation bar) → Languages. A language management panel opens showing your current default language. Click + Add language → a dropdown of locale codes appears. Select your target language (e.g., 'fr' for French, 'de' for German, 'ar' for Arabic, 'ja' for Japanese). You can add multiple languages — there is no documented hard limit. Each language is identified by its locale code (ISO 639-1 two-letter code, sometimes with region: 'pt-BR' for Brazilian Portuguese). The first language you added when creating the project is the default — users who do not match any other language fall back to this. After adding languages, click Save. WeWeb now tracks a 'current language' state for your app. All text elements now have per-language fields when you select them.

With multiple languages added, select any Text, Heading, or Button element in the canvas. In the Settings panel, you now see language tabs at the top: one tab per language. The default language tab contains the original text. Click a secondary language tab (e.g., 'fr') and type or paste the translated text. The element's display updates to show the translation when that language is active. Work through each page systematically: select each text element → click the secondary language tab → enter translation → move to the next element. WeWeb does not auto-translate — all translations must be entered manually or pasted from a translation tool. To quickly identify untranslated elements: switch the editor to your secondary language (More → Languages → set as active/preview language). Any element showing its default language content is not yet translated. Tip: use a spreadsheet to track translation progress, collecting the default text and getting translations from a human translator or DeepL/Google Translate, then pasting back into WeWeb.

WeWeb does not auto-detect and apply the browser's language — you must implement this with a workflow. Create a workflow that fires on page load: go to the App workflows section (left panel → Workflows → Project workflows) or a page-level workflow → Trigger: On page load. Add a Custom JavaScript action to detect the browser language: read navigator.language, match it against your supported locales, and return the best match. Then add a Change language action using the returned locale. The Change language action takes a locale code string (e.g., 'fr', 'en'). Add this workflow to your app's On page load trigger (Project workflows) so it fires on every page. If you only add it to one page's load trigger, language switching won't persist when users navigate directly to other pages.

1// Injection point: Workflow → Custom JavaScript action
2// Place this action in a Project workflow triggered 'On app load'
3// to detect and set the browser language
4
5const supportedLocales = ['en', 'fr', 'de', 'es', 'pt-BR'];
6const defaultLocale = 'en';
7
8// Check if user has a saved preference first
9const savedLocale = localStorage.getItem('weweb_user_locale');
10if (savedLocale && supportedLocales.includes(savedLocale)) {
11  return { detectedLocale: savedLocale };
12}
13
14// Fall back to browser language detection
15const browserLang = navigator.language || navigator.userLanguage || defaultLocale;
16
17// Try exact match first (e.g., 'pt-BR')
18if (supportedLocales.includes(browserLang)) {
19  return { detectedLocale: browserLang };
20}
21
22// Try base language match (e.g., 'pt' from 'pt-BR' or 'pt-PT')
23const baseLang = browserLang.split('-')[0];
24const baseMatch = supportedLocales.find(l => l.split('-')[0] === baseLang);
25if (baseMatch) {
26  return { detectedLocale: baseMatch };
27}
28
29// Default to first supported locale
30return { detectedLocale: defaultLocale };

WeWeb includes a built-in Language Switcher component. Add it via Add element (+) → Utility → Language Switcher. Place it in your navigation bar or footer. The Language Switcher automatically shows a list of all languages you have added to the project and highlights the currently active one. Clicking a language calls the Change language action internally — no workflow setup required. To style the Language Switcher: select it → Styling panel → adjust font, colors, dropdown background, and border. If you prefer a custom language switcher design: add a Select element or a row of flag buttons. Add a workflow to each button or to the Select's On change trigger: Change language action → bind the locale to the button's value (bind each button's click to a specific locale string like 'fr'). After a language change, persist the user's choice to localStorage via a Custom JavaScript action: `localStorage.setItem('weweb_user_locale', selectedLocale);` so the On app load workflow reads it on next visit.

Button text translation in WeWeb behaves differently from regular text elements. WeWeb's built-in Button element may not support per-language text binding the same way Text elements do — this is a documented limitation. Workaround 1: bind the button's text property to a formula that returns different text per language: `if(wwContext.lang === 'fr', 'Envoyer', 'Submit')`. For more languages: `{en: 'Submit', fr: 'Envoyer', de: 'Absenden'}[wwContext.lang] || 'Submit'`. Workaround 2: instead of using the built-in button text field, add a Text element inside a Container that acts as a button. Use the Text element (which does support i18n tabs) for the label, and add click workflows to the Container. For Input placeholders: bind the placeholder property to a language-conditional formula: `wwContext.lang === 'fr' ? 'Votre adresse e-mail' : 'Your email address'`. For all translatable strings, using a JSON-based translation object stored in an App-level Variable is the most maintainable approach at scale.

1// Injection point: App-level Variable (Data panel → Variables → New → Object)
2// Name: translations
3// Default value: paste the JSON object below
4// Then reference in bindings as: translations[wwContext.lang].button_submit
5
6// Example translations object structure:
7{
8  "en": {
9    "button_submit": "Submit",
10    "button_next": "Next",
11    "button_back": "Back",
12    "placeholder_email": "Your email address",
13    "placeholder_name": "Your full name",
14    "error_required": "This field is required",
15    "success_message": "Thank you! We'll be in touch.",
16    "nav_home": "Home",
17    "nav_about": "About",
18    "nav_contact": "Contact"
19  },
20  "fr": {
21    "button_submit": "Envoyer",
22    "button_next": "Suivant",
23    "button_back": "Retour",
24    "placeholder_email": "Votre adresse e-mail",
25    "placeholder_name": "Votre nom complet",
26    "error_required": "Ce champ est obligatoire",
27    "success_message": "Merci ! Nous vous contacterons bientôt.",
28    "nav_home": "Accueil",
29    "nav_about": "À propos",
30    "nav_contact": "Contact"
31  },
32  "de": {
33    "button_submit": "Absenden",
34    "button_next": "Weiter",
35    "button_back": "Zurück",
36    "placeholder_email": "Ihre E-Mail-Adresse",
37    "placeholder_name": "Ihr vollständiger Name",
38    "error_required": "Dieses Feld ist erforderlich",
39    "success_message": "Vielen Dank! Wir melden uns.",
40    "nav_home": "Startseite",
41    "nav_about": "Über uns",
42    "nav_contact": "Kontakt"
43  }
44}

For projects with hundreds of translatable strings, manually entering translations in the WeWeb editor is tedious and error-prone. A more scalable workflow: (1) Build your app fully in the default language. (2) Export all translatable strings to a spreadsheet: use a Custom JavaScript action in a development workflow that collects all visible text and outputs it as CSV — or manually copy strings from the editor. (3) Send the spreadsheet to a human translator or process it through DeepL API. (4) Import translations back: paste each translated string into the corresponding element's language tab. Alternatively, store all translations in a Supabase 'translations' table with columns: key, locale, value. Fetch this table on app load into an App-level translations variable. Bind all text elements to `translationsData[current_key][currentLang]`. This approach lets you update translations without republishing the WeWeb app — update the database and the translations update live. The tradeoff: more complex setup but zero-downtime translation updates.

WeWeb's i18n system has two significant limitations for international SEO and RTL languages. SEO: WeWeb does not support URL-based locale routing (/en/page, /fr/page). All languages are served at the same URL. This means search engines cannot index language-specific pages separately — you cannot have French content indexed at /fr/contact and English at /en/contact. There is also no hreflang tag support, which tells search engines about language variants. For SEO-critical multilingual sites, a dedicated CMS/SSR platform is a better choice than WeWeb. For app-style authenticated sections where SEO is less critical, WeWeb's approach is acceptable. RTL languages (Arabic, Hebrew, Farsi): WeWeb does not automatically apply dir='rtl' or switch text alignment. For RTL support, add a Custom JavaScript action on language change: when locale is 'ar', set `document.documentElement.setAttribute('dir', 'rtl')` and apply an RTL CSS class. Add RTL-specific styles in App Settings → Custom Code → Head with `[dir='rtl']` selectors to mirror flexbox direction, text alignment, and padding. This is a manual workaround — WeWeb does not natively handle RTL layout mirroring.

1// Injection point: Workflow → Custom JavaScript action
2// Add this action AFTER the Change language action in your language switcher workflow
3// It enables RTL layout when Arabic or Hebrew is selected
4
5const locale = variables.currentLocale; // or read from wwContext.lang
6const rtlLocales = ['ar', 'he', 'fa', 'ur'];
7
8if (rtlLocales.includes(locale)) {
9  document.documentElement.setAttribute('dir', 'rtl');
10  document.documentElement.setAttribute('lang', locale);
11  document.body.classList.add('rtl-layout');
12} else {
13  document.documentElement.setAttribute('dir', 'ltr');
14  document.documentElement.setAttribute('lang', locale);
15  document.body.classList.remove('rtl-layout');
16}
17
18// Also update the lang attribute for accessibility
19return { direction: rtlLocales.includes(locale) ? 'rtl' : 'ltr' };