# Internalization (/ink/translate)





As explained in more detail <DynamicLink href="/start/translate">here</DynamicLink>, Pixi’VN gives the possibility to translate the game text using a library, such as [i18next](https://www.i18next.com/&#x29;. Also in ***ink* + Pixi’VN integration*&#x2A; you can use a library to translate the text of the &#x2A;**ink***.

Pixi’VN gives the developer the ability to intercept the translation event with the [`onInkTranslate`](/jsdoc/pixi-vn-ink/index/functions/onInkTranslate) function.

<CodeBlockTabs defaultValue="lib/hooks/ink-hooks.tsx">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="lib/hooks/ink-hooks.tsx">
      lib/hooks/ink-hooks.tsx
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="ink/start.ink">
      ink/start.ink
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="locales/es.json">
      locales/es.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="lib/hooks/ink-hooks.tsx">
    ```ts
    import { onInkTranslate } from "@drincs/pixi-vn-ink";
    import { useEffect } from "react";
    import { useTranslation } from "react-i18next";

    export default function useInkInitialization() {
        const { t } = useTranslation(["narration"]);
        useEffect(() => {
            onInkTranslate(t);
        }, [t]);

        return null;
    }
    ```
  </CodeBlockTab>

  <CodeBlockTab value="ink/start.ink">
    ```ink
    === start ===
    Hello, my name is [joe]
    -> DONE
    ```
  </CodeBlockTab>

  <CodeBlockTab value="locales/es.json">
    ```json
    {
        "narration": {
            "Hello, my name is [joe]": "Hola, mi nombre es {{joe}}"
            // ...
        }
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Auto-generation of translation files [#auto-generation-of-translation-files]

<Callout title="Templates" type="info">
  In all templates, you can use the following button in the settings to automatically generate the json file that will be used for translations.
    <img alt="dowload-translate" src="__img0" />
</Callout>

To facilitate the creation of the translation files, you can use the [`generateJsonInkTranslation`](/jsdoc/pixi-vn-ink/index/functions/generateJsonInkTranslation) function to automatically generate the JSON structure from the ink text.

```ts title="lib/i18n.ts"
import { generateJsonInkTranslation } from "@drincs/pixi-vn-ink";
import i18n from "i18next";
import { convertInkToJson } from "./utils/ink-utility";

function getLocalesResource(
    lng: string,
): Promise<Record<string, Record<string, string>>> {
    return import(`./../locales/${lng}.json`);
}

async function generateResourceToTranslate(lng: string): Promise<any> {
    let res = await getLocalesResource(lng);
    res = { ...res };
    if (!res) {
        res = {};
    }
    if (!res.narration) {
        res.narration = {};
    }
    if (res.default) {
        delete res.default;
    }
    const manifest = await import("@/assets/ink-manifest.gen.json");
    for (const path of manifest.default) {
        const element = await fetch(path).then((r) => r.json());
        element && (await generateJsonInkTranslation(element, res.narration));
    }
    return res;
}

export async function downloadResourceToTranslate() {
    const lng = i18n.options.fallbackLng?.toString() || "en";
    const data = await generateResourceToTranslate(lng);
    const jsonString = JSON.stringify(data);
    // download the save data as a JSON file
    const blob = new Blob([jsonString], { type: "application/json" });
    // download the file
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `strings_${lng}.json`;
    a.click();
}
```