In-context localization inside your running app

Edit copy on top of your live app

In-context editing is a new place to edit, not a separate product. It reaches the same projects, keys, AI translation, and translation memory that power the rest of transglot, through a CORS-scoped /api/v1/incontext/* API with read and write abilities.

Each origin gets its own publishable key, managed in an admin UI. A key mints a rate-limited scoped session — per key, per IP, per session — so it is safe to embed in a running app and works per reviewer.

Reviewers upload screenshots (raster-only, up to 5MB and 4000px) so translators judge length, tone, and placement in the real UI. They are stored on a private disk behind signed URLs and auto-pruned after 90 days.

Each string gets a synchronous, vision-grounded Claude suggestion backed by the quality model, Sonnet 5. It is suggest-only — it never auto-writes — with denial-of-wallet rate and spend backstops. Suggestions are free on paid plans and capped on Free. In-context editing itself is a paid feature, available on the Indie plan and up.

What in-context editing gives you

• ALT+click overlay in your running app — the zero-dependency @transglot/incontext SDK adds an ALT+click overlay (with content watermarking) so a reviewer can select any string and edit or translate it exactly where it appears.
• Scoped publishable keys, safe to embed — each origin gets its own publishable key, managed in an admin UI, and each key mints a rate-limited scoped session (per key, IP, and session).
• Screenshots for visual context — raster-only uploads up to 5MB and 4000px, stored on a private disk behind signed URLs and auto-pruned after 90 days.
• Vision-grounded AI suggestions — a synchronous Claude suggestion backed by the quality model (Sonnet 5). Suggest-only, never auto-written, with denial-of-wallet rate and spend backstops. Free on paid plans, capped on Free.
• A React adapter, @transglot/react — a <TransglotProvider> that installs the overlay and mints the scoped session, a useIncontextT hook that returns the watermarked t, and a Shadow-DOM <EditDialog>.
• CORS-scoped in-context API — a /api/v1/incontext/* API with read and write abilities powers the overlay, and a quickstart walks you through embedding the SDK.
• Built on what already ships — in-context editing reaches the same editor, AI translation, and translation memory as the rest of transglot. It is a paid feature, available on the Indie plan and up.

From SDK drop-in to a saved translation

• Embed the SDK — add the zero-dependency @transglot/incontext SDK, or wrap your React app in <TransglotProvider>, and point it at your project with a scoped publishable key.
• ALT+click any string — the overlay lets a reviewer select the exact piece of UI they’re looking at, so there’s no hunting for the matching key in a grid.
• Get a vision-grounded suggestion — a synchronous Claude suggestion (Sonnet 5) arrives with the real screenshot as context, so length, tone, and placement fit the actual layout. Suggest-only, never auto-written.
• Save back to the same project — accepting an edit writes through the CORS-scoped /api/v1/incontext/* API into the same keys the editor, AI translation, and translation memory already use.

Compared with reviewing in a spreadsheet

• Finding the string — screenshot the bug, describe the screen, and hope someone finds the matching key; or ALT+click the exact string in the running app and let the key resolve itself.
• Context — translators guess length and tone from a bare string in a CSV column; here a real screenshot rides along, so tone, length, and placement are judged in situ.
• Getting help — no suggestion, or a generic MT paste with no idea of the surrounding UI; here a vision-grounded Claude suggestion (Sonnet 5) is aware of the layout, and stays suggest-only.
• Saving the fix — edit a spreadsheet, email it back, and re-import, hoping nothing drifts; here accepting writes straight into the same project keys through a scoped API.
• Safety — a shared editor key or an ad-hoc export is easy to leak; here per-origin publishable keys mint rate-limited, scoped sessions.

How the React adapter fits your app

For React apps, @transglot/react wraps the core SDK so the overlay, the session, and the editor UI all stay out of your way.

• <TransglotProvider> — a single provider installs the ALT+click overlay and mints the scoped session; you wrap your app once and you’re done.
• useIncontextT() — a hook that returns a watermarked t function, so the overlay knows which rendered text maps to which translation key.
• Shadow-DOM <EditDialog> — the editor UI renders inside a Shadow DOM, so its styles never collide with, or get overridden by, your app’s CSS.
• CORS-scoped API — the overlay talks to a /api/v1/incontext/* API with read and write abilities, so only your approved origins can reach it.
• Denial-of-wallet backstops — suggestions are free on paid plans and capped on Free, with per-cycle rate and spend ceilings so an embedded key can’t run up an unbounded bill.