Translate (i18n) a Svelte app without external dependencies

Adding internationalization support to a Svelte application: a step-by-step guide.

Photo by Nareeta Martin on Unsplash

As a native French speaker living in the Swiss-German part of Switzerland, it goes without saying that translations, or more precisely, enabling users to switch languages in their apps, is a topic I am well-acquainted with. I consistently implement this functionality at the beginning of every project, regardless of whether the app will be fully translated or not.

Over the course of building several Svelte applications, I have discovered a recurring pattern that I consistently employ. This pattern, which I have successfully used in previous projects with different frameworks, revolves around the utilization of a lightweight store for managing translation keys, all without relying on any third-party dependencies.

In this tutorial, I’ll share this solution and provide practical features like generating TypeScript definitions and translation utilities. These tools will streamline your workflow.

Important considerations: SEO limitations

This article covers a client-side solution for translations, which may have limitations in terms of search engine optimization (SEO). It does not address multi-language websites delivered through separate URLs or domains. While it is possible to extend the solution to accommodate such scenarios, it falls outside the scope of this tutorial’s objectives.

Language definition

When adding translations to an existing Svelte application, the first step is to define the list of supported languages.

To accomplish this, create a languages.d.ts TypeScript definition file that enumerates the supported languages. For example, you can include English and Chinese as supported languages.

type Languages = "en" | "zh-cn";

Typing support

To enable typing support in TypeScript for the translation keys used in our application, we can create an interface. In this blog post, we will explore an automated approach for generating these interfaces. However, for now, let's manually create…