Skip to main content
DiscordGithub Tolgee jSGithub Tolgee Server

Tolgee for Svelte

Svelte
+
love
=
love

Tolgee for Svelte provides simple API to create multi-lingual Svelte application. With Tolgee i18n library for Svelte you can enjoy all Tolgee i18n features.

To see Svelte with Tolgee in action, check this example app.

npm i @tolgee/svelte @tolgee/ui

In-context localization 🐁

Tolgee for Svelte is not just an i18n library. It provides much more. With in-context localization feature, you can just Alt + Click translations in your app and translate them directly. No more extracting, no more editing of .jsons or .xliff.

Localization platform ☁️

Tolgee localization platform provides simple user interface where, you can edit all your localization string. So you don't have to worry about choosing other tool for editing your translations. Tolgee and it's SDKs is all you need to localize your app.

Simple integration 🎉

To integrate Tolgee to Svelte project, you can just simply follow these docs, or use integration guides in Tolgee platform. You can do that in less than one minute.

Automated screenshot generation 📸

With in-context localization UI, you can take screenshots of your application and uploaded them to Tolgee platform just by single click.

Open-source 📖

Tolgee platform and integration libraries are open-source. So you can self-host it and be fine!

Get started!

1. Create project in Tolgee platform

Go to Tolgee Cloud app or access your self-hosted instance and create a project. Then obtain your API key.

2. Setup Tolgee integration

Install the npm packages.

npm i @tolgee/svelte @tolgee/ui

Then wrap your code with TolgeeProvider

<script>  import { TolgeeProvider } from "@tolgee/svelte";  import UI from "@tolgee/ui";
  const tolgeeConfig = {    preloadFallback: true,    ui: UI,    apiUrl: 'https://app.tolgee.io',    apiKey: '<your API key>',  };</script>
<TolgeeProvider config={tolgeeConfig}>  <div slot="loading-fallback">Loading...</div>  <slot /></TolgeeProvider>

3. Use T component to translate your texts

<script>  import { T } from "@tolgee/svelte";</script><h1>  <T keyName="translate_me">Translate me!</T></h1>

Now you are able to Alt + Click & translate your texts!

Explore the Docs and check out example app!

Continue exploring...