Internationalization (i18n)

GuideFlow includes an extensible translation registry with locale fallback for building multilingual tours.

I18nRegistry

The I18nRegistry manages translations and resolves strings based on the active locale.

import { createGuideFlow } from '@guideflow/core'

const gf = createGuideFlow()

// Register translations
gf.i18n.register('en', {
  'tour.welcome.title': 'Welcome!',
  'tour.welcome.body': 'Let us show you around.',
  'btn.next': 'Next',
  'btn.prev': 'Previous',
  'btn.skip': 'Skip',
  'btn.done': 'Done',
})

gf.i18n.register('es', {
  'tour.welcome.title': 'Bienvenido!',
  'tour.welcome.body': 'Permítanos mostrarle los alrededores.',
  'btn.next': 'Siguiente',
  'btn.prev': 'Anterior',
  'btn.skip': 'Saltar',
  'btn.done': 'Hecho',
})

// Set the active locale
gf.i18n.setLocale('es')

Using Translations in Steps

Reference translation keys in your step content:

{
  id: 'welcome',
  content: {
    title: gf.i18n.t('tour.welcome.title'),
    body: gf.i18n.t('tour.welcome.body'),
  },
  target: '#app',
}

Locale Fallback

If a key is not found in the active locale, GuideFlow falls back to the default locale (first registered locale):

gf.i18n.register('en', { 'greeting': 'Hello' })
gf.i18n.register('fr', {})  // no 'greeting' key

gf.i18n.setLocale('fr')
gf.i18n.t('greeting')  // → 'Hello' (falls back to 'en')

Dynamic Locale Switching

Change the locale at runtime — active tours will update on the next step transition:

// User changes language preference
document.querySelector('#lang-select').addEventListener('change', (e) => {
  gf.i18n.setLocale(e.target.value)
})

API

Method	Description
register(locale, translations)	Register a translation map for a locale
setLocale(locale)	Set the active locale
getLocale()	Get the current locale
t(key)	Translate a key using the active locale