Quick Start

1. Create an account

Sign up at troevo.com and create your first organization.

2. Create a project

A project maps to your application. Give it a name and select the languages you want to support (e.g. English, Finnish, Swedish).

3. Add translation keys

Inside your project, create namespaces to group related keys (e.g. common, auth, dashboard). Then add your translation keys and fill in the values for each language.

4. Publish translations

When your translations are ready, click Publish. Troevo pushes the JSON files to the CDN so your app can fetch them at runtime.

5. Integrate with your app

Troevo uses the i18next format—and the Troevo app itself loads its translations from our CDN with i18next, react-i18next, and i18next-http-backend. You can use the same setup in your React app; just replace the organization and project slugs with the values shown in your project settings:

import i18n from "i18next";
import HttpBackend from "i18next-http-backend";
import { initReactI18next } from "react-i18next";

const CDN_BASE = "https://cdn.troevo.com";
const ORGANIZATION_SLUG = "<organization-slug>";
const PROJECT_SLUG = "<project-slug>";

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    lng: "en",
    fallbackLng: "en",
    ns: ["common"],
    defaultNS: "common",
    backend: {
      loadPath: `${CDN_BASE}/${ORGANIZATION_SLUG}/${PROJECT_SLUG}/{{lng}}/{{ns}}.json`,
    },
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    },
  });

export default i18n;

That’s it — your app now loads translations from Troevo’s edge CDN.