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 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.
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.
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.
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.
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.
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
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 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)
Community Support
It has 29,978 downloads/week 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)
Community Support
It has 3,052 downloads/week 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)
Community Support
It has 13,588 downloads/week 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.
Top comments (6)
Hi, maintainer of
inlanghere. We are currently building a well-integrated solution to sveltekit. We offer an VSCode extension, CLI, an sveltekit js library & an editor where you can easily translate or invite contributors to translate. Check it out: inlang.com/documentationHello @felixhaeberle
We have had discussion in the past github.com/inlang/inlang/discussio...
I like this initiative but I am waiting for things to settle down until they are production ready.
we are currently doing a major refactor which we release next week! you can follow our progress on github if you want 🤲
we then support all major requirements outlined by you in the discussion & much more.
Awesome!!!
Can't wait to integrate one more article in this series
Hi Aakash, has there been any develops in this area since you wrote this post? What are you using currently?
Hello Ben,
I personally liked typessafe-i18n. Unfortunately the author is no more and hence this library is not maintained. But you can Google for paraglide-js, it is successor to typesafe-i18n and easy to integrate with svelte ecosystem.