Editing web translations right in your browser

Sometimes GIF replaces 1000 words:

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!