Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

Localize: Overview

Is meant to translate text into multiple languages. In it's simplest form it is a function that returns the translated text for a namespace + key.


  • Uses es modules
  • Formatting of numbers, amounts
  • Formatting of dates

Further examples and a more in depth description can be found at the Use Cases Page.


Translate TextLoad and translate text in multiple languages
Format NumbersFormat numbers in multiple languages
Format DatesFormat dates in multiple languages


npm i --save @lion/ui
import { localize } from '@lion/ui/localize.js';


The locale which will be loaded by default is accessed via the localize.locale.

The single source of truth for page's locale is <html lang="my-LOCALE">. At the same time the interaction should happen via localize.locale getter/setter to be able to notify and react to the change.

import { localize } from '@lion/ui/localize.js';

localize.addEventListener('localeChanged', () => {
  // do smth when data is loaded for a new locale

// changes locale, syncs to `<html lang="es-ES">` and fires the event above
localize.locale = 'es-ES';