In-context editor
Let reviewers ALT+click any translated string in your running app and edit it in place, with the source, checks and a Glossa suggestion beside it.
The in-context editor runs inside your own app. A reviewer holds ALT (Option on a Mac) to see which strings are editable, ALT+clicks one, and edits its translation in a panel on top of the page, without hunting for the key in the console. Saves go straight to your transglot project.
This section is for the developer who embeds it. For what reviewers do once it is running, see Connect the in-context editor.
How it fits together
Your app marks its strings
You wrap your existing translate function. Every string it returns gets an invisible watermark that maps it back to its key and locale. What users see does not change.
The editor mounts with a publishable key
A publishable key (taip_...) is a public id that you ship in your page. From an allowed origin, it buys a short-lived, read-only session. See Publishable keys.
Your backend grants write access
To let a reviewer save, your server asks transglot for a single-use nonce using a project token with write access, naming the keys this reviewer may change. The editor trades the nonce for a session that can write those keys.
Reviewers edit in place
With editing mode on, ALT+click opens the string under the pointer. A save updates the translation in transglot and the text on the page.
What reviewers see
When editing mode is on, a floating bar sits on the page. It shows the locale being edited and each language's completion, lets the reviewer switch locale or add a language (when the session allows it), and has Done to leave editing mode. A read-only session is marked Read only.
ALT+click on a marked string opens the editing panel:
- the key, the Source text, and the Target for the current locale (one field per plural category for a plural key),
- live checks on the draft, the same ones the console editor runs against the project's rules, such as placeholders, plural forms and glossary terms,
- translation memory matches, each with Use this,
- Suggest with AI, which asks Glossa for a translation,
- Revert and Save.
If someone else saved the same string after the panel opened, the save is refused and the panel shows Their version next to the reviewer's draft, with Keep mine to put their own wording back.
A string a reviewer saves counts as edited by a person, so it is never overwritten by AI afterwards. Each save is attributed to the publishable key and to the reviewer label your app passes.
When the session can write, the editor also captures a screenshot of the element before asking Glossa for a suggestion, and the capture lands in the project's screenshot library. Capture uses the optional html2canvas package; without it, suggestions still work from the text alone.
Who should see it
The editor is for reviewers. Do not show it to the public. The bar reports how complete each of your languages is, and anyone in editing mode can open every marked string on the page.
The SDK cannot tell a reviewer from a visitor, or your staging site from production, so mounting is inert by default: nothing appears until your app turns editing mode on. Render the editor only for people your app knows may review translations, and either pass enterOnMount for them or call session.enter() from your own control.
Requirements
- The Starter plan or above. Creating publishable keys and opening sessions both need it.
- An admin on the project to create the publishable key.
- For saving: a project token with write access on your server. See Deploy tokens.
- A browser. The editor works on any page; the watermark has to stay inside one text node, so a translation that renders as several elements (text with inline markup) can be opened but is not updated on the page after a save.
Next steps
Pseudo-localization
@transglot/pseudo: generate an accented, lengthened pseudo-locale from your source JSON to find hardcoded strings and layout overflow before you translate.
Install the in-context editor
Add the in-context editor to your app with the React adapter or the framework-agnostic core, and mark the strings reviewers can edit.