Skip to content
lingui-for

Svelte: Trans

Trans in Svelte is lowered back into native Svelte wrapper syntax. That means the supported surface is broader than plain JSX-shaped rich text.

Supported inside <Trans>

Section titled “Supported inside <Trans>”
  • interpolated values in text content
  • regular HTML and component wrappers
  • nested wrappers and self-closing wrappers
  • wrapper directives such as bind:, class:, style:, use:, transition:, in:, out:, and animate:
  • let: wrappers
  • {@html ...} wrappers
  • {@render ...} wrappers

Ordinary comments inside Trans are ignored when Lingui builds the message. Lingui directives in Svelte comments still follow source order, so put a directive before the opening tag when it should apply to that Trans. See Lingui Directives for supported comment forms and scope rules.

Still unsupported

Section titled “Still unsupported”

Trans still expects wrapper-shaped rich text, not general template control flow.

  • block syntax such as {#if}, {#each}, {#await}, {#key}, and {#snippet}
  • <slot>
  • Svelte special elements such as svelte:component, svelte:self, svelte:fragment, svelte:head, svelte:window, svelte:document, and related svelte:* forms

Notes on {@html} and {@render}

Section titled “Notes on {@html} and {@render}”

{@html} and {@render} are treated as explicit content holes.

  • They are supported as part of the translated rich-text structure.
  • If a translation tries to place translated child content inside one of those holes, the generated runtime code warns in development so that the mismatch is visible while authoring.

For the framework-agnostic Trans model, see Trans.