Docs

In-context editing

Edit a translation right where it appears in your running app. @glotfox/runtime has an opt-in edit mode: Alt+click any translated text, change it in a small floating editor, and save. The change is stored as a draft for review in GlotFox and the page updates immediately. There is no extra script and no framework plug-in: it is the same SDK your app already uses.

Set up

  1. In GlotFox, open Settings → In-context editing of the project and add the origins of the sites that may use it, one per line (for example http://localhost:3000 or https://staging.example.com). The list is empty by default, which means in-context editing is off. Only owners and admins can change it.
  2. Pass inContext when you create the client. The project id is on the project's setup page.
import { createGlotfox } from "@glotfox/runtime";

export const glotfox = createGlotfox({
  baseUrl: "https://glotfox.app.dukauskas.lt/api/cdn/<projectId>",
  locale: "de",
  inContext: {
    projectId: "<projectId>",
    appUrl: "https://glotfox.app.dukauskas.lt",
  },
});

Nothing else changes. Without the inContext option the feature does not exist; with it, the editor code is only downloaded when edit mode is turned on, so normal page loads do not grow.

React

import { GlotfoxProvider, useTranslation } from "@glotfox/runtime/react";
import { glotfox } from "./glotfox";

function Cart() {
  const { t } = useTranslation();
  return <button>{t("cart.cta", { defaultValue: "Buy now" })}</button>;
}

export const App = () => (
  <GlotfoxProvider client={glotfox}><Cart /></GlotfoxProvider>
);

t() and <Trans> are found automatically.

Vue

import { createGlotFox } from "@glotfox/runtime/vue";
import { glotfox } from "./glotfox";

app.use(createGlotFox(glotfox));
// in a component: const t = useT(); then {{ t("cart.cta") }}

Plain JavaScript

import { glotfox } from "./glotfox";

await glotfox.load();
document.querySelector("#buy").textContent = glotfox.t("cart.cta");

Texts are found by what t() rendered, so re-render after a locale change as usual (use glotfox.subscribe).

Use it

  1. Open your app with ?glotfox=edit added to the URL, or press Alt+Shift+E. A bar “GlotFox edit mode” appears. Edit mode is remembered for the browser tab; Exit or the hotkey turns it off.
  2. Alt+click a text. The editor shows the key, the source text, the current value in the active locale and QA warnings (placeholders, length, glossary).
  3. Click Sign in to GlotFox once. A popup opens the GlotFox app; after you sign in it hands the page a short-lived token.
  4. Save draft stores your text as a draft (history source “in-context”) and updates the page. Open in GlotFox opens the project's key list.
  5. The Capture button takes a screenshot of the tab and uploads it linked to the key. It uses the browser's Screen Capture API, so the browser asks for permission; where the API is not available the button is not shown.

Security model