How to build a multilingual app in Bubble

The simplest and most scalable way to build a multilingual Bubble app is to store all your text in a “dictionary” data type, load the correct language into custom states when the page loads, and then display text dynamically instead of hard‑coding it. Bubble doesn’t translate automatically for you — you manage the translations yourself. The user’s chosen language can be stored on the User thing or detected from the browser.

Core Idea

You create a data type like Text Item with fields such as key, english, spanish, etc. Then every text you show on the page uses “Do a search for Text Item…:filtered:first item’s english/spanish/etc”. To avoid slow searches, you load all Text Items into a single custom state when the page loads and reference them instantly.

Step‑by‑Step Setup

• Create a data type Text Item with a field key (text) and one field per language, like en, es, fr.
• Add one entry per phrase you need. Example: key = “login\_button”, en = “Log in”, es = “Iniciar sesión”.
• On page load, run a workflow: “Set state” for the page → all\_texts (type: list of Text Item) → value = Do a search for Text Items.
• Store the user’s language on the User thing, e.g., field language = en.
• For each text element, set the text to dynamic. Example: Parent group's text item’s :filtered by key = 'login\_button' :first item’s en (replace en with the user’s language using “Get field by name”).

Using “Get field by name”

This Bubble feature lets you dynamically pick the language field based on the user’s language code. Example:

// text source inside a text element
Parent group's Text Item:get field by name Current User's language

Switching Languages

• Add a dropdown with values like “en”, “es”, “fr”.
• When dropdown changes → Make changes to Current User → language = dropdown’s value.
• Refresh page or run a workflow that re‑sets the custom state with dictionary again.

Why This Works Well

This method avoids slow database searches, keeps your page responsive, lets you update translations without touching the page design, and supports unlimited languages. It’s the real approach used in production Bubble apps.