Skip to main content

Example apps

Runnable example apps — one per framework — all demonstrating the same feature set: init

  • a language switcher, both <I18nKeylessText> / <T> and getTranslation, the replace and context options, two pages for client navigation, and (for SSR apps) server-rendered translated HTML via ?lang=en with flash-free hydration.

Each example ships a passing test suite and runs offline against a bundled mock backend — no API key needed.

Base: github.com/arnaudambro/i18n-keyless/tree/main/examples

ExampleFrameworkModeDemonstrates
vite-reactVite + ReactSPABaseline: init, storage, <T>, getTranslation, switcher.
tanstack-startTanStack StartSSR + SPABoth paths: <I18nKeylessProvider> via root loader (component) + runWithI18nKeyless in loaders / head() (function). Requires ≥ 2.3.2.
remix-rr7Remix / React Router 7SSRrunWithI18nKeyless in entry.server; both paths resolve from the ALS.
nextjsNext.js (App Router)SSRServer layout fetches translations → <I18nKeylessProvider> client boundary.
astroAstro + React islandsSSRIsland + <I18nKeylessProvider> with serialized props.
nodeNode.js (no React)serveri18n-keyless-node + awaitForTranslation.
react-nativeReact Native (CLI)nativeMMKV / AsyncStorage adapter.
expoExpo RouternativeExpo storage + router.

Run any of them

cd examples/<name>
cp .env.example .env # leave the API key empty to run offline
npm install
npm run dev

To try it fully offline, leave API_KEY empty in .env and run examples/_mock-server alongside it — no real API key required.

Which one to copy

Match the example to your stack, then read the matching SSR framework guide for the why behind each step — especially TanStack Start, where the two-paths model actually bites.