In-Context Translation
This document explains how to use the Clocale library in-browser translation editing feature. This tool lets developers edit translations directly in the user interface during development, which makes the localization workflow much faster.
Getting Started with In-Context Translation
1. Enabling Development Mode
To use this feature, you must first enable development mode in your ClocaleProvider. Set the isDev prop to true
2. Identifying Translatable Content
Once enabled, you can find translatable content by:
- Holding the
Altkey - Hovering over elements
A red border will appear around any text that can be edited. This visual feedback helps you quickly find what you can change.
3. Authentication with an API Key
The API key ensures that only authorized users can make changes. You can generate one from the Developer Settings page in your Clocale dashboard. Learn more
- Click on any element with a red border to open the editor modal
- If no API key is found in the extension, you'll see a "Missing API Key" dialog:
- To proceed, you'll need to add your API key to the Clocale Extension. Here's how the API key form looks:
- After entering your API key, click "Apply" to authenticate and access the translation editor.
4. Translation Modal
After successful authentication, a translation form will appear with:
- The translation key (e.g.,
welcome.title) - Input fields for each supported language, pre-filled with current translations
- Options to save or cancel your changes
