In-Context Editor is a powerful tool that allows you to preview and edit translations directly in your application. This feature is particularly useful for developers and translators who want to see how translations look in context, ensuring that the final product meets their expectations.
In-Context Editor is available for all SimpleLocalize users, including those on the free plan, and it can be integrated with any HTML, React, Vue, or Angular application. The integration process is straightforward and can be completed in just a few steps.
Features
The In-Context Editor offers a range of features to enhance your translation workflow:
- Live Preview: See how translations look in real-time as you edit them.
- Add missing translations: Easily add translations that are missing from your project.
- Edit existing translations: Modify translations directly in the context of your application.
- Go to translation: Navigate to the translation in the SimpleLocalize dashboard for further editing.
Installation
Installation requires adding a script tag to your HTML file and the SimpleLocalize configuration with your project token.
<script>
window.simplelocalize = {
projectToken: 'your-project-token',
};
</script>
<script src="https://get.simplelocalize.io/js/in-context-editor.iife.js" defer/>
After adding those lines, the In-Context Editor will be automatically initialized on your application and you will be able to see a small icon in the bottom right corner of your application with the SimpleLocalize logo.
Configuration
In-Context Editor highlights the text that can be translated in your application, and the identification of the translatable text is done by the data-translation-key attribute on the HTML elements,
for example:
<div data-translation-key="welcome_message">
Welcome to our application!
</div>
it also works with namespaces,
<div
data-translation-key="welcome_message"
data-translation-namespace="common"
>
Welcome to our application!
</div>
If you're already using other attributes to identify translatable text, you can configure the In-Context Editor to use those attributes instead of data-translation-key and data-translation-namespace,
by adding the following configuration to your window.simplelocalize object:
window.simplelocalize = {
projectToken: "your-project-token",
dataAttributeKey: "data-i18n-key",
dataAttributeNamespace: "data-i18n-namespace"
};
Usage
Once the In-Context Editor is installed, you can click on the SimpleLocalize logo in the bottom right corner of your application. On first click, you will be prompted to provide your SimpleLocalize personal access token. After successful login, you will be able to live preview translations in your application and edit them directly.
Further improvements
We are continuously working to improve the In-Context Editor and its surrounding ecosystem by adding new features like suggestions and automatic linking of translation keys, so you can open them directly from the SimpleLocalize editor. Feel free to share your ideas on how we could make it even better.