<intl-msg>

<intl-msg> renders a message from the nearest <intl-locale> runtime. Its child text is the fallback shown before messages are ready, when a key is missing, or when no key is provided.

1<intl-msg key="checkout.title">Checkout</intl-msg>

Attributes

key

Use key to read a value from the active locale messages. The child text remains useful fallback content.

1<intl-locale locale="en-US" src-dir="/locales">2    <h1><intl-msg key="checkout.title">Checkout</intl-msg></h1>3</intl-locale>

For messages like:

1{2    "checkout": {3        "title": "Checkout"4    }5}

Dot paths read nested message objects:

1<intl-msg key="account.profile.heading">Profile</intl-msg>

1{2    "account": {3        "profile": {4            "heading": "Profile"5        }6    }7}

values

Use values when the message includes {placeholder} tokens.

1<intl-msg2    key="checkout.greeting"3    values='{"name":"Ari","count":3}'4>5    Welcome back6</intl-msg>

For messages like:

1{2    "checkout": {3        "greeting": "Welcome back, {name}. You have {count} items."4    }5}

Every value must be valid JSON because attributes are strings in HTML.

1<intl-msg2    key="order.total"3    values='{"amount":"$42.00","currency":"USD"}'4>5    Total: $42.006</intl-msg>

Missing, null, and undefined placeholder values render as empty strings.

For complex formatting (dates, numbers, etc.), place placeholders in the message string and keep locale formatting to the runtime formatters.

Fallback text

The fallback text is the content inside the tag.

1<intl-msg key="missing.key">Fallback copy</intl-msg>

If the runtime is not ready, no key is set, or the key is missing, the component renders Fallback copy. If there is no fallback text, a missing key renders the key itself.

You can also use fallback-only text for static copy during early prototyping.

1<intl-msg>Plain fallback text</intl-msg>

For production translation files, prefer adding a key or using the optional translation builder workflow once it exists.

HTML content in messages

Message output is rendered as a Markup template, so trusted message strings can include markup.

1{2    "status": {3        "new": "<strong>New</strong>"4    }5}

1<intl-msg key="status.new">New</intl-msg>

Only put trusted translation content in message files.

See also

• intlMsg