Drop in a single <script> tag. Loco auto-discovers every text node on your page, sends them to a management dashboard, and lets AI handle the translations.
No build pipeline changes. No framework plugins. Just a script tag and a dashboard.
Paste one <script> tag into your page. Loco starts automatically — no configuration required to begin collecting text.
Every text node appears in the Pending tab. Approve the ones you want to translate, then use AI Translate or edit by hand.
Add Loco.widget() to your init script and a floating language switcher appears instantly — no extra setup.
Loco handles the hard parts — text discovery, variable slots, AI, and live updates — so you can focus on your product.
A TreeWalker scans every TEXT_NODE in your DOM — including dynamically added content — and registers them automatically. No manual key management.
Batch-translate hundreds of phrases in seconds with BlueHive AI. Slot placeholders (like {{number:0}}) are preserved automatically.
Inline dynamic values (<strong>, <time>, <var>) become typed slots — {{number:0}}, {{date:0}}, {{text:0}} — and rehydrate correctly after translation.
Edit translations in-context with the Loco side panel. See phrases from the current page URL, filter by status, and update translations without leaving the page.
Download a static translation JSON at any time. Ship it with your app for zero-server File Mode — no CDN connection, no runtime dependency.
See which phrases are pending, approved, or in the trash. Track translation coverage per language and spot gaps before going live.
New DOM nodes added by your SPA or framework are detected in real-time and registered automatically — no page reload required.
Your translation data never leaves your server. Run Loco behind a reverse proxy with a custom base path and API key auth out of the box.
Loco works either way. Start with Server Mode for live updates, export to File Mode for zero-dependency deployments.
Connects your site to a running Loco instance. Text nodes are discovered and registered in real-time. Translations are fetched from the server on demand.
Export a JSON translation file from the dashboard and bundle it with your app. No server connection needed at runtime — perfect for static sites and CDNs.
Paste the snippet into any HTML page. That's it. Loco does the rest.
<!-- 1. Add to any HTML page --> <script src="https://your-loco-server.com/cdn/loco.js"></script> <script> Loco.init({ apiUrl: 'https://your-loco-server.com', apiKey: 'YOUR_API_KEY' }); // Floating language picker — users switch language right away Loco.widget({ position: 'bottom-right' }); </script>
<!-- File mode: no server needed at runtime --> <script src="/path/to/loco.js"></script> <script> Loco.init({ file: '/translations.json' // exported from the dashboard }); // Floating language picker — users switch language right away Loco.widget({ position: 'bottom-right' }); </script>
# Option A — run immediately with npx (no install) npx @hkonda/loco-translate # Option B — install globally npm install -g @hkonda/loco-translate loco --port 6101 --data-dir ./my-loco-data # Option C — clone & run from source git clone https://github.mieweb.com/webchart/loco.git cd loco npm install npm run dev # dashboard on :6100, API on :6101
// translations.json — export from Dashboard → Export JSON { "languages": ["fr", "zh-CN", "es"], "translations": { "fr": { "Hello": "Bonjour", "Sign up": "S'inscrire", "Welcome back, {{text:0}}": "Bon retour, {{text:0}}", "{{number:0}} items in cart": "{{number:0}} articles dans le panier" }, "zh-CN": { "Hello": "你好", "Sign up": "注册", "Welcome back, {{text:0}}": "欢迎回来，{{text:0}}" } } }
The Loco global exposes a small, predictable API for all common tasks.
| Method | Description |
|---|---|
| Loco.init(config) | Initialize in server mode or file mode |
| Loco.apply('lang') | Fetch and apply translations for a language → Promise |
| Loco.restore() | Revert all text to the original language |
| Loco.rescan() | Re-scan the DOM for newly added text nodes |
| Loco.widget({ position }) | Render a floating language switcher widget |
| Loco.textnodes() | Return all discovered phrases with key, context, and element |
| Loco.stopScan() | Pause the MutationObserver |
| Loco.startScan() | Resume the MutationObserver |
One command to start. No account, no signup, no vendor lock-in. Your data stays on your server.