Getting Started

Localive is a live in-context i18n editing toolkit. Click any tagged text in your app, change the translation, and see updates written straight to your locale files.

Install

React

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

Vue

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

Angular

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

Svelte

npm install @localive/svelte @localive/adapter-svelte-i18n @localive/vite svelte-i18n svelte

Set Up Your App

React

Wrap your app with LocaliveProvider and add the i18next adapter. The provider takes adapter, locales, and defaultLocale props directly — you do not pass a pre-built localive instance:

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

function App() {
  return (
    <LocaliveProvider
      adapter={withI18next(i18n)}
      locales={['en', 'fr', 'de']}
      defaultLocale="en"
    >
      <MyApp />
      <LiveEditorOverlay />
    </LocaliveProvider>
  );
}

Add useLocaliveTag to tag elements for in-context editing:

import { useLocaliveTag } from '@localive/react';

function Nav() {
  const { getTagProps } = useLocaliveTag();
  return <span {...getTagProps('nav.home')}>{t('nav.home')}</span>;
}

Vue

Register the Vue plugin created by createLocalivePlugin (a factory — you call it, then app.use() the result):

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';
import en from './locales/en.json';
import fr from './locales/fr.json';

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

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

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

Use v-localive-tag directive in templates:

<template>
  <span v-localive-tag="'nav.home'">{{ t('nav.home') }}</span>
</template>

Angular

Provide Localive in your app config. provideLocalive takes an adapter factory (a function returning the adapter) as its first argument and the locale options as the second:

import { provideLocalive } from '@localive/angular';
import { withTransloco } from '@localive/adapter-transloco';
import { TranslocoService, TranslocoPipe } from '@jsverse/transloco';
import { inject, ApplicationConfig } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLocalive(
      () => withTransloco(inject(TranslocoService), TranslocoPipe),
      { locales: ['en', 'fr', 'de'], defaultLocale: 'en' },
    ),
  ],
};

Import LiveEditorOverlayComponent in your standalone root component and add the overlay. The selector is localive-overlay (not live-editor-overlay):

import { LiveEditorOverlayComponent } from '@localive/angular';

@Component({
  imports: [LiveEditorOverlayComponent],
  template: `
    <localive-overlay></localive-overlay>
    <router-outlet />
  `,
})
export class AppComponent {}

Tag elements with data-i18n-key:

<span [attr.data-i18n-key]="'nav.home'">{{ 'nav.home' | transloco }}</span>

Svelte

Initialize Localive inside a component (Svelte context requires setContext to be called during component initialization). Call initLocalive in your root component’s <script> block, then render the overlay as a descendant:

App.svelte

<script lang="ts">
  import { initLocalive, LiveEditorOverlay } from '@localive/svelte';
  import { withSvelteI18n } from '@localive/adapter-svelte-i18n';
  import { _, locale } from 'svelte-i18n';

  initLocalive(withSvelteI18n({ _, locale }), {
    locales: ['en', 'fr', 'de'],
    defaultLocale: 'en',
  });
</script>

<h1 data-i18n-key="nav.home">{$_('nav.home')}</h1>
<LiveEditorOverlay />

Tag elements with data-i18n-key so the overlay can resolve the key from the clicked element:

<span data-i18n-key="nav.home">{$_('nav.home')}</span>

Add the Dev Server Plugin

The dev-server plugin intercepts save requests from the overlay and writes them back to your locale files on disk.

Vite

vite.config.ts

import { defineConfig } from 'vite';
import { localiveVite } from '@localive/vite';

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

Webpack

webpack.config.js

const { LocaliveWebpackPlugin } = require('@localive/webpack');

module.exports = {
  plugins: [
    new LocaliveWebpackPlugin({
      translationsPath: 'src/locales',
      locales: ['en', 'fr', 'de'],
      defaultLocale: 'en',
    }),
  ],
};

Angular

Update the serve target in angular.json to use @localive/plugin-angular:dev-server. Put the localive options at the top level (they apply to every configuration) and keep buildTarget in each configuration, exactly like the stock dev server:

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@localive/plugin-angular:dev-server",
          "options": {
            "localive": {
              "translationsPath": "src/locales",
              "locales": ["en", "fr", "de"],
              "defaultLocale": "en"
            }
          },
          "configurations": {
            "development": { "buildTarget": "my-app:build:development" },
            "production":   { "buildTarget": "my-app:build:production" }
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

Open the Editor

Start your dev server (npm run dev, ng serve, vite dev, etc.). When you activate the inspector, any text tagged with a translation key becomes clickable — edit it and your locale JSON files update instantly on disk.

In React/Vue the overlay renders an editor panel with a Save button. In Angular the overlay renders the same panel. In Svelte the overlay currently renders a toggle button to activate the inspector; further editor UI is planned.

Next Steps

• CLI Tools — extract, validate, sync, and generate types from the command line
• VS Code Extension — hover previews, autocomplete, go-to-definition, find references
• Core Concepts — how adapters and auto-tagging work