Svelte Adapter

Use astro-intl/svelte to access translations inside Svelte components with rich text support via segments or HTML strings.

Import

Import from the astro-intl/svelte subpath. Requires svelte@^5 as a peer dependency.

Import

import { getTranslations, createGetTranslations, renderRichText } from "astro-intl/svelte";
import RichText from "astro-intl/svelte/RichText.svelte";

Store-backed (Astro Islands)

Use getTranslations(namespace) inside Svelte components rendered as Astro islands. Works the same way as the React adapter.

MyComponent.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";

  const t = getTranslations("hero");
</script>

<h1>{t("title")}</h1>
<p>{t("subtitle")}</p>

Standalone (No Store)

Use createGetTranslations(ui, defaultLocale) when you need translations without the global store.

standalone.svelte

<script>
  import { createGetTranslations } from "astro-intl/svelte";
  import en from "./i18n/messages/en.json";
  import es from "./i18n/messages/es.json";

  const getTranslations = createGetTranslations(
    { en, es },
    "en"
  );

  export let lang = "en";
  const t = getTranslations(lang, "hero");
</script>

<h1>{t("title")}</h1>

Rich Text with t.rich()

t.rich(key, tagNames?) returns an array of RichSegment[] — each segment is either plain text or a tagged chunk. You can render them in two ways.

Option A: renderRichText() → HTML string

Use renderRichText(segments, options) to convert segments into an HTML string. Pass tags for native HTML elements or components for custom rendering.

RenderRichText.svelte

<script>
  import { getTranslations, renderRichText } from "astro-intl/svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");

  const html = renderRichText(segments, {
    tags: {
      bold: "strong",
      link: "a",
    },
  });
</script>

{@html html}

Option B: RichText.svelte component

Import the RichText component for declarative rendering. Pass tags for native HTML elements and components for Svelte component rendering.

UsingRichText.svelte

<script>
  import { getTranslations } from "astro-intl/svelte";
  import RichText from "astro-intl/svelte/RichText.svelte";

  const t = getTranslations("hero");
  const segments = t.rich("description");
</script>

<RichText
  {segments}
  tags={{ bold: "strong", link: "a" }}
/>

Hydration Tip Svelte islands work with client:load or client:visible. Like React, translations are resolved on the server.

RichText vs renderRichText Use RichText.svelte when you need Svelte component interpolation (e.g., custom tooltip or icon components). Use renderRichText() when simple HTML tags like <strong> or <a> are enough — it's lighter and works with {@html}.

Svelte 5 Required The Svelte adapter requires svelte@^5. If you're using Svelte 4, you can still use renderRichText() with {@html}, but the RichText component is Svelte 5 only.