@echo-lingua/inline-editor

A dev-only, in-browser translation toolbar for Echo Lingua. Hold Alt and click any translated string in your running app, edit it (or its other locales) in place, and the change is written straight back to your source .po files on disk. No round-trip through a dashboard, no copy-paste.

It is a development tool only — it runs during dev (a Vite plugin, or any Node dev server) and ships nothing to production. It pairs with @echo-lingua/i18n (the _() marker, extraction, and runtime) and @echo-lingua/sdk (the translate API, for AI-assisted suggestions in the toolbar).

Screenshots

Hold Alt and every translatable string on the page gets a dotted outline — click one to edit it.

Edit the source string in place:

…or any target locale, with AI-assisted suggestions:

Add per-entry context and flags that are written back to the .po catalog:

Install

npm install -D @echo-lingua/inline-editor

It expects these peers in your project (most React + Vite apps already have them):

npm install @echo-lingua/i18n @echo-lingua/sdk react react-dom vite

Setup

Add both plugins to your Vite config. echoLinguaBabel() instruments your _() calls in dev so the toolbar can map a rendered string back to its source; echoLinguaInlineEditor() serves the toolbar and the write-back endpoint. Both are inert outside vite dev.

// vite.config.ts — dev only
import { echoLinguaBabel, echoLinguaInlineEditor } from '@echo-lingua/inline-editor';

export default defineConfig(({ command }) => ({
  plugins: [
    react(command === 'serve' ? { babel: { plugins: [echoLinguaBabel()] } } : {}),
    echoLinguaInlineEditor(),
  ],
}));

Run vite dev and hold Alt — translated strings gain a dotted outline. Click one to open the toolbar, edit the text (or switch locales), and save; the matching entry is updated in your .po catalog. Recompile with echo-lingua-i18n compile to refresh the runtime catalog.

Use with other bundlers (webpack, Rollup, esbuild, Express…)

The Vite plugin just wires up three framework-neutral pieces. For a React app on any other dev setup, wire the same three yourself (all dev-only — never ship them to production):

1. The Babel transform — add echoLinguaBabel() to your Babel plugins (e.g. babel-loader), so each _() call site is tagged and the toolbar can map a rendered string back to its source.
2. The dev endpoints — mount registerRoutes(app, projectRoot) on your dev server's Connect/Express app. app is anything with .use(route, handler) (webpack-dev-server's app, an Express instance, Vite's server.middlewares, …); projectRoot is where translations/ lives.
3. The overlay — in a dev-only entry, import { mountInlineEditor } from '@echo-lingua/inline-editor/client' and call mountInlineEditor().

webpack example

// webpack.config.js (development)
const { registerRoutes } = require('@echo-lingua/inline-editor');
const { echoLinguaBabel } = require('@echo-lingua/inline-editor');

module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: {
          loader: 'babel-loader',
          options: { plugins: [echoLinguaBabel()] }, // dev config only
        },
      },
    ],
  },
  devServer: {
    setupMiddlewares(middlewares, devServer) {
      registerRoutes(devServer.app, process.cwd()); // process.cwd() = project root
      return middlewares;
    },
  },
};

// src/dev-inline-editor.ts — imported only in development
import { mountInlineEditor } from '@echo-lingua/inline-editor/client';
mountInlineEditor();

Rollup, esbuild, and plain Express dev servers follow the same pattern: add the Babel plugin to your transform step, registerRoutes(app, root) on the dev server, and import the client mount in a dev-only entry. (Next.js support — its SWC pipeline and App Router — is tracked separately.)

How it fits

echo-lingua-i18n extract   # scan source, hydrate each locale's .po   (@echo-lingua/i18n-cli)
echo-lingua translate      # fill the .po files through the API        (@echo-lingua/sdk)
echo-lingua-i18n compile   # compile the translated .po into the runtime catalog
# …then edit any string in place with the inline editor during `vite dev`.

License

MIT