Online ICU Message Editor

How does the ICU Message Editor work?

The ICU Message Editor is a free online tool that lets you validate ICU messages and preview their output. Simply paste or type your ICU message into the editor, and it will automatically display the formatted output for the selected language. If the message contains invalid ICU syntax, the tool will display an error instead.

How can I escape special characters in the ICU Message Editor?

To escape characters that have special meaning in ICU messages, such as {, }, and #, wrap them in apostrophes ('). See the examples below.

To use a placeholder, type '{'name'}'.

{digits, plural,
  one {You entered # digit. To submit, press '#'.}
  other {You entered # digits. To submit, press '#'.}
}

Why do the input and output character counts differ?

They count different strings:

• Input count: The number of characters in the raw ICU message. This tells you how long the message is and can help you spot overly complex ICU messages or heavy syntax.

• Output count: The number of characters in the final text displayed to the user after the ICU message is processed. This tells you how long the rendered UI text is once variables are resolved, and can help you identify potential truncation risks, unexpected line breaks, insufficient button width, and similar issues.

What kinds of errors does the ICU Message Editor detect?

The ICU Message Editor validates ICU syntax and highlights a wide range of errors, including malformed or empty placeholders, missing or unmatched braces, invalid placeholder types, styles, or skeletons, missing required plural or select clauses (such as other), malformed or unbalanced tags, and other common ICU syntax errors.

Why am I seeing the "missing other clause" error?

In plural, select, and selectordinal ICU messages, the other clause is required. Omitting it will cause an error.

In plural and selectordinal messages, other handles values that don’t match a specific category (such as one, few, etc.), ensuring the message remains grammatically correct.

In select messages, other serves as a required fallback. Even if you believe you don't need it because your message only supports a predefined set of values, having a fallback is still helpful as your code evolves. It can prevent your app from breaking in the future if a new or unexpected value is introduced and you forget to add a corresponding case.

Why are rich-text placeholders shown in a simplified form in the output?

To render rich-text placeholders (tags) properly, you typically need to provide a rendering function (or component) that defines how each tag should be displayed. To avoid unnecessary complexity in this tool, we render rich-text placeholder values as plain text. In your app, you can define exactly how those tags should be rendered.