Trans

Trans is the general-purpose Component Macro for translated markup content.

Use Trans when a translator needs to preserve links, emphasis, or other embedded structure. It can also be used for non-rich-text messages, but its clearest advantage shows up when the message is naturally authored as markup. Embedded markup is preserved as structured placeholders, interpolated values remain values instead of being baked into text, and translators can reorder or re-nest those placeholders when the target language reads better that way.

For the framework-agnostic Lingui semantics, see the official Trans reference.

Source

Demo.svelte Catalog

<p>
  <Trans>
    Say hello to <strong>{name}</strong>.
  </Trans>
</p>

#: src/demos/macros/trans-component/Demo.svelte
msgid "Say hello to <0>{name}</0>."
msgstr "Say hello to <0>{name}</0>."

Result

Preview Transformed Svelte Compiled Catalog

Say hello to Lingui.

<p>
  <L4sRuntimeTrans {.../*i18n*/ {
    id: "Z8ZDKV",
    values: {
      name: name
    }
  }}>
  {#snippet component_0(children)}<strong>{@render children?.()}</strong>{/snippet}
  </L4sRuntimeTrans>
</p>

/*eslint-disable*/
import type { Messages } from "@lingui/core";
export const messages = JSON.parse(
  "{\"Z8ZDKV\":[\"Say hello to <0>\",[\"name\"],\"</0>.\"]}",
) as Messages;

Locale

EN JA

Name

Usage

Svelte

<script lang="ts">
  import { Trans } from "lingui-for-svelte/macro";
</script>

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Astro

---
import { Trans } from "lingui-for-astro/macro";
---

<Trans>
  Read the <a href="/docs">documentation</a>.
</Trans>

Official Lingui

import { Trans } from "@lingui/react/macro";

function Component() {
  return (
    <Trans>
      Read the <a href="/docs">documentation</a>.
    </Trans>
  );
}

When Trans is a good fit

• the message includes links, emphasis, or other embedded markup
• text and markup belong to the same translated sentence
• translators may need to move or re-nest wrappers in the target language
• the message reads more naturally as markup than as a string template

Supported content at a glance

lingui-for-svelte and lingui-for-astro both support the common rich-text core:

• plain text and interpolated values
• nested HTML and component wrappers
• self-closing wrappers used as placeholders

Framework-native rich-text holes are also supported:

Feature	Svelte	Astro
Raw HTML hole	{@html ...}	set:html={...}
Render/snippet hole	{@render ...}	n/a
Text hole	n/a	set:text={...}

Framework-specific notes

The exact set of allowed wrapper syntax depends on the template language.

• Svelte supports wrapper directives, let:, {@html}, and {@render} inside Trans. See Trans in Svelte.
• Astro supports class:list, transition:*, client:*, server:*, set:html, and set:text inside Trans. See Trans in Astro.

Some constructs are still intentionally unsupported because they are not wrapper-shaped rich-text content. Examples include block syntax in Svelte and script, style, or is:raw in Astro.

Whitespace between child nodes

Trans is processed internally through JSX-compatible machinery, but .svelte and .astro templates are not JSX. Because of that, whitespace between child nodes can otherwise be interpreted differently from what the framework would normally do.

By default, lingui-for-svelte and lingui-for-astro use framework-aware whitespace handling for Trans and the other component macros instead of raw JSX semantics.

See Whitespace in Component Macros for the exact rules, configuration, and examples.