---

Why Localive

Translating an app is slow work. You spot a string in the UI, switch to your editor, dig through a JSON file for the right key, change it, reload, and check the result. Then you start over for the next string. The mapping between the text on screen and the key in the file lives only in your head, and it falls apart every time you switch files.

Localive removes those middle steps. It paints an overlay on top of your running app, so you click the text, type the new value, and it saves the change to the correct locale file for you. You never look up a key by hand again.

It hooks into whichever i18n library you already use, runs across all four major frameworks, and ships with a CLI and a VS Code extension for the parts the overlay does not cover.

Supported stacks

Combine a framework client with an i18n-library adapter and a build plugin:

Framework	Client	i18n libraries (adapters)	Build plugin
Angular	@localive/angular	Transloco, ngx-translate	@localive/plugin-angular
React	@localive/react	i18next, react-intl	@localive/vite or @localive/webpack
Vue	@localive/vue	vue-i18n	@localive/vite or @localive/webpack
Svelte	@localive/svelte	svelte-i18n	@localive/vite or @localive/webpack

Quick start

Pick the framework you work in. Each setup is three steps: install the packages, wire up the build plugin, and wrap your app with Localive.

Angular (with Transloco)

npm install @localive/angular @localive/adapter-transloco @localive/core @localive/plugin-angular @jsverse/transloco

Register the Localive dev-server builder in angular.json:

{
  "serve": {
    "builder": "@localive/plugin-angular:dev-server",
    "configurations": {
      "development": { "buildTarget": "your-app:build:development" }
    }
  }
}

Provide Localive when you bootstrap the app (main.ts):

import { bootstrapApplication } from '@angular/platform-browser'
import { provideLocalive } from '@localive/angular'
import { withTransloco } from '@localive/adapter-transloco'
import { TranslocoService } from '@jsverse/transloco'
import { AppComponent } from './app/app.component'

bootstrapApplication(AppComponent, {
  providers: [
    provideLocalive({
      adapter: (transloco: TranslocoService) => withTransloco(transloco),
      locales: ['en', 'fr'],
      defaultLocale: 'en',
    }),
  ],
}).catch((err) => console.error(err))

Drop the overlay into your root template:

<localive-overlay></localive-overlay>

React (with i18next)

npm install @localive/react @localive/adapter-i18next @localive/core @localive/vite i18next react-i18next

Add the plugin to vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { localiveVite } from '@localive/vite'

export default defineConfig({
  plugins: [
    react(),
    localiveVite({
      translationsPath: './src/locales',
      locales: ['en', 'fr'],
      defaultLocale: 'en',
    }),
  ],
})

Wrap your app and add the overlay (App.tsx):

import { LocaliveProvider, LiveEditorOverlay } from '@localive/react'
import { withI18next } from '@localive/adapter-i18next'
import i18n from './i18n'

export default function App() {
  return (
    <LocaliveProvider adapter={withI18next(i18n)} locales={['en', 'fr']} defaultLocale="en">
      {/* your app */}
      <LiveEditorOverlay />
    </LocaliveProvider>
  )
}

Vue (with vue-i18n)

npm install @localive/vue @localive/adapter-vue-i18n @localive/core @localive/vite vue vue-i18n

Add the plugin to vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { localiveVite } from '@localive/vite'

export default defineConfig({
  plugins: [
    vue(),
    localiveVite({
      translationsPath: './src/locales',
      locales: ['en', 'fr'],
      defaultLocale: 'en',
    }),
  ],
})

Register the plugin when you create the app (main.ts):

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import { createLocalivePlugin } from '@localive/vue'
import { withVueI18n } from '@localive/adapter-vue-i18n'
import App from './App.vue'

const i18n = createI18n({ legacy: false, locale: 'en', fallbackLocale: 'en', messages })

const localive = createLocalivePlugin({
  adapter: withVueI18n(i18n.global),
  locales: ['en', 'fr'],
  defaultLocale: 'en',
})

createApp(App).use(i18n).use(localive).mount('#app')

Then start your dev server, open the app, and click any translated string to edit it. Full guides for every framework live at localive.vercel.app.

Packages

Everything ships under the @localive scope.

Core

• @localive/core: the framework-agnostic engine, with zero runtime dependencies

Clients (framework overlay components)

• @localive/react, @localive/vue, @localive/angular, @localive/svelte

Adapters (bridge to your i18n library)

• @localive/adapter-i18next, @localive/adapter-react-intl, @localive/adapter-vue-i18n, @localive/adapter-transloco, @localive/adapter-ngx-translate, @localive/adapter-svelte-i18n

Build plugins

• @localive/vite, @localive/webpack, @localive/plugin-angular

Tooling

• @localive/cli: the localive binary
• Localive for VS Code: available on the VS Code Marketplace

CLI

npm install -g @localive/cli     # or run it directly: npx @localive/cli --help

Command	What it does
localive extract	Scans your source files and collects translation keys into a locale JSON
localive validate	Reports missing, extra, or empty translations, and exits with code 1 so it fits in CI
localive sync	Copies missing keys from the default locale into every other locale
localive types	Generates a TypeScript union type of all your keys

VS Code extension

Preview translations on hover, autocomplete keys as you type, jump to a key's definition in the locale JSON, find every reference, get a warning on missing keys, and create or rename a key across all locales at once. Search for "Localive" in the Extensions panel to install it.

Repository layout

Localive is an Nx monorepo built on npm workspaces:

• packages/*: the libraries we publish, plus the CLI and the VS Code extension.
• apps/*: framework playgrounds, the end-to-end test app (playground-e2e), and the documentation website. These are marked private: true and are never published. They serve as live demos and tests, and they stay part of the open-source repo.

License

MIT © Ali.G