Typed i18n for shipping faster
transle
@hnamhocit/transle
transle is built for developer experience: split locale files, typed keys, zero-framework setup, and a tiny API your team can learn in minutes.
1npm install @hnamhocit/transle2npm install @hnamhocit/transle react1import { createI18n, defineMessages } from "@hnamhocit/transle";2import en from "./locales/en";3import vi from "./locales/vi";45const i18n = createI18n({6 defaultLocale: "en",7 fallbackLocale: "en",8 persist: true,9 messages: defineMessages({ en, vi })10});1112i18n.t("hero.summary", { name: "Nam" });Why choose transle
Built for DX, speed, and low setup cost.
Typical i18n stacks solve everything and make you pay for it in config, runtime weight, and team onboarding. transle keeps the common path fast.
zero-cost setup
The API surface stays small: createI18n, defineMessages, defineLocale, t, setLocale.
Scales with big apps
Keep one file per locale and grow by feature folders instead of forcing everything into one monolith dictionary.
Faster day-one integration
Import it, map locale files, and ship. No routing layer, plugin maze, or giant bootstrapping checklist.
Zero-cost mental model
The API surface stays small: createI18n, defineMessages, defineLocale, t, setLocale.
Practical UX included
Fallback locale and localStorage persistence are built in, so real product behavior does not need extra glue.
Quickstart
Copy the structure and move.
Install
1npm install @hnamhocit/transle2npm install @hnamhocit/transle reactReact
1import { createI18n } from "@hnamhocit/transle/react";2import en from "./locales/en";3import vi from "./locales/vi";45const useI18n = createI18n({6 defaultLocale: "en",7 persist: true,8 messages: { en, vi }9});1011export function Greeting() {12 const i18n = useI18n();13 return <p>{i18n.t("hero.summary", { name: "Nam", count: 2 })}</p>;14}JSON locale files
1import { createI18n, defineMessages } from "@hnamhocit/transle";2import en from "./locales/en.json";3import vi from "./locales/vi.json";45const i18n = createI18n({6 defaultLocale: "en",7 fallbackLocale: "en",8 messages: defineMessages({ en, vi })9});What you get
Useful runtime features, not ceremony.
Fallback locale
Missing keys can fall back to a safe default locale instead of silently breaking copy.
Locale persistence
Keep the selected language after reload with persist, no extra storage wrapper needed.
AI-ready conventions
Locale files, typed keys, and a small API are easier for coding agents to apply consistently.
AI prompt
Copy this for agents.
transle agent prompt
1You are implementing i18n with @hnamhocit/transle.23Rules:4- Use "@hnamhocit/transle" for vanilla JS/TS.5- Use "@hnamhocit/transle/react" for React.6- Use defineMessages({ en, vi, ... }) when locales come from separate files.7- Use defineLocale(...) inside per-locale TS files when you want strong typing at the source.8- Keep messages nested and use dot-path keys.9- JSON locale files should contain one locale object per file.10- Define defaultLocale and prefer fallbackLocale.11- Use persist when locale should survive reloads.12- Keep the same key paths across locales.13- Do not add a heavier i18n framework unless asked.