Translations

Message catalogs, translation parameters, and additional languages in Edge Kit, including UI, validation, authentication, emails, and content.

Translations live in message catalogs, with one JSON file per language. English and Spanish are ready to use; add your product's copy to both so customers have the same experience in either language.

Messages

Add the same key to each catalog. For example:

messages/en.json

"notes.title": "Your notes"

messages/es.json

"notes.title": "Tus notas"

Insert the entries inside the existing JSON objects. Development regenerates the messages automatically, so the new label is available as m["notes.title"]().

Reusable labels can stay short, such as save. Feature-specific messages use names such as notes.title. Preserve parameters like {name} across translations, and use message variants for plural or conditional text.

For a message with parameters, pass named values to the generated function. The included sign-in title uses the product name:

import { appConfig } from "@/config/app";
import { m } from "@/lib/i18n/messages.js";

const title = m["auth.login.title"]({ name: appConfig.name });

The message is Sign in to {name} in English. Keeping {name} in each translation lets Paraglide check the parameter while choosing the current language's wording.

Generated messages

Edit the catalogs rather than generated output. Your changes will then survive compilation and remain consistent with the supported languages.

Additional languages

Let's take a look at how to add another language to your application. For example, we can add French language to your app:

Locale configuration

Extend the language list in project.inlang/settings.json, keeping its existing modules and path pattern:

"baseLocale": "en",
"locales": ["en", "es", "fr"]

Create messages/fr.json with the same keys and parameters as English. Translate the full catalog, including email text and accessibility labels.

Formatting and authentication

Add the new language to the validation and date dictionaries in the locale configuration. French uses these loaders:

// Validation dictionary
fr: () => import("zod/v4/locales/fr.js"),

// Date dictionary
fr: () => import("dayjs/locale/fr"),

Include the matching Better Auth dictionary in the auth server's translations too. App messages and authentication errors have separate dictionaries. Check that the language menu presents the new language with a readable label.

Compilation

Development and installation use the configured Paraglide compiler. For an explicit check:

pnpm exec paraglide-js compile --outdir ./src/lib/i18n --emit-ts-declarations --strategy url cookie preferredLanguage baseLocale
pnpm lint
pnpm build

Test a direct localized URL, language switching, browser navigation, validation errors, an auth error, and an email preview in French.

Troubleshooting

For a missing message, check JSON syntax, the exact key, and matching parameters. Restart development if compilation has not rerun. Type errors should be resolved in the source catalog or language configuration.