Modern applications often generate parts of their UI dynamically at runtime, such as:
- Category names loaded from a backend service
- Values updated by user input (progress indicators, ranges, ratings)
- UI messages assembled from reusable components
A common question we hear is:
Can Transifex Live translate every dynamic value automatically as it changes?
The short answer
Transifex Live translates static UI text.
Dynamic values should be localized separately to keep your project scalable and performant.
Here’s the recommended approach
The challenge
Consider UI strings like:
Status: <span id="statusValue">In Progress</span>
Completion: <span id="progressValue">75%</span>
Where:
- “In Progress” comes from a list of possible states (Pending, In Progress, Completed, Failed)
- “75%” changes continuously as the task advances
If every possible combination were captured by Live, this would lead to:
- Hundreds or thousands of unique strings
- Inflated word count
- Duplicate translations for similar values
- Slower review and QA cycles
The goal
Localize:
- The static structure of the sentence
- The dynamic values displayed inside it
Without:
- Generating endless Live strings
- Manually approving every variation
Recommended workflow
1. Use placeholders in Transifex Live
Replace dynamic values with placeholders in your UI templates:
Status: <span id="statusValue">[STATUS]</span>
Completion: <span id="progressValue">[PERCENT]</span>
Transifex Live detects and translates only the static text
Dynamic values are excluded from Live detection
2. Localize dynamic values in a file-based project
Export the possible dynamic values into a simple file, such as JSON:
{
"Pending": "",
"In Progress": "",
"Completed": "",
"Failed": ""
}
Upload this file to a file-based Transifex project and translate it normally.
This gives you:
- Centralized translations
- Consistent terminology
- Version control
- No explosion of Live strings
3. Inject translations at runtime
At runtime, fetch the localized values via the Transifex API and inject them into the UI based on the user’s language:
statusElement.textContent = translations["In Progress"];
This approach works with any framework or language (React, Vue, Angular, Python, R Shiny, etc.).
Why this is best practice
This workflow:
- Prevents duplicate and combinational strings in Live
- Keeps word count low
- Ensures consistent translations across the UI
- Works with any dynamic or data-driven application
- Gives you full control over localization logic
- Keeps Transifex Live focused on meaningful, stable text
Try this workflow in your own project
If your application includes dynamic UI values, this workflow can help you scale localization without increasing complexity or cost.
We encourage you to:
-
Use Transifex Live for stable, user-visible UI text
-
Handle dynamic values in a file-based project
-
Inject translations at runtime using the Transifex API
This approach keeps your Live project clean while giving you full control over how dynamic content is localized.
Have questions or want to share how you’re handling dynamic content today?
Start a discussion below—we’d love to hear how you’re applying this in your own workflow.