Vanilla JS usage

The core engine gives you the runtime behaviour. Your app decides how to present it.

Context per area

Set a default context on the engine, then override it for specific calls when needed.

ts
const engine = create18waysEngine({
  apiKey: 'YOUR_18WAYS_PUBLIC_API_KEY',
  baseLocale: 'en-GB',
  locale: 'fr-FR',
  context: 'app',
});
 
const payNow = await engine.t('Pay now', {
  context: 'checkout.button',
});

Variables work the same way

ts
const line = await engine.t('Hello {name}', {
  vars: { name: 'Ada' },
});

The same waysParser syntax used in React works here too.

Cache behaviour

The engine keeps a translation store in memory.

That means:

  • the first request for a new string or locale may hit the API
  • later requests can be served from the store
  • switching back to a previous locale is cheap if the translations are already cached

Bring your own locale controls

In Vanilla JS, locale switching is explicit.

ts
async function setLocale(locale) {
  engine.setLocale(locale);
  await render();
}

That is a better fit than pretending the core package owns routing or React state.

When to stay in the core package

Stay here if you want maximum control.

Move up to the React or Next packages when you want:

  • JSX translation primitives
  • built-in locale hooks
  • adapter-managed routing and metadata