svelte-i18n. It includes a reactive i18n service
for managing languages and locales.Interactive Demo
Try the i18n service in action. Switch languages, add new ones, and see the reactive state update.
Language Switcher
currentLocale: enisLoading: falselanguages.length: 2
Manage Languages
Live Translation Preview
dialog.confirm: dialog.confirmdialog.cancel: dialog.canceldialog.ok: dialog.okdialog.areYouSure: dialog.areYouSure
popconfirm.confirm: popconfirm.confirmpopconfirm.cancel: popconfirm.cancelloadMore.loadMore: loadMore.loadMoreloadMore.loading: loadMore.loading
Overview
Pure Admin uses svelte-i18n for internationalization with an enhanced i18n service
that provides reactive language management using Svelte 5 runes.
- Built-in translations - English and Czech for all library components
- Reactive i18n service - Manage languages and locales with Svelte 5 runes
- Flexible loading - Bundled, injected, or async/API loading strategies
- Easy setup - Works out of the box, or customize with
i18n.init() - svelte-i18n compatible - Full access to all svelte-i18n features
Reserved Namespaces
The library uses these translation key namespaces for its components:
Dialog service (confirm, alert, prompt)
Popconfirm component
Shortcut help dialog
Command palette component
Loading Scenarios
The i18n system supports three loading strategies to fit different application needs.
1 Bundled (Default)
Works out of the box with built-in English and Czech translations. No initialization required.
2 Injected at Init
App provides translations at initialization (e.g., embedded in HTML by backend).
3 Async/API Loading
Load translations on-demand via custom loader function when switching languages.
i18n Service API
The i18n service provides a reactive API for managing languages and locales.
Reactive Properties
| Property | Type | Description |
|---|---|---|
currentLocale | string | Current active locale code |
languages | Language[] | Available languages list |
isLoading | boolean | True while loading translations asynchronously |
fallbackLocale | string | Fallback locale code |
loadedLocales | Set<string> | Set of loaded locale codes |
Methods
| Method | Description |
|---|---|
init(options) | Initialize with options (locale, languages, translations, loader) |
setLocale(code) | Switch to a locale (loads async if needed) |
getLanguage(code) | Get language by code |
isLocaleLoaded(code) | Check if locale translations are loaded |
setLanguages(langs) | Replace the entire languages list |
addLanguage(lang) | Add a language to the list |
removeLanguage(code) | Remove a language from the list |
addTranslations(code, data) | Add translations for a locale |
setTranslationLoader(fn) | Configure the async translation loader |
Language Picker Component
Build a language picker using the i18n service's reactive properties.
i18n.isLoading property lets you show a loading indicator
while translations are being fetched asynchronously.Using Translations
Use the $_() store from svelte-i18n to translate strings in your components.
In Svelte Components (.svelte)
In Service Files (.ts)
In non-reactive contexts (like service files), use get() from svelte/store to read the translation.
$_() syntax is Svelte's store auto-subscription. It only works in .svelte files.
In .ts files, use get(_) instead.Adding App Translations
Add your own translations using the i18n service or addMessages().
Overriding Library Strings
Want to customize the library's built-in strings? Use registerLibraryTranslations().
registerLibraryTranslations() after initI18n() to ensure your overrides take effect.Advanced Features
Interpolation & Plurals
svelte-i18n supports ICU message format for interpolation and pluralization.
Built-in Translation Keys
Here are all the translation keys provided by the library. You can override any of these.
dialog.*
| Key | English Default | Description |
|---|---|---|
dialog.confirm | Confirm | Confirm dialog title |
dialog.cancel | Cancel | Cancel button text |
dialog.ok | OK | OK button text |
dialog.alert | Alert | Alert dialog title |
dialog.input | Input | Prompt dialog title |
dialog.areYouSure | Are you sure? | Default confirm message |
dialog.enterValue | Please enter a value | Default prompt message |
dialog.defaultTitle | Dialog | Default dialog title |
popconfirm.*
| Key | English Default | Description |
|---|---|---|
popconfirm.confirm | Yes | Confirm button text |
popconfirm.cancel | No | Cancel button text |
shortcuts.*
| Key | English Default | Description |
|---|---|---|
shortcuts.title | Keyboard Shortcuts | Help dialog title |
shortcuts.noShortcuts | No shortcuts registered | Empty state message |
shortcuts.generalCategory | General | Default category name |
shortcuts.showShortcuts | Show keyboard shortcuts | Shortcut description |
commandPalette.*
| Key | English Default | Description |
|---|---|---|
commandPalette.placeholder | Type a command or search... | Input placeholder |
commandPalette.loading | Loading... | Loading indicator |
commandPalette.noResults | No results found | Empty search state |
commandPalette.commands | Commands | Commands section label |
commandPalette.search | Search | Search label |
loadMore.*
| Key | English Default | Description |
|---|---|---|
loadMore.loadMore | Load more | Button text |
loadMore.loading | Loading... | Loading state text |
Type Definitions
Language
I18nInitOptions
Exports Reference
Everything you need is exported from the main package:
Adding a New Language
To add a new language to your app, you need to provide translations for all keys your app uses. You can optionally also provide translations for the library's built-in keys.
en.ts) and translating the values to your target language. locales/[lang].ts file.