Managing internationalization (i18n) with raw JSON files is tedious and error-prone. Here is how Tolgee's in-context translation streamlines developer localization.
Internationalization (i18n) is one of those features every engineering team knows they need, but almost everyone dreads setting up.
The traditional localization workflow usually looks like this:
Developers define translation keys in nested JSON files (en.json, es.json, de.json).
Every UI copy update requires a pull request and git merge conflict resolutions.
Non-technical translators have no visual context for where strings actually live on the screen, leading to awkward truncation and broken layouts.
I recently tested Tolgee
—an open-source localization platform built specifically to bridge this gap. Here is what makes its developer experience standout.
The Killer Feature: In-Context Translation
What separates Tolgee from traditional Translation Management Systems (TMS) is in-context editing.
When running your app in development or staging with the Tolgee SDK:
You simply hold Alt (or Option on Mac) and hover over any text on your screen.
Tolgee highlights the text with a subtle bounding box.
Click on it, and a clean translation modal pops up right inside your app.
text
[ Your Live Web App Screen ]
┌──────────────────────────────────────────────┐
│ Welcome to Open Payments │
│ [ Alt + Click ] │
│ │ │
│ ▼ │
│ ┌────────────────────────────────────────┐ │
│ │ Tolgee In-Context Editor │ │
│ │ Key: landing.hero.welcome_title │ │
│ │ Translation: Bienvenido a Pagos... │ │
│ │ [ Save & Sync ] │ │
│ └────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘
Translators and product managers can adjust wording directly in the live UI, see exactly how long the text looks in the layout, and save the change straight to the cloud or self-hosted backend. Zero developer intervention needed.
Clean Integration with Modern Frameworks
Tolgee provides native SDKs for React, Next.js, Vue, Svelte, and vanilla JS. In Next.js (App Router), wrapping your layout takes less than 5 minutes:
tsx
import { TolgeeProvider } from "@tolgee/react";
export default function RootLayout({ children, locale }) {
return (
apiUrl={process.env.NEXT_PUBLIC_TOLGEE_API_URL}
apiKey={process.env.NEXT_PUBLIC_TOLGEE_API_KEY}
staticData={/* pre-baked locale files for production */}
>
{children}
);
}
In production, you don't even have to query Tolgee's API dynamically if you don't want to—their CLI can export static snapshot files into your build pipeline so production builds remain ultra-fast and static.
Key Benefits for Engineering Teams
No More Git Merge Conflicts in .json Files: Translations live in Tolgee and are fetched or pulled during build, keeping pull requests focused purely on code logic.
Context-Rich Screenshots: When translators edit strings via in-context translation, Tolgee automatically captures a screenshot of the surrounding DOM elements so reviewers understand the exact visual context.
Open-Source & Self-Hostable: If your company has strict compliance requirements and can't use external SaaS clouds, Tolgee is 100% open-source under Apache 2.0 and can be deployed with Docker in one command.
Final Verdict
If your team is still emailing spreadsheets or copy-pasting translation strings into giant JSON dictionaries, switching to in-context translation is a night-and-day upgrade.
Check out their open-source repository at github.com/tolgee/tolgee-platform
.
How does your team handle localization in production? Let me know in the comments! 🌍
Top comments (0)