Cómo elegir la librería de i18n adecuada para Svelte

Svelte no incluye nada para i18n. Ni $t, ni primitiva de locale, ni formato de mensajes. Cada opción es una elección de terceros, y el ecosistema de Svelte es donde la i18n en tiempo de compilación ha llegado más lejos, por lo que los candidatos difieren más entre sí que en React o Vue.

Esta guía enumera las preguntas que debes responder primero y luego asigna las respuestas a svelte-i18n, Paraglide, typesafe-i18n, wuchale e Intlayer, tanto para Vite + Svelte como para SvelteKit.

Tabla de contenidos

Seis preguntas a responder antes de comparar librerías

1. ¿Vite SPA o SvelteKit? En una SPA, un store a nivel de módulo es correcto: una pestaña, un usuario, un locale. En SvelteKit, ese mismo singleton se comparte entre peticiones concurrentes en el servidor, y la petición B se renderiza en el idioma de la petición A. La librería te proporciona una estructura por petición (context, locals) o te deja la tarea a ti.
2. ¿Quién escribe las traducciones? Desarrolladores, un TMS, una agencia que entrega cadenas ICU o un pipeline de IA. svelte-i18n habla ICU. Paraglide y typesafe-i18n usan su propia sintaxis. Elige según tu proveedor.
3. ¿Cuántos locales y páginas? Dos locales y cinco páginas pueden permitirse enviar todo. Diez locales y cuarenta rutas no pueden, y la diferencia entre catálogos en tiempo de ejecución y mensajes compilados se convierte en el coste principal.
4. ¿Necesitas tipado en las claves? $_("cart.totl") es un fallo en tiempo de ejecución en svelte-i18n. Las librerías en tiempo de compilación lo convierten en un error de tipo por construcción.
5. ¿Stores de Svelte 4 o runes de Svelte 5? Los runes cambian la sintaxis del estado del locale, no el problema de compartirlo. Pero $state en un archivo .ts se compila a una variable simple, por lo que el runtime de la librería debe ser compatible con runes si estás en Svelte 5.
6. ¿Puedes convivir con archivos generados en el repositorio? Paraglide y typesafe-i18n generan JavaScript o TypeScript en tu árbol de código fuente. A algunos equipos les parece bien, otros sufren conflictos de merge en cada branch paralela.

Anota las respuestas. Todo lo que sigue hace referencia a ellas.

El panorama en una imagen

La i18n en Svelte llegó más tarde que en React o Vue, y saltó directamente a las olas de tiempo de compilación.

La historia de la i18n en JavaScript cubre cada ola en detalle.

La decisión más importante: dónde reside el contenido y cuándo se carga

Dos elecciones estructurales explican la mayor parte de la diferencia de bundle entre configuraciones:

• Contenido centralizado o acotado (scoped). Un locales/en.json para toda la aplicación, o una declaración por componente.
• Importación estática o dinámica. Todo al inicio, o el locale activo (e idealmente la ruta activa) cargado bajo demanda.

El gráfico estima el payload para una aplicación teórica de 1 a 10 páginas, traducida a entre 1 y 10 locales, con aproximadamente 30 KB de texto por página.

svelte-i18n se sitúa en la parte superior izquierda por defecto: register("fr", () => import("./fr.json")) ofrece carga dinámica por locale, pero el catálogo de un locale es un solo objeto y cargarlo descarga el contenido de todas las páginas. Paraglide es el caso interesante: como cada mensaje es su propia exportación, el tree-shaking proporciona la división por páginas de forma gratuita, y el benchmark de Svelte confirma que funciona como se anuncia en Vite + Svelte (no lo hizo en los benchmarks de React y Next.js). Intlayer llega al mismo resultado mediante declaraciones por componente.

Si tu respuesta a la pregunta 3 fue "muchas páginas", dale más peso a esta sección que a cualquier preferencia de API. El artículo i18n por componente vs. centralizado cubre el aspecto de mantenimiento de esta misma compensación.

Las candidatas

Los tamaños de las librerías provienen del benchmark de Svelte: store más accesor en un componente vacío, tras bundling, tree-shaking y minificación, en una aplicación de 10 páginas y 10 locales. El contenido se mide por separado.

Las cifras son una instantánea de las versiones del benchmark. Ejecútalo en tu propia aplicación antes de decidir solo por el tamaño.

El tamaño de librería casi nulo de Paraglide es por construcción: el runtime se genera dentro de tu repositorio. Intlayer necesita vite-intlayer, por lo que no puede ejecutarse sin un paso de build.

Asigna tus respuestas a una librería

Dónde se queda corta cada librería

• svelte-i18n: la más pesada del conjunto, sin tipos en claves, sin división por ruta, store a nivel de módulo que se filtra entre peticiones en SvelteKit a menos que configures el context tú mismo.
• typesafe-i18n: un proceso observador (watcher), archivos generados en el repositorio y un repositorio que no ha tenido mucho movimiento recientemente.
• Paraglide: archivos generados commiteados en el repositorio y regenerados antes de cada push, conflictos de merge en branches paralelas, y el locale se lee de la cookie o storage en cada llamada a un mensaje en lugar de un store, lo que genera trabajo extra en cambios de locale.
• wuchale: idea de extracción interesante, aún temprana. El benchmark de React encontró problemas de reactividad que obligaban a forzar re-renders del provider, y la documentación es escasa.
• Intlayer: plugin de build obligatorio, ecosistema más pequeño, soporte parcial de ICU y contenido distribuido por la base de código por diseño, por lo que exportar un único JSON para un traductor requiere herramientas.

Cómo se ve cada opción en código

El mismo componente, un resumen del carrito con un título y un plural, escrito con cada candidata. La parte interesante no es el markup, sino dónde reside el contenido, cómo se almacena el locale y qué sabe el comprobador de tipos.

{
  "cart": {
    "title": "Your cart",
    "items": "{count, plural, one {# item} other {# items}}"
  }
}

<script lang="ts">
  import { _ } from "svelte-i18n";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$_("cart.title")}</h2>
  <p>{$_("cart.items", { values: { count } })}</p>
</section>

{
  "cart_title": "Your cart",
  "cart_items": "{count} items"
}

<script lang="ts">
  import { m } from "$lib/paraglide/messages.js";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{m.cart_title()}</h2>
  <p>{m.cart_items({ count })}</p>
</section>

import type { BaseTranslation } from "../i18n-types";

const en = {
  cart: {
    title: "Your cart",
    items: "{count} item{{s}}",
  },
} satisfies BaseTranslation;

export default en;

<script lang="ts">
  import LL from "$i18n/i18n-svelte";

  let { count }: { count: number } = $props();
</script>

<section>
  <h2>{$LL.cart.title()}</h2>
  <p>{$LL.cart.items({ count })}</p>
</section>

import { plural, t, type Dictionary } from "intlayer";

const cartSummaryContent = {
  key: "cart-summary",
  content: {
    title: t({ es: "Tu carrito", en: "Your cart", fr: "Votre panier" }),
    items: t({
      es: plural({ one: "{{count}} artículo", other: "{{count}} artículos" }),
      en: plural({ one: "{{count}} item", other: "{{count}} items" }),
      fr: plural({ one: "{{count}} article", other: "{{count}} articles" }),
    }),
  },
} satisfies Dictionary;

export default cartSummaryContent;

<script lang="ts">
  import { useIntlayer } from "svelte-intlayer";

  let { count }: { count: number } = $props();
  const content = useIntlayer("cart-summary");
</script>

<section>
  <h2>{$content.title}</h2>
  <p>{$content.items(count)}</p>
</section>

¿Ya usas svelte-i18n? El adaptador de compatibilidad @intlayer/svelte-i18n crea un alias del paquete a nivel de bundler para que $_, $date, $number y tus claves planas sigan funcionando mientras Intlayer sirve el contenido.

Antes de comprometerte

Una tabla de características te dice lo que hace una librería hoy. Estos puntos te dicen cómo será convivir con ella.

Revisa la actividad del repositorio.

Commits, tiempo de respuesta a issues y si el último lanzamiento menor fue este año. Un diseño sólido sin mantenedor es una migración en espera.

No elijas por descargas de npm.

La librería más instalada es la que se lanzó primero, no la que mejor se adapta a una base de código de Svelte en 2026. Las descargas miden la historia, no el ajuste.

Pregunta quién financia al mantenedor y qué vende.

svelte-i18n está respaldada por Crowdin, al igual que next-intl y vue-i18n. i18next está respaldada por Locize. Tolgee, Paraglide (inlang) e Intlayer operan cada una su propia plataforma. Un proveedor cuyos ingresos provienen de la traducción alojada tiene pocos incentivos para hacer que la traducción sea gratuita dentro de tu toolchain. Intlayer es la única del conjunto que incluye traducción por IA a través de la CLI con tu propia API key, y un CMS que puedes autoalojar (self-host).

¿Está lista para agentes de IA?

Los agentes aún tienen dificultades con la i18n: olvidan locales, inventan claves y mezclan sintaxis de mensajes. ¿La librería incluye Agent Skills o un servidor MCP para que el agente pueda listar, rellenar y probar contenido? ¿Y la carga de contenido está optimizada por defecto, o alguien tiene que revisar namespaces e importaciones lazy cada trimestre?

Seguridad de tipos lista para usar.

No "se puede tipar con configuración adicional", sino "una clave incorrecta falla tsc en una instalación limpia". Comprueba qué sucede con una clave que no existe y con un locale al que le falta una traducción.

Detección de contenido no utilizado.

Los catálogos solo crecen. El build de Intlayer purga los campos no utilizados y los registra (build.purge). Paraglide lo logra por arquitectura, ya que una función de mensaje no llamada se elimina mediante tree-shaking. Las demás te dejan la limpieza a ti.

Developer experience.

Tiempo de configuración hasta la primera cadena traducida, un LSP o extensión de VS Code que muestre la traducción al pasar el cursor y salte a la declaración, una CLI para rellenar, probar y hacer push, y una forma para que personas no desarrolladoras editen contenido (editor visual o CMS) sin una pull request.

Preguntas Frecuentes

Para profundizar

• Benchmark de Svelte i18n: tamaño de bundle, fugas y tiempos de cambio de locale
• Svelte i18n: stores, runes y la trampa del nivel de módulo y SvelteKit i18n: enrutamiento, SSR y estado compartido
• Adaptador de compatibilidad directa para svelte-i18n
• La historia de la i18n en JavaScript
• i18n en compilador vs. declarativa
• i18n por componente vs. centralizada
• Cómo funciona la optimización de bundle en tiempo de build
• Configurar i18n en una aplicación Vite + Svelte y en una aplicación SvelteKit
• Misma guía para React, Vue y Solid