{"id":51377199,"url":"https://github.com/Arigatouz/localive","last_synced_at":"2026-07-05T21:00:32.802Z","repository":{"id":366024742,"uuid":"1274789139","full_name":"Arigatouz/localive","owner":"Arigatouz","description":null,"archived":false,"fork":false,"pushed_at":"2026-06-30T11:59:35.000Z","size":1676,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-30T13:22:03.076Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Arigatouz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-06-19T22:30:20.000Z","updated_at":"2026-06-30T11:59:38.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Arigatouz/localive","commit_stats":null,"previous_names":["arigatouz/localive"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Arigatouz/localive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arigatouz%2Flocalive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arigatouz%2Flocalive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arigatouz%2Flocalive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arigatouz%2Flocalive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Arigatouz","download_url":"https://codeload.github.com/Arigatouz/localive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Arigatouz%2Flocalive/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-07-03T14:00:27.941Z","updated_at":"2026-07-05T21:00:32.797Z","avatar_url":"https://github.com/Arigatouz.png","language":"HTML","funding_links":[],"categories":["Development Utilities"],"sub_categories":["Internationalization"],"readme":"\u003cdiv align=\"center\"\u003e\n\n# Localive\n\n**Edit your translations live, right inside the running app. Works with React, Vue, Angular, and Svelte.**\n\nClick any text on the page, type the new translation, and Localive writes it straight back to your locale file. No more hunting for keys in JSON.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)\n[![npm](https://img.shields.io/npm/v/@localive/core.svg)](https://www.npmjs.com/package/@localive/core)\n\n[Read the docs](https://localive.vercel.app/)\n\n\u003cimg src=\"https://readme-typing-svg.demolab.com?font=Fira+Code\u0026weight=600\u0026size=22\u0026duration=2800\u0026pause=600\u0026color=22D3EE\u0026center=true\u0026vCenter=true\u0026width=460\u0026lines=Made+with+%E2%9D%A4+by+Ali.G;Translate+live.+Ship+faster.;Localive\" alt=\"Made with love by Ali.G\" /\u003e\n\n\u003c/div\u003e\n\n---\n\n## Why Localive\n\nTranslating 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.\n\nLocalive 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.\n\nIt 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.\n\n## Supported stacks\n\nCombine a framework **client** with an i18n-library **adapter** and a build **plugin**:\n\n| Framework | Client | i18n libraries (adapters) | Build plugin |\n|---|---|---|---|\n| Angular | `@localive/angular` | Transloco, ngx-translate | `@localive/plugin-angular` |\n| React | `@localive/react` | i18next, react-intl | `@localive/vite` or `@localive/webpack` |\n| Vue | `@localive/vue` | vue-i18n | `@localive/vite` or `@localive/webpack` |\n| Svelte | `@localive/svelte` | svelte-i18n | `@localive/vite` or `@localive/webpack` |\n\n## Quick start\n\nPick the framework you work in. Each setup is three steps: install the packages, wire up the build plugin, and wrap your app with Localive.\n\n### Angular (with Transloco)\n\n```sh\nnpm install @localive/angular @localive/adapter-transloco @localive/core @localive/plugin-angular @jsverse/transloco\n```\n\nRegister the Localive dev-server builder in `angular.json`. The builder wraps the standard Angular dev server and injects the Localive save endpoint. Set the `localive` options at the top level and `buildTarget` per configuration, just like the stock `dev-server`:\n\n```json\n{\n  \"serve\": {\n    \"builder\": \"@localive/plugin-angular:dev-server\",\n    \"options\": {\n      \"localive\": {\n        \"translationsPath\": \"src/locales\",\n        \"locales\": [\"en\", \"fr\"],\n        \"defaultLocale\": \"en\"\n      }\n    },\n    \"configurations\": {\n      \"development\": { \"buildTarget\": \"your-app:build:development\" },\n      \"production\":   { \"buildTarget\": \"your-app:build:production\" }\n    },\n    \"defaultConfiguration\": \"development\"\n  }\n}\n```\n\nProvide Localive when you bootstrap the app (`main.ts` or `app.config.ts`). `provideLocalive` takes an adapter **factory** (a function returning the `I18nAdapter`) as its first argument and the locale options as its second:\n\n```ts\nimport { provideLocalive, LiveEditorOverlayComponent } from '@localive/angular'\nimport { withTransloco } from '@localive/adapter-transloco'\nimport { TranslocoService, TranslocoPipe } from '@jsverse/transloco'\nimport { inject, ApplicationConfig } from '@angular/core'\nimport { AppComponent } from './app/app.component'\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideLocalive(\n      () =\u003e withTransloco(inject(TranslocoService), TranslocoPipe),\n      { locales: ['en', 'fr'], defaultLocale: 'en' },\n    ),\n  ],\n}\n```\n\n\u003e The Transloco adapter accepts the `TranslocoService` instance and the pipe/directive class so it can resolve keys from elements the Transloco directives touched.\n\nDrop the overlay into your root template. The selector is `localive-overlay`:\n\n```html\n\u003clocalive-overlay\u003e\u003c/localive-overlay\u003e\n```\n\nImport `LiveEditorOverlayComponent` in your standalone root component (or `NgModule`):\n\n```ts\nimport { LiveEditorOverlayComponent } from '@localive/angular'\n\n@Component({\n  imports: [LiveEditorOverlayComponent],\n  template: `\n    \u003clocalive-overlay\u003e\u003c/localive-overlay\u003e\n    \u003crouter-outlet /\u003e\n  `,\n})\nexport class AppComponent {}\n```\n\n### React (with i18next)\n\n```sh\nnpm install @localive/react @localive/adapter-i18next @localive/core @localive/vite i18next react-i18next\n```\n\nAdd the plugin to `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport { localiveVite } from '@localive/vite'\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    localiveVite({\n      translationsPath: './src/locales',\n      locales: ['en', 'fr'],\n      defaultLocale: 'en',\n    }),\n  ],\n})\n```\n\nWrap your app and add the overlay (`App.tsx`):\n\n```tsx\nimport { LocaliveProvider, LiveEditorOverlay } from '@localive/react'\nimport { withI18next } from '@localive/adapter-i18next'\nimport i18n from './i18n'\n\nexport default function App() {\n  return (\n    \u003cLocaliveProvider adapter={withI18next(i18n)} locales={['en', 'fr']} defaultLocale=\"en\"\u003e\n      {/* your app */}\n      \u003cLiveEditorOverlay /\u003e\n    \u003c/LocaliveProvider\u003e\n  )\n}\n```\n\n### Vue (with vue-i18n)\n\n```sh\nnpm install @localive/vue @localive/adapter-vue-i18n @localive/core @localive/vite vue vue-i18n\n```\n\nAdd the plugin to `vite.config.ts`:\n\n```ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport { localiveVite } from '@localive/vite'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    localiveVite({\n      translationsPath: './src/locales',\n      locales: ['en', 'fr'],\n      defaultLocale: 'en',\n    }),\n  ],\n})\n```\n\nRegister the plugin when you create the app (`main.ts`):\n\n```ts\nimport { createApp } from 'vue'\nimport { createI18n } from 'vue-i18n'\nimport { createLocalivePlugin } from '@localive/vue'\nimport { withVueI18n } from '@localive/adapter-vue-i18n'\nimport App from './App.vue'\n\nconst i18n = createI18n({ legacy: false, locale: 'en', fallbackLocale: 'en', messages })\n\nconst localive = createLocalivePlugin({\n  adapter: withVueI18n(i18n.global),\n  locales: ['en', 'fr'],\n  defaultLocale: 'en',\n})\n\ncreateApp(App).use(i18n).use(localive).mount('#app')\n```\n\n### Svelte (with svelte-i18n)\n\n```sh\nnpm install @localive/svelte @localive/adapter-svelte-i18n @localive/core @localive/vite svelte-i18n svelte\n```\n\nAdd the plugin to `vite.config.ts` (same shape as other Vite apps):\n\n```ts\nimport { defineConfig } from 'vite'\nimport { svelte } from '@sveltejs/vite-plugin-svelte'\nimport { localiveVite } from '@localive/vite'\n\nexport default defineConfig({\n  plugins: [\n    svelte(),\n    localiveVite({\n      translationsPath: './src/locales',\n      locales: ['en', 'fr'],\n      defaultLocale: 'en',\n    }),\n  ],\n})\n```\n\nInitialize Localive **inside a component** (Svelte context requires it). Call `initLocalive` during your root component's setup, then render the overlay descendant:\n\n```svelte\n\u003c!-- App.svelte --\u003e\n\u003cscript lang=\"ts\"\u003e\n  import { initLocalive, LiveEditorOverlay } from '@localive/svelte'\n  import { withSvelteI18n } from '@localive/adapter-svelte-i18n'\n  import { _, locale } from 'svelte-i18n'\n\n  initLocalive(withSvelteI18n({ _, locale }), {\n    locales: ['en', 'fr'],\n    defaultLocale: 'en',\n  })\n\u003c/script\u003e\n\n\u003ch1 data-i18n-key=\"app.title\"\u003e{$_('app.title')}\u003c/h1\u003e\n\u003cLiveEditorOverlay /\u003e\n```\n\n\u003e The Svelte overlay provides a toggle button to activate the inspector. Tag elements with `data-i18n-key=\"your.key\"` so clicks resolve to the right locale entry.\n\nThen 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](https://localive.vercel.app/).\n\n## Packages\n\nEverything ships under the [`@localive`](https://www.npmjs.com/org/localive) scope.\n\n**Core**\n- [`@localive/core`](https://www.npmjs.com/package/@localive/core): the framework-agnostic engine, with zero runtime dependencies\n\n**Clients** (framework overlay components)\n- [`@localive/react`](https://www.npmjs.com/package/@localive/react), [`@localive/vue`](https://www.npmjs.com/package/@localive/vue), [`@localive/angular`](https://www.npmjs.com/package/@localive/angular), [`@localive/svelte`](https://www.npmjs.com/package/@localive/svelte)\n\n**Adapters** (bridge to your i18n library)\n- [`@localive/adapter-i18next`](https://www.npmjs.com/package/@localive/adapter-i18next), [`@localive/adapter-react-intl`](https://www.npmjs.com/package/@localive/adapter-react-intl), [`@localive/adapter-vue-i18n`](https://www.npmjs.com/package/@localive/adapter-vue-i18n), [`@localive/adapter-transloco`](https://www.npmjs.com/package/@localive/adapter-transloco), [`@localive/adapter-ngx-translate`](https://www.npmjs.com/package/@localive/adapter-ngx-translate), [`@localive/adapter-svelte-i18n`](https://www.npmjs.com/package/@localive/adapter-svelte-i18n)\n\n**Build plugins**\n- [`@localive/vite`](https://www.npmjs.com/package/@localive/vite), [`@localive/webpack`](https://www.npmjs.com/package/@localive/webpack), [`@localive/plugin-angular`](https://www.npmjs.com/package/@localive/plugin-angular)\n\n**Tooling**\n- [`@localive/cli`](https://www.npmjs.com/package/@localive/cli): the `localive` binary\n- **Localive for VS Code**: available on the VS Code Marketplace\n\n## CLI\n\n```sh\nnpm install -g @localive/cli     # or run it directly: npx @localive/cli --help\n```\n\n| Command | What it does |\n|---|---|\n| `localive extract` | Scans your source files and reports all translation keys (use `--json` for machine output) |\n| `localive validate` | Reports missing, extra, or empty translations, and exits with code 1 so it fits in CI |\n| `localive sync` | Copies missing keys from the default locale into every other locale |\n| `localive types` | Generates a TypeScript union type of all your keys |\n\n## VS Code extension\n\nPreview 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.\n\n## Repository layout\n\nLocalive is an Nx monorepo built on npm workspaces:\n\n- `packages/*`: the libraries we publish, plus the CLI and the VS Code extension.\n- `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.\n\n## License\n\n[MIT](./LICENSE) © Ali.G\n\n\u003cdiv align=\"center\"\u003e\n\n### Made with love by Ali.G\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FArigatouz%2Flocalive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FArigatouz%2Flocalive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FArigatouz%2Flocalive/lists"}