Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement โ
localize-ai
Advanced tools
localize-ai - npm Package Compare versions
+285
| # ๐ localize-ai | ||
| **Plug & Play AI-powered localization for React apps with lazy loading & per-locale splitting** | ||
| > Context-aware AI localization with multi-provider support โก | ||
| Automatically extract, translate, and serve multilingual UI โ powered by AI โก | ||
| Designed for performance: no unnecessary data, no re-fetching, minimal bundle impact. | ||
| --- | ||
| ## โจ Features | ||
| ### ๐ง Core | ||
| * ๐ Auto-extract static text (`t("...")`) | ||
| * ๐ AI-powered translations (OpenAI, Gemini) | ||
| * โก Incremental translation (only new strings/languages) | ||
| ### โก Performance | ||
| * โก Lazy loading (loads only required language) | ||
| * ๐ฆ Per-locale splitting (smaller bundles) | ||
| * ๐ Built-in caching (no redundant fetches) | ||
| ### โ๏ธ Developer Experience | ||
| * ๐ง Zero-config runtime | ||
| * โ๏ธ React hooks + context | ||
| * ๐ง Context-aware translations | ||
| * ๐ธ Cost optimized (no re-translation) | ||
| --- | ||
| ## โก Performance Optimizations | ||
| ### localize-ai is optimized for production: | ||
| * **Per-locale splitting** | ||
| โ Each language is stored separately (translations_en.json, translations_hi.json) | ||
| * **Lazy loading** | ||
| โ Only loads the active language instead of all translations | ||
| * **Caching** | ||
| โ Prevents repeated fetches and improves performance | ||
| ๐ This ensures fast load times and minimal bundle size. | ||
| --- | ||
| ## ๐ฆ Installation | ||
| ```bash | ||
| npm install localize-ai | ||
| ``` | ||
| --- | ||
| ## โ๏ธ Setup (2 steps) | ||
| ### 1๏ธโฃ Create config | ||
| ```js | ||
| // localize.config.js | ||
| export default { | ||
| sourceLanguage: "en", | ||
| translationLanguages: ["hi", "fr"], | ||
| provider: "gemini", // or "openai" | ||
| apikey: "VITE_GEMINI_API_KEY", | ||
| context: "E-commerce checkout UI for buying products" | ||
| }; | ||
| ``` | ||
| ๐ Providing context improves translation accuracy by helping AI understand intent (e.g., "Charge" in payments vs battery). | ||
| --- | ||
| ### 2๏ธโฃ Add your API key | ||
| ```env | ||
| VITE_GEMINI_API_KEY=your_api_key_here | ||
| ``` | ||
| --- | ||
| ## ๐ Usage | ||
| ### Step 1: Initialize | ||
| ```bash | ||
| npx localize-ai init | ||
| ``` | ||
| --- | ||
| ### Step 2: Extract & translate | ||
| ```bash | ||
| npx localize-ai translate | ||
| ``` | ||
| This will: | ||
| * scan your codebase | ||
| * extract t("text") | ||
| * generate translations | ||
| * create per-language translation files: | ||
| ``` | ||
| public/ | ||
| โโโ translations_en.json | ||
| โโโ translations_hi.json | ||
| โโโ translations_fr.json | ||
| โโโ ... | ||
| localize.runtime.json | ||
| ``` | ||
| --- | ||
| ### Step 3: Wrap your app | ||
| ```tsx | ||
| import { LanguageContextProvider } from "localize-ai"; | ||
| <LanguageContextProvider> | ||
| <App /> | ||
| </LanguageContextProvider> | ||
| ``` | ||
| --- | ||
| ### Step 4: Use translations | ||
| ```tsx | ||
| import { useTranslation } from "localize-ai"; | ||
| function App() { | ||
| const { t } = useTranslation(); | ||
| return <h1>{t("Hello world")}</h1>; | ||
| } | ||
| ``` | ||
| --- | ||
| ## ๐ Change language | ||
| ```tsx | ||
| const { setLang } = useTranslation(); | ||
| setLang("fr"); // switch language | ||
| ``` | ||
| --- | ||
| ## ๐ง How it works | ||
| ```text | ||
| Code โ Extract โ Clean โ AI Translate โ JSON โ React Context โ UI | ||
| ``` | ||
| * Only new strings are translated | ||
| * Only missing languages are generated | ||
| * Existing translations are reused | ||
| --- | ||
| ## ๐ Output | ||
| ```bash | ||
| public/ | ||
| โโโ translations_en.json | ||
| โโโ translations_hi.json | ||
| โโโ translations_fr.json | ||
| โโโ ... | ||
| ``` | ||
| --- | ||
| ## โก Example | ||
| ```tsx | ||
| <h1>{t("Get started")}</h1> | ||
| ``` | ||
| โก๏ธ Automatically becomes: | ||
| ```json | ||
| { | ||
| "Get started": { | ||
| "en": "Get started", | ||
| "hi": "เคถเฅเคฐเฅ เคเคฐเฅเค", | ||
| "fr": "Commencer" | ||
| } | ||
| } | ||
| ``` | ||
| --- | ||
| ## ๐ CLI Commands | ||
| ```bash | ||
| npx localize-ai init # generate runtime config | ||
| npx localize-ai translate # extract + translate | ||
| ``` | ||
| --- | ||
| ## ๐ฏ Why localize-ai? | ||
| | Feature | localize-ai | traditional i18n | | ||
| | ------------------- | ----------- | ---------------- | | ||
| | Auto extraction | โ | โ | | ||
| | AI translation | โ | โ | | ||
| | Incremental updates | โ | โ | | ||
| | Setup time | โก minutes | โณ hours | | ||
| --- | ||
| ## โ ๏ธ Notes | ||
| * Only static strings inside `t("...")` are extracted | ||
| * Ensure `public/` folder exists | ||
| * API key is required only for translation step | ||
| --- | ||
| ## ๐บ Roadmap | ||
| ### Core Improvements | ||
| * [ ] AST-based extraction (no regex) | ||
| * [ ] Better error handling & retry logic for failed translations | ||
| * [ ] CLI UX improvements (spinners, better logs) | ||
| ### Performance & DX | ||
| * [x] Lazy loading translations | ||
| * [x] Per-locale splitting | ||
| * [x] Built-in caching | ||
| * [ ] CDN support for translation files | ||
| ### Features | ||
| * [x] Multi-provider support (OpenAI, Gemini) | ||
| * [ ] Fallback providers (auto-switch if one fails) | ||
| * [ ] Custom translation rules (skip/override specific keys) | ||
| * [ ] Namespace support (group translations) | ||
| ### Developer Experience | ||
| * [ ] VS Code extension (highlight untranslated strings) | ||
| * [ ] Debug mode (show missing translations in UI) | ||
| * [ ] CLI dry-run mode | ||
| ### Future Ideas | ||
| * [ ] Support for frameworks beyond React (Next.js, Vue) | ||
| * [ ] Dashboard for managing translations | ||
| * [ ] Analytics (missing keys, usage tracking) | ||
| --- | ||
| ## ๐ค Contributing | ||
| PRs welcome! Feel free to open issues or suggest improvements. | ||
| --- | ||
| ## ๐ License | ||
| MIT | ||
| --- | ||
| ## ๐ฌ Author | ||
| **Parth Gupta** | ||
| --- | ||
| ## โญ Support | ||
| If you like this project: | ||
| ๐ Star the repo | ||
| ๐ Share with developers | ||
| ๐ Give feedback | ||
| --- |
+2
-2
| { | ||
| "name": "localize-ai", | ||
| "version": "1.2.1", | ||
| "version": "1.2.2", | ||
| "description": "AI-powered React localization with context-aware translations, multi-provider support, lazy loading, and per-locale splitting", | ||
@@ -10,3 +10,3 @@ "main": "dist/index.js", | ||
| "dist", | ||
| "readme.md" | ||
| "README.md" | ||
| ], | ||
@@ -13,0 +13,0 @@ "module": "dist/index.js", |
-285
| # ๐ localize-ai | ||
| **Plug & Play AI-powered localization for React apps with lazy loading & per-locale splitting** | ||
| > Context-aware AI localization with multi-provider support โก | ||
| Automatically extract, translate, and serve multilingual UI โ powered by AI โก | ||
| Designed for performance: no unnecessary data, no re-fetching, minimal bundle impact. | ||
| --- | ||
| ## โจ Features | ||
| ### ๐ง Core | ||
| * ๐ Auto-extract static text (`t("...")`) | ||
| * ๐ AI-powered translations (OpenAI, Gemini) | ||
| * โก Incremental translation (only new strings/languages) | ||
| ### โก Performance | ||
| * โก Lazy loading (loads only required language) | ||
| * ๐ฆ Per-locale splitting (smaller bundles) | ||
| * ๐ Built-in caching (no redundant fetches) | ||
| ### โ๏ธ Developer Experience | ||
| * ๐ง Zero-config runtime | ||
| * โ๏ธ React hooks + context | ||
| * ๐ง Context-aware translations | ||
| * ๐ธ Cost optimized (no re-translation) | ||
| --- | ||
| ## โก Performance Optimizations | ||
| ### localize-ai is optimized for production: | ||
| * **Per-locale splitting** | ||
| โ Each language is stored separately (translations_en.json, translations_hi.json) | ||
| * **Lazy loading** | ||
| โ Only loads the active language instead of all translations | ||
| * **Caching** | ||
| โ Prevents repeated fetches and improves performance | ||
| ๐ This ensures fast load times and minimal bundle size. | ||
| --- | ||
| ## ๐ฆ Installation | ||
| ```bash | ||
| npm install localize-ai | ||
| ``` | ||
| --- | ||
| ## โ๏ธ Setup (2 steps) | ||
| ### 1๏ธโฃ Create config | ||
| ```js | ||
| // localize.config.js | ||
| export default { | ||
| sourceLanguage: "en", | ||
| translationLanguages: ["hi", "fr"], | ||
| provider: "gemini", // or "openai" | ||
| apikey: "VITE_GEMINI_API_KEY", | ||
| context: "E-commerce checkout UI for buying products" | ||
| }; | ||
| ``` | ||
| ๐ Providing context improves translation accuracy by helping AI understand intent (e.g., "Charge" in payments vs battery). | ||
| --- | ||
| ### 2๏ธโฃ Add your API key | ||
| ```env | ||
| VITE_GEMINI_API_KEY=your_api_key_here | ||
| ``` | ||
| --- | ||
| ## ๐ Usage | ||
| ### Step 1: Initialize | ||
| ```bash | ||
| npx localize-ai init | ||
| ``` | ||
| --- | ||
| ### Step 2: Extract & translate | ||
| ```bash | ||
| npx localize-ai translate | ||
| ``` | ||
| This will: | ||
| * scan your codebase | ||
| * extract t("text") | ||
| * generate translations | ||
| * create per-language translation files: | ||
| ``` | ||
| public/ | ||
| โโโ translations_en.json | ||
| โโโ translations_hi.json | ||
| โโโ translations_fr.json | ||
| โโโ ... | ||
| localize.runtime.json | ||
| ``` | ||
| --- | ||
| ### Step 3: Wrap your app | ||
| ```tsx | ||
| import { LanguageContextProvider } from "localize-ai"; | ||
| <LanguageContextProvider> | ||
| <App /> | ||
| </LanguageContextProvider> | ||
| ``` | ||
| --- | ||
| ### Step 4: Use translations | ||
| ```tsx | ||
| import { useTranslation } from "localize-ai"; | ||
| function App() { | ||
| const { t } = useTranslation(); | ||
| return <h1>{t("Hello world")}</h1>; | ||
| } | ||
| ``` | ||
| --- | ||
| ## ๐ Change language | ||
| ```tsx | ||
| const { setLang } = useTranslation(); | ||
| setLang("fr"); // switch language | ||
| ``` | ||
| --- | ||
| ## ๐ง How it works | ||
| ```text | ||
| Code โ Extract โ Clean โ AI Translate โ JSON โ React Context โ UI | ||
| ``` | ||
| * Only new strings are translated | ||
| * Only missing languages are generated | ||
| * Existing translations are reused | ||
| --- | ||
| ## ๐ Output | ||
| ```bash | ||
| public/ | ||
| โโโ translations_en.json | ||
| โโโ translations_hi.json | ||
| โโโ translations_fr.json | ||
| โโโ ... | ||
| ``` | ||
| --- | ||
| ## โก Example | ||
| ```tsx | ||
| <h1>{t("Get started")}</h1> | ||
| ``` | ||
| โก๏ธ Automatically becomes: | ||
| ```json | ||
| { | ||
| "Get started": { | ||
| "en": "Get started", | ||
| "hi": "เคถเฅเคฐเฅ เคเคฐเฅเค", | ||
| "fr": "Commencer" | ||
| } | ||
| } | ||
| ``` | ||
| --- | ||
| ## ๐ CLI Commands | ||
| ```bash | ||
| npx localize-ai init # generate runtime config | ||
| npx localize-ai translate # extract + translate | ||
| ``` | ||
| --- | ||
| ## ๐ฏ Why localize-ai? | ||
| | Feature | localize-ai | traditional i18n | | ||
| | ------------------- | ----------- | ---------------- | | ||
| | Auto extraction | โ | โ | | ||
| | AI translation | โ | โ | | ||
| | Incremental updates | โ | โ | | ||
| | Setup time | โก minutes | โณ hours | | ||
| --- | ||
| ## โ ๏ธ Notes | ||
| * Only static strings inside `t("...")` are extracted | ||
| * Ensure `public/` folder exists | ||
| * API key is required only for translation step | ||
| --- | ||
| ## ๐บ Roadmap | ||
| ### Core Improvements | ||
| * [ ] AST-based extraction (no regex) | ||
| * [ ] Better error handling & retry logic for failed translations | ||
| * [ ] CLI UX improvements (spinners, better logs) | ||
| ### Performance & DX | ||
| * [x] Lazy loading translations | ||
| * [x] Per-locale splitting | ||
| * [x] Built-in caching | ||
| * [ ] CDN support for translation files | ||
| ### Features | ||
| * [x] Multi-provider support (OpenAI, Gemini) | ||
| * [ ] Fallback providers (auto-switch if one fails) | ||
| * [ ] Custom translation rules (skip/override specific keys) | ||
| * [ ] Namespace support (group translations) | ||
| ### Developer Experience | ||
| * [ ] VS Code extension (highlight untranslated strings) | ||
| * [ ] Debug mode (show missing translations in UI) | ||
| * [ ] CLI dry-run mode | ||
| ### Future Ideas | ||
| * [ ] Support for frameworks beyond React (Next.js, Vue) | ||
| * [ ] Dashboard for managing translations | ||
| * [ ] Analytics (missing keys, usage tracking) | ||
| --- | ||
| ## ๐ค Contributing | ||
| PRs welcome! Feel free to open issues or suggest improvements. | ||
| --- | ||
| ## ๐ License | ||
| MIT | ||
| --- | ||
| ## ๐ฌ Author | ||
| **Parth Gupta** | ||
| --- | ||
| ## โญ Support | ||
| If you like this project: | ||
| ๐ Star the repo | ||
| ๐ Share with developers | ||
| ๐ Give feedback | ||
| --- |
No alert changes
No metric changes
No dependency changes