How do you make the same app screen work in two languages?
Choose the language for the screen, load its translated messages, and format values such as dates and prices for that locale. Review what the app shows when a translation is missing.
Which screen should you translate first?
Pick one screen people already need to finish a task. For a bookings app, start with the confirmation page. Translate the heading, the date and seat count, and the action someone can take if the booking looks wrong.
A locale tells the app which language and regional formats to use. Two people can see the same booking with different wording and date formats. Decide the booking’s time zone independently so the time itself stays meaningful.
Do you need code to display translations or a place to review them?
A library loads messages and formats values while your app runs. A translation workspace lets people revise and approve the messages that go into the app. A team can start with its own files and bring in a workspace when more people need to review changes.
| Work | Who or what handles it |
|---|---|
| Show the right label for the current language | The app reads the locale and asks its localization library for the message. |
| Review wording in the context of a screen | A translator or reviewer checks the source text and a screenshot or preview. |
| Release the result | Your app’s release workflow takes the reviewed files and checks that the page actually renders them. |
Compare tools
Scroll the table sideways to read every column.
| Tool | What it handlesThe work it does for your app or translation team. | What you bringThe code, text or context you need to supply. | What to checkWhat can go wrong before the translated screen ships. | What you keepThe files and settings the next person needs. |
|---|---|---|---|---|
| next-intl | Shows localized messages and formats values in a Next.js app. | Choose supported locales and supply messages for each locale. | Test missing messages, plural choices and the locale used by each page. | Keep the locale files and routing and formatting settings. |
| i18next | Looks up translated messages in JavaScript apps. | Give it message files, supported languages and a fallback choice. | Pass the count for plural messages. Test missing keys and formatted values. | Keep the resource files and the language and fallback configuration. |
| Crowdin | Coordinates the work of translating and reviewing source messages. | Send supported source files and provide screen context. | Review the wording, variables and export settings before handing files back. | Download translated files and keep them with the source and review rules. |
| Lokalise | Translates and reviews keyed app text in Lokalise Expert. | Supply the app’s message files and explain what each label does. | Check whether your export uses reviewed text, the last reviewed text or a fallback for empty values. | Keep the released files, source files and export settings. |
| Phrase | Use Strings for app messages or TMS for file-based translation jobs. | Supply keyed messages or a source file and identify target languages and reviewers. | Check Strings fallback settings and read TMS downloads for incomplete sections. | Keep the locale files or completed documents with the original and export settings. |
| Weglot | Adds translated versions to a website you already run. | Bring a supported website and decide which public pages and languages to include. | Check translated addresses, wording and page exclusions. Keep private pages outside the translation setup. | Keep original pages and translated addresses. Translation export requires Advanced or higher. |
| Weblate | Gives translators an editor that works with your project’s language files. | Bring the project’s translation files, repository and review roles. | If approval is required, verify the quality filter before committing translations. | Keep language files and history in your project. Back up comments and suggestions separately. |
| DeepL | Produces translations of text you select. | Supply text and a target language. Software needs a separate API plan. | Review meaning and terminology. Keep private fields out unless your exact service allows them. | Keep the approved wording and terminology in your own files. |
| FormatJS | Collects messages from code and formats translated content in React through React Intl. | Bring a React app, default messages with stable IDs and locale catalogs. | Check missing-message fallback, placeholders and plural wording. | Keep message IDs, default wording, catalogs and build settings. |
| Vue I18n | Displays messages and formats dates and numbers in a Vue app. | Bring a Vue project and choose a compatible plugin version and locale files. | Check plural wording, the language switch and missing-label fallback. | Keep locale files, keys and fallback and formatting settings. |
What should change when a visitor switches locale?
The same stored price or appointment can look different on screen. Format the date and number for the visitor’s locale. Choose the time zone for an appointment and the actual currency for a price. Then test the entire message when a count changes.
Test zero if the screen can be sold out. Languages can use different plural categories, so give the translator the full sentence and the count the app will insert.
| Same saved value | US English | German for Germany |
|---|---|---|
| Date | November 12, 2026 | 12. November 2026 |
| Amount before adding a currency symbol | 12.50 | 12,50 |
| One seat | 1 seat | 1 Platz |
| Two seats | 2 seats | 2 Plätze |
On a small screen, scroll the table sideways to read every column.
What will people see when a translation is missing?
Choose a readable fallback and catch missing text before release. Some libraries may display a message key when no translation can be resolved. A fallback can keep the action usable while leaving parts of the screen in a different language.
Check the success path and the message shown if something goes wrong. A translated heading helps little when the error text leaves someone unsure whether the booking happened.
How can you test the first screen before changing the app?
Make two sketches of a fictional booking confirmation, one per locale. Keep the date, time zone and number of seats the same on both. The paper check needs no service, account or real customer data.
- Write the expected pageWrite what the heading, date and one-seat message should look like. Change the count to two and check both languages.
- Take one label awayCross out the target language’s link for changing the booking. Write the exact fallback you want a customer to see.
- Give the next person enough contextMark where the link leads. Save the source and translated messages, then make a separate note of what a reviewer should check on the actual screen.