Bubble.io Multi-Language: How to Build Apps in Multiple Languages
Adding multi-language support after building is expensive. Planning for it from the start costs very little extra. Three approaches for different situations, the Language data type pattern for scalable internationalisation, and RTL support for Arabic, Urdu, and Hebrew.
What It Takes to Build a Multi-Language Bubble App
Building a Bubble app in multiple languages — English, Arabic, French, Urdu, Spanish — requires a deliberate architecture decision made before the first piece of text is placed. Adding multi-language support after building a monolingual app is expensive and disruptive. Planning for it from the start costs very little extra time and opens your product to markets that are inaccessible to English-only competitors. This guide covers the three approaches to multi-language in Bubble and when to use each.
Choose Based on Your Needs
| Approach | How It Works | Best For | Complexity |
|---|---|---|---|
| Language data type | Store all UI text in a Language data type. Load the correct language record on page load. Reference Language’s field_name instead of hardcoded text. | Apps with 3+ languages; professional translation workflow needed | High — every text element references a language field |
| Custom states per language | Use a page-level language state. Conditional text on every element: If language = ‘ar’ show Arabic text; else show English text. | Apps with 2 languages; small text count | Medium — manageable for small apps, unscalable for large ones |
| URL-based subdomain | en.yourapp.com, ar.yourapp.com — separate Bubble pages per language | Apps where SEO in each language is important; high-value markets | Very High — duplicate pages; difficult to maintain |
The Scalable Pattern
code
: text (en, ar, fr, ur)
name
: text (English, Arabic, French, Urdu)
direction
: option set (LTR, RTL)
// Add one field per UI text string in your app
btn_save
: text (‘Save’ / ‘حفظ’ / ‘Enregistrer’)
nav_dashboard
: text (‘Dashboard’ / ‘لوحة القيادة’)
msg_welcome
: text (‘Welcome back!’ / ‘مرحباً بعودتك’)
// One record per language; all translations in one place
preferred_language
-> Language
// Set on signup (browser language detection) or via settings
// Default: Language where code = ‘en’
Set state ‘active_language’
= Current User’s preferred_language
// Or: = Search for Languages [code = URL param ‘lang’]:first item
// Display text: reference the active language’s field
Text element
: Page’s active_language’s btn_save
Page direction condition
When active_language’s direction = RTL
Apply CSS class ‘rtl-layout’ which sets direction:rtl
// Add to page HTML header:
Arabic, Urdu, and Hebrew Layout Considerations
Text Direction
Arabic, Urdu, and Hebrew read right-to-left. The entire page layout needs to mirror. Use Bubble’s conditional CSS class application to toggle a .rtl-layout class on the page body when the active language is RTL.
Number and Currency Formatting
Arabic numerals (١٢٣) vs Western (123) vs Eastern Arabic. Currency symbols position (before or after amount). Date format differences. Store these as Language record fields: currency_symbol, currency_position, number_format.
Font Compatibility
Bubble’s default font (DM Sans, Inter, etc.) may not support Arabic or Urdu script. Use Google Fonts: Noto Sans Arabic for Arabic/Urdu support. Load the font conditionally when RTL language is active to avoid loading it for all users.
Build Your Bubble.io App With Expert Help
Pakistan’s leading Bubble.io development team. Multi-tenant SaaS architecture, Stripe billing, and full product builds done right from day one.
