Editing web translations right in your browser

Sometimes GIF replaces 1000 words:

looks interesting, right?

DEMO

Having this, you give your translator 100% understanding of the translation context.

The feature is usually called In-Context Editor (for instance in Locize or Phraseapp).

It's worth to say you need PhraseApp Pro subscription for it. In pair to that, we also use lingui-js as a translation library.

How to enable

All you need to is

1. Add PhraseApp In-Context Editor snippet to your page
2. Format messages into the proper format.

If you're in the Javascript world, I have wrote a lingui-phraseapp, which helps you to do these two steps, so your integration may look alike

import { initializePhraseAppEditor, initializePhraseAppEditor } from "lingui-phraseapp";
import catalog from './locales/de/messages.js';

const configInContextEditor = {
  projectId: REACT_APP_PHRASEAPP_PROJECT_ID,
  autoLowercase: false,
  prefix: "--__",
  suffix: "__--",
  phraseEnabled: !!localStorage.getItem("inContextEditor");
};

...
<!-- Add snippet -->
initializePhraseAppEditor(configInContextEditor);

<!-- Format messages -->
const catalogFormatted = configInContextEditor.phraseEnabled
  ? transformCatalog(catalog, configInContextEditor)
  : catalog;

const i18n = setupI18n({ catalogs: { de: catalogFormatted });
...

As you can see from above to enable Editor set inContextEditor: true in the LocalStorage. After that, the modal for username and password will appear.

There are also implementations for other popular translation libraries react-intl-phraseapp, react-i18next-phraseapp, although integration itself is pretty straightforward and simple.

The most important question

Now to the things that really matter:

Does this brings value at all?

The translator we're working says she wanted it for 2 years, although we haven't started active translation phase yet. And you can't say for sure until you'll work with it on daily basis.

I will give an update on this feature, stay tuned!