Skip to content

In-Context Editing

Summary

In-context editing allows translators to click directly on text within a running application and edit translations in-place, without leaving the app or navigating a separate translation management interface.

How It Works

  1. SDK integration — The app integrates a localization SDK (e.g., Tolgee's)
  2. Key wrapping — Translatable text is wrapped with invisible markers or special keys
  3. Browser extension or dev mode — A plugin or dev mode activates the editing overlay
  4. Click to edit — Translator Alt+Clicks any text to open an inline editor
  5. Real-time sync — Changes are saved to the localization platform and synced back

Tolgee Implementation

Tolgee's in-context editing: - Alt+Click to edit any text in the browser - Browser extension injects API key and activates overlay - Works with server-side rendered apps (PHP, etc.) via CLI watch/pull - Real-time sync via Tolgee CLI watching for changes - Docker Compose ready for quick setup

Benefits

  • Translators see exact context (layout, surrounding text, UI state)
  • No need to navigate complex translation management UIs
  • Catches layout issues (text overflow, truncation) immediately
  • Faster translation workflow — no copy-paste between tools
  • Developers don't need to provide screenshots or context descriptions

Challenges

  • Requires SDK integration in the application
  • Browser extension needed for full experience
  • Not all localization platforms support it
  • Server-side rendered apps need special handling (Tolgee CLI)

Comparison with Traditional Editing

In-Context Traditional
Context visibility Full UI context String keys + optional screenshots
Navigation Click text in app Search/browse key lists
Layout awareness Immediate Delayed (discovered after deployment)
Setup complexity Requires SDK None (file-based)
Speed Fast (direct editing) Slower (search, navigate, translate)

See Also