# Native Translations

> Guide for native WinnetouJs translations (i18n). Use when this capability is needed.

- Skill: `tomevault-io/native-translations` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/native-translations`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/native-translations/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/native-translations

---


RULES:

- import: `updateTranslations`, `changeLang`
- base language is JS/TS file (not JSON)
- JSON files live in public/translations
- call `updateTranslations()` before render (await)
- use `changeLang(code, reload)` to switch

BASE STRINGS (JS/TS):

```ts
import { W } from "winnetoujs";

export default W.strings = {
  appTitle: "My App",
  home: "Home",
  buttonText: "Change Language",
};
```

INIT:

```ts
import { updateTranslations } from "winnetoujs/modules/translations";
import strings from "./translations/en-us";

await updateTranslations({
  stringsClass: strings,
  translationsPublicPath: "/translations",
});
startApp();
```

JSON (public/translations/pt-br.json):

```json
{
  "appTitle": "Meu App",
  "home": "Início",
  "buttonText": "Mudar Idioma"
}
```

USE IN CONSTRUCTO:

```ts
new $header({ title: strings.appTitle }).create("#app");
```

CHANGE LANGUAGE:

```ts
import { changeLang } from "winnetoujs/modules/translations";

changeLang("pt-br", true); // reload
```

NO RELOAD (manual re-render):

```ts
await changeLang("pt-br", false);
renderApp();
```

BEST PRACTICES:

- keep keys consistent across JSON files
- group strings by feature for large apps
- avoid hardcoded UI strings

TROUBLESHOOT:

- not loading: check translationsPublicPath and JSON location
- not updating: use reload or re-render
- base not working: export `W.strings` and await `updateTranslations()`

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/cedrosdev) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->