Skip to main content
Version: 5.x.x

Installation

To use Tolgee in your React application, you need to follow these steps:

  1. Install the Tolgee integration library
  2. Set up the environment variables
  3. Configure the TolgeeProvider
  4. Preparing for production

Install the Tolgee integration library​

To install Tolgee Svelte integration library, run the following command.

npm install @tolgee/svelte

Set up the environment variables​

Once the library is installed, you need to initialize it. For initialization, you need the Tolgee API URL, and the Tolgee API Key. To generate the API Key, follow the step-by-step instructions mentioned on the API keys and PAT tokens page.

danger

Make sure you don't leak your API key. If the API key is leaked, visitors can edit the translations on your site.

After generating the API key, add these credentials. If you bootstrapped the application with SvelteKit, add them to the .env.development.local file. Your .env.development.local should look as follow.

VITE_TOLGEE_API_KEY=tgpak_gfpwiojtnrztqmtbna3dczjxny2ha3dmnu4tk4tnnjvgc
VITE_TOLGEE_API_URL=https://app.tolgee.io

Configure the TolgeeProvider​

Next, initialize Tolgee and wrap the application in TolgeeProvider.

<script>
  import { TolgeeProvider, Tolgee, DevTools, FormatSimple } from '@tolgee/svelte';

  const tolgee = Tolgee()
    .use(DevTools())
    .use(FormatSimple())
    .init({
      language: 'en',

      // for development
      apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
      apiKey: import.meta.env.VITE_TOLGEE_API_KEY,

      // for production
      staticData: {
        ...
      }
    });
</script>

<TolgeeProvider tolgee={tolgee}>
  <div slot="fallback">Loading...</div>
  <slot />
</TolgeeProvider>

The above code does the following:

  • Imports the required methods and plugins from the integration library.
  • Configures the Tolgee instance to use the DevTools and FormatSimple plugins, and initializes it using the credentials. It also sets the language to English.
  • Wraps a component within the TolgeeProvider.

You can configure more options and plugins during initialization. Learn about other options and Tolgee plugins in their respective documentation.

Preparing for production​

Tolgee will automatically omit DevTools from your bundle when you build your app for production. So it won't fetch translations directly from Tolgee Platform and it won't allow users to modify translations.

There are generally two ways how to use translations in production:

In production mode, you should never use localization data directly from Tolgee REST API, because it can negatively affect your page performance.

tip
You can also check the Svelte example application to learn more.