Below is a localized message based on the example in the ICU MessageFormat documentation. You can edit the variables used to generate the message using the controls on the right.
Instead of using ICU, however, we use a simple visual programming language called Blockly. The Blockly code below is dynamically compiled into a React component for inclusion in the example above.
Providing localization that feels "native", e.g. which adapts dynamically to pluralization and gender and so on, essentially seems to require writing small computer programs. Localization formats like ICU aren't particularly intuitive to developers or localizers. However, Blockly is nicely suited for allowing non-technical users to create very short, well-behaved programs that compile down to readable JavaScript, which makes it a potential alternative to complex localization message formats.
Below is the Blockly XML for the Blockly code above. This is what would go in your source code repository, with a different XML document for each locale.
During a build step—or dynamically in the browser during development—the locale-specific Blockly XML is converted into a locale-specific React component, which is then used by the application.
The example React component takes the following props:
Below is the JavaScript generated from the Blockly XML above.
For more information, see the GitHub project.