Internationalization in SvelteKit with svelte-i18n, sveltekit-i18n and typesafe-i18n
Tags: sveltekit, sveltei18n, sveltekiti18n, typesafei18n
Published: 2023-08-02 14:55:25

In this series, I'll be demonstrating internationalization in SvelteKit with three different libraries: svelte-i18n, sveltekit-i18n and typesafe-i18n.

## Internationalization in SvelteKit with svelte-i18n

This is the first article of three-part series to demonstrate i18n in SvelteKit. In this article, we will work on integrating *svelte-i18n* with SvelteKit.

*svelte-i18n* helps you localize your app using the reactive tools Svelte provides. By using stores to keep track of the current `locale`, `dictionary` of messages and `format` messages, it keeps everything neat, in sync and easy to use on svelte files.

Under the hood, *svelte-i18n* uses [formatjs](https://formatjs.io/) for localizing messages. It allows *svelte-i18n* to support the ICU message syntax.

### Application Structure

Before we begin, I want to give you a detailed walkthrough of the application that we will be working on. You can find the code in the [GitHub repository](https://github.com/aakash14goplani/sveltekit-with-sveltei18n).

![svelte-i18n](https://cdn.hashnode.com/res/hashnode/image/upload/v1690286047702/54c0dc32-f5c3-453e-85b0-7f986af6c5d7.png)

As we can see from the image, this will be a simple single-page application demonstrating i18n features like *locale switching*, *pluralization* and *formatting*.

In the next section, we will work on integrating the *svelte-i18n* library with SvelteKit.

### Integration with SvelteKit

Read the complete integration flow on my [blog](https://blog.aakashgoplani.in/internationalization-in-sveltekit-with-svelte-i18n).

---

## Internationalization in SvelteKit with sveltekit-i18n

This is the second article of three-part series to demonstrate i18n in SvelteKit. In the previous article, we worked our way with *svelte-i18n* and in this article, we will work on integrating *sveltekit-i18n* with SvelteKit.

The *sveltekit-i18n* is a tiny library with no external dependencies, built for Svelte and SvelteKit. Key features include:

* SvelteKit ready.
* SSR support.    
* Custom data sources: no matter if you are using local files or remote API to get your translations.    
* Module-based: your translations are loaded for visited pages only (and only once!)    
* Component-scoped translations: you can create multiple instances with custom definitions.    
* Custom modifiers: you can modify the input data the way you need.    
* TS support.    
* No external dependencies.    

### Application Structure

Before we begin, I want to give you a detailed walkthrough of the application that we will be working on. You can find the code in the [GitHub repository](https://github.com/aakash14goplani/sveltekit-with-sveltekiti18n).

![sveltekit-i18n](https://cdn.hashnode.com/res/hashnode/image/upload/v1690909653107/8f1d9d88-1a94-4660-a08f-f863c731a37b.png)

As we can see from the image, this will be a simple single-page application demonstrating i18n features like *locale switching*, *pluralization* and *formatting*.

In the next section, we will work on integrating the *sveltekit-i18n* library with SvelteKit.

### Integration with SvelteKit

Read the complete integration flow on my [blog](https://blog.aakashgoplani.in/internationalization-in-sveltekit-with-sveltekit-i18n).

---

## Internationalization in SvelteKit with typesafe-i18n

This is the final article of three-part series to demonstrate i18n in SvelteKit. In the previous article, we worked our way with *sveltekit-i18n* and in this article, we will work on integrating *typesafe-i18n* with SvelteKit.

The *typesafe-i18n* is a fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. One thing that makes *typesafe-i18n* stand out is that it is a generic library and not limited to Svelte, you can use it with any of your JavaScript or TypeScript projects.

This library introduces a full-fledged flow for maintaining localization in your application. The moment you install this library, it generates a specific folder structure encompassing all the i18n-specific files.

### Application Structure

Before we begin, I want to give you a detailed walkthrough of the application that we will be working on. You can find the code in the [GitHub repository](https://github.com/aakash14goplani/sveltekit-with-typesafe18n).

![typesafe-i18n](https://cdn.hashnode.com/res/hashnode/image/upload/v1690910323040/d14c6da9-0986-485f-b88f-7bd56b4a3c0a.png)

As we can see from the image, this will be a simple single-page application demonstrating i18n features like *locale switching*, *pluralization* and *formatting*.

In the next section, we will work on integrating the *typesafe-i18n* library with SvelteKit.

### Integration with SvelteKit

Read the complete integration flow on my [](https://blog.aakashgoplani.in/internationalization-in-sveltekit-with-typesafe-i18n)

---

## Comparing i18n libraries in SvelteKit: svelte-i18n, sveltekit-i18n and typesafe-i18n

Based on my learnings from localizing applications in SvelteKit with *svelte-i18n*, *sveltekit-i18n* and *typesafe-i18n*, I've come up with advantages and limitations of each of these libraries.

### svelte-i18n

#### Features

* It is a simple and minimalistic library that uses [**formatjs**](https://formatjs.io/) for localizing messages and supports the ICU message syntax.
    
* It offers to load translations in a synchronous as well as asynchronous manner as per requirement.
    
* Provides a decent number of options for formatting and pluralization.
    

#### Ease of Use

* Since this library uses native Svelte stores for implementing localization, it feels like part of the ecosystem and hence very easy to get started with!
    
* If you have a simple requirement of changing translations based on a given locale with limited formatting, this should be your go-to library.
    

#### Size

* As of v3.7.0, the size of the *svelte-i18n* package is 48.3 kB in the minified form and 14.2 kB in minified + gzipped form. ([source](https://bundlephobia.com/package/svelte-i18n@3.7.0))
    

#### Community Support

* It has [29,978 downloads/week](https://www.npmjs.com/package/svelte-i18n) as of the time of writing this article.
    
* The only downside is, this library is not actively managed. Several issues are on the rise and resolution is almost zero.
    

#### Limitations

* There are very less options available for formatting and pluralization.
    
* As mentioned before, the library is not actively managed.
    

---

### sveltekit-i18n

#### Features

* It is **built for SvelteKit** and has good SSR support.
    
* We can load translations from API, database and local file system.
    
* The translations are loaded for visited pages only. (and only once!)
    
* Component-scoped translations: you can create multiple instances with custom definitions.
    
* It provides good TS support and has no external dependencies.
    
* Supports ICU syntax + provides a native parsing engine as well.
    

#### Ease of Use

* It is very easy to use. I found it even easier while working with the ICU parser (instead of the default parser).
    

#### Size

* As of v2.4.2, the size of the *sveltekit-i18n* package is 14 kB in the minified form and 4.6 kB in minified + gzipped form. ([source](https://bundlephobia.com/package/sveltekit-i18n@2.4.2))
    

#### Community Support

* It has [3,052 downloads/week](https://www.npmjs.com/package/sveltekit-i18n) as of the time of writing this article.
    
* Even though the number of downloads is less than the *svelte-i18n* but good news is that this library is actively maintained.
    

#### Limitations

* While working with pluralization, understanding the syntax of the default parser could be a bit challenging at the start.
    

---

### typesafe-i18n

#### Features

* It is a lightweight, easy-to-use syntax and has no external dependencies.
    
* Because of its strong typings, it prevents you from making mistakes (also in plain JavaScript projects).
    
* Unlike the other two libraries, typesafe-i18n can be used with any framework and supports both TypeScript and JavaScript.
    
* Creates boilerplate code for you which ensures the well-structured flow of i18n in your codebase.
    
* Supports plural rules and allows formatting of values e.g. locale-dependent date or number formats.
    
* It also supports switch-case statements e.g. for gender-specific output.
    
* Provides an option for asynchronous loading of locales.
    
* It supports SSR (Server-Side Rendering) and can be used for frontend, backend and API projects.
    
* Import and Export translations from/to files or services.
    

#### Ease of Use

* It has some initial learning curve but as soon as we become familiar with the *typesafe-i18n* ecosystem, this library is not only easy to use but super convenient as well!
    
* *Personally, this is my go-to library for i18n*.
    

#### Size

* As of v5.26.0, the size of the *typesafe-i18n* package is 2.8 kB in the minified form and 1.3 kB in minified + gzipped form. ([source](https://bundlephobia.com/package/typesafe-i18n@5.26.0))
    

#### Community Support

* It has [13,588 downloads/week](https://www.npmjs.com/package/typesafe-i18n) as of the time of writing this article.
    
* This library is actively maintained.
    

#### Limitations

* It has a huge eco-system (generators, detectors, importers, exporters etc.) and hence learning curve is a bit steep.