@shiftescape/astro-i18n-toolkit
Live i18n debugger in your Astro dev toolbar. Translation coverage map across all locales and a one-click locale switcher. Works with any i18n library — or none at all.
features
No more discovering missing translations after a deploy. Catch them in dev.
Every key colour-coded: green complete, amber fallback, red missing — per locale.
Coverage percentage per locale so you instantly know which ones need the most work.
One click switches the active locale via middleware. No URL editing required.
Filter keys by name or reference value in real time across all locales.
Reads JSON or YAML files directly. Works alongside
astro-i18next, Paraglide, or none.
Middleware and toolbar stripped in astro build. Zero
production footprint.
how the locale switcher works
A clean three-step flow with no persistent state.
The panel shows buttons for every locale in your
config.i18n.locales.
Click one.
The integration computes the correct locale-prefixed path and sends it back to the client as a short-lived cookie.
The injected
pre middleware reads the
cookie, redirects to the target URL, and immediately expires the
cookie — no persistent state.
configuration
If you use Astro's built-in
i18n config, locales are
detected automatically.
import { defineConfig } from 'astro/config' import i18nToolkit from '@shiftescape/astro-i18n-toolkit' export default defineConfig({ i18n: { defaultLocale: 'en', locales: ['en', 'fr', 'de'], }, integrations: [ i18nToolkit({ localesDir: './src/locales', // default defaultLocale: 'en', // reference locale format: 'json', // 'json' | 'yaml' }), ], })
| Option | Type | Default | Description |
|---|---|---|---|
| localesDir | string | './src/locales' | Path to locale files, relative to project root. |
| defaultLocale | string | 'en' | Reference locale — all others compared against this for the coverage map. |
| format | 'json' | 'yaml' | 'json' | File format of translation files. YAML support is built-in, no extra deps needed. |
install
Reads locale files directly from disk — no library coupling, no adapter needed.
src/locales/ en.json ← reference locale fr.json de.json // en.json { "nav": { "home": "Home", "about": "About" }, "hero": { "title": "Welcome" } }