In-context editing
A translation mode where you click words on the rendered page, edit them with the surrounding UI visible, and save them back to the catalog.
What it is
In-context editing lets a translator open the rendered product, click visible copy, and edit its translation without hunting for the string in a catalog. The page supplies the screen, component, and surrounding words that a bare message key cannot, while the editor sends the change back to a translation management system.
Reach for it when translators need to resolve ambiguous short strings or catch copy that breaks the actual layout. It answers the question a catalog row cannot: is 'Open' a button or an adjective on this screen. The Phrase Strings In-Context Editor, Crowdin In-Context, and Lokalise LiveEdit all work the same way, injecting a bridge script that ties rendered elements back to message keys.
Gotcha: the rendered sample is only one state. Plurals, errors, empty states, permissions, and variable values may reveal different text. Expose those states deliberately, and keep the editing bridge out of the public production experience.
Ask AI for it
Integrate the Phrase Strings In-Context Editor into a protected preview route. Annotate each rendered message with its stable translation key and locale, preserve ICU MessageFormat placeholders, and save edits to the matching catalog entry rather than to page HTML. Add controls that render singular, plural, error, empty, and long-text states. Load the editor bridge only for authenticated translators and strip all editing attributes from production builds.