As a front-end developer, I often encounter projects that require internationalization (i18n). Making a website multilingual with plain text messages is quite challenging and doesn’t offer a great development experience. That’s why I decided to use ICU messages.
It’s worth noting that using ICU messages directly doesn’t make sense—you always need a parser to process them.
Typically, ICU messages are stored inside JSON files so they can be easily used across different projects. However, there’s a major issue: editors like VS Code cannot recognize the structure of ICU messages or highlight the different parts of a message (which is natural, since they weren’t built for this purpose).
For example, in the image below, it’s quite difficult to tell that the argument is actually an ICU variable:
And of course it gets harder if the message gets a bit more complicated (although in real scenarios this is also a simple message):
As I mentioned earlier, this isn’t really a problem—it’s the normal behavior of editors or IDEs. Because from our perspective, this is an ICU message, but from the editor’s perspective, it’s just a string and the value of a message key.
So creating or editing ICU messages (at least for me) became a tedious task.
I looked for a tool, but I couldn’t find what I wanted!
I was really surprised that this internationalization standard doesn’t have a sufficiently good tool to manage it.
Most web developers use VS Code, and there are several extensions that directly or indirectly help with creating or editing ICU messages—but they simply weren’t enough. Because even though VS Code is powerful, it can be limiting for development.
Also, I couldn’t find any standalone software that I could install on my operating system and comfortably manage ICU messages without any dependencies.
These were the reasons that led me to create ICU Studio…
A lightweight but powerful editor
I decided to use my React development skills to create a desktop application that would solve my problems in this area.
But there were some points I had to consider. For example, my editor had to be fast and very lightweight so it wouldn’t slow down development. React is fast enough, but when combined with Electron, it can sometimes become slow—and that’s due to Electron’s nature, not React itself. Also, it should consume less memory when idle.
Tauri was the tool that helped me build ICU Studio. The result was a very lightweight and optimized application that launches in less than 2 seconds.
But speed wasn’t the only thing that mattered to me. I wanted to read ICU messages faster, edit them faster, test different variations, and more…
ICU Studio Features
At the time I’m publishing this article, this editor is in its MVP stage, but it still has enough features that truly solved my problem as a user.
Dedicated Syntax Highlighting
Naturally, the first thing I needed was to understand the structure of my message. Parsing the message and highlighting it made it possible to grasp the overall structure of any message within the first moments of encountering it.
Formatting
In addition to highlighting, formatting the message was another important and fundamental feature of this editor—it increased the readability of messages many times over.
Copy with Different Output Formats
One problem I personally faced in my projects was that sometimes I needed to use the message inside components, and other times inside JSON files. Now ICU Studio can copy the same message in the following four ways:
// simple or pretty copy:
{variable,select,
option1{text}
option2{text}
other{text}
}
// one line copy
{variable,select,option1{text} option2{text} other{text}}
// json property copy
"": "{variable,select,option1{text} option2{text} other{text}}",
// function copy
t('', { variable })
Enter fullscreen mode Exit fullscreen mode
Ready-to-Use Snippets
Up to this point, I had only improved readability. But the problem that still remained was creating an ICU message in the shortest possible time. For example, creating a plural message still took time! Snippets allowed me to generate the entire structure with just one click:
Simple Statistics for Variable Count
When messages become complex, it’s helpful to know what types of variables exist and how many of each there are:
Testing Variables Inside the Message
This is a feature I truly enjoy. With a simple user interface, you can quickly test your message, examine different outputs, and have a real-time preview:
As you can see in the image, details of each variable are also displayed, which can be very useful in complex messages.
Message Validation
It’s completely normal that human errors can cause the message structure to be incorrect, leading to errors in the project. In ICU Studio, if you encounter an error, you can see the exact reason for it:
Variable Actions
By right-clicking on any variable in your message, you can perform three actions: Delete, Copy, and Cut. All actions are applied only to the specific variable you clicked on:
Undo/Redo
The simplest and one of the most frequently used features that I’ve found invaluable in ICU Studio. You can comfortably work on complex messages because your change history is never lost, and you can always go back to previous versions.
Smart JSON Property Insertion
In VS Code (when you haven’t selected any text), pressing Ctrl+C copies the entire line. Now, if you copy a message with its JSON property, smart insertion allows you to extract just the message value. This is especially useful when your message is long and selecting it with the mouse might take time:
How to Use It?
From download to usage, it takes less than 2 minutes:
- Go to the GitHub Releases page
- Download and install the appropriate version for your operating system
- That’s it!
The Future of ICU Studio
Approximately 80% of the major features for ICU Studio have not been built yet. This is a deliberate decision because I want to gather feedback from users and steer the project based on actual needs—not just what I personally want. So there are definitely bigger features waiting for ICU Studio in the future.
Your Support Means a Lot…
This project started as a personal endeavor, but I decided to release it as open source. If this project manages to solve a problem for you, I would be very happy if you could:
- ⭐ Give the project a star on GitHub
- 🐛 Report any issues you encounter
- 💡 Share your feature requests with me
- 🤝 Contribute to making the project even better
How to Use It?
From download to usage, it takes less than 2 minutes:
- Go to the GitHub Releases page
- Download and install the appropriate version for your operating system
- That’s it!
The Future of ICU Studio
Approximately 80% of the major features for ICU Studio have not been built yet. This is a deliberate decision because I want to gather feedback from users and steer the project based on actual needs—not just what I personally want. So there are definitely bigger features waiting for ICU Studio in the future.
Your Support Means a Lot…
⭐ Give the project a star on GitHub
🐛 Report any issues you encounter
💡 Share your feature requests with me
🤝 Contribute to making the project even better