{"id":28466616,"url":"https://github.com/locize/locize","last_synced_at":"2025-08-15T22:20:12.885Z","repository":{"id":38451617,"uuid":"52345548","full_name":"locize/locize","owner":"locize","description":"locize InContextEditor postMessage API","archived":false,"fork":false,"pushed_at":"2025-07-22T04:24:55.000Z","size":1995,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T10:11:18.458Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.locize.com","language":"JavaScript","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/locize.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2016-02-23T09:04:37.000Z","updated_at":"2025-07-22T04:24:52.000Z","dependencies_parsed_at":"2024-01-16T14:05:34.039Z","dependency_job_id":"d369f319-9150-4d12-ad4d-daa5d222d4e0","html_url":"https://github.com/locize/locize","commit_stats":{"total_commits":99,"total_committers":3,"mean_commits":33.0,"dds":"0.36363636363636365","last_synced_commit":"1447c66086a6efedc20c48c32af5a1545891e90f"},"previous_names":[],"tags_count":52,"template":false,"template_full_name":null,"purl":"pkg:github/locize/locize","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locize%2Flocize","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locize%2Flocize/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locize%2Flocize/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locize%2Flocize/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/locize","download_url":"https://codeload.github.com/locize/locize/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/locize%2Flocize/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270637823,"owners_count":24620429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"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":"2025-06-07T07:04:52.168Z","updated_at":"2025-08-15T22:20:12.876Z","avatar_url":"https://github.com/locize.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://img.shields.io/npm/v/locize.svg?style=flat-square)](https://www.npmjs.com/package/locize)\n\n# locize\n\nThe locize script enables the [incontext editing](https://www.locize.com/docs/context#incontext) feature provided by [locize](https://locize.com).\n\n## Getting started\n\nSource can be loaded via [npm](https://www.npmjs.com/package/locize), [downloaded](https://github.com/locize/locize/blob/master/locize.min.js) from this repo or loaded from the npm CDN [unpkg.com/locize](https://unpkg.com/locize/locize.min.js).\n\n```html\n\u003cscript src=\"https://unpkg.com/locize/locize.min.js\"\u003e\u003c/script\u003e\n```\n\nUsing a module bundler simplest will be adding the script using npm (or yarn).\n\n```bash\nnpm i locize\n```\n\n**Hint:** This module works only in the browser environment.\n\n# How it works\n\nThe script will parse the page content and pass found segments to locize using the browsers postMessage API. To work a text on your page has to be exactly matched to a segment in the editor by determing the matching namespace and key.\n\nThere are three ways to get the namespace and key:\n\n## 1) Using subliminal\n\nBy default using [locizify](https://github.com/locize/locizify) or the `locizePlugin` the translations on your page will contain hidden text containing that information by using [subliminal](https://github.com/i18next/i18next-subliminal)\n\n## 2) Using data-attributes\n\nExtend your html to contain that information\n\n`data-i18n` -\u003e will pass exact key\n\n`data-i18n-ns` -\u003e will pass namespace name\n\neg.:\n\n```html\n\u003cdiv data-i18n-ns=\"usedNamespace\"\u003e\n  \u003cp data-i18n=\"usedKey\"\u003eSome translated text\u003c/p\u003e\n\u003c/div\u003e\n\n// or using ns:key\n\u003cp data-i18n=\"ns:key\"\u003eSome translated text\u003c/p\u003e\n```\n\nSpecifing content as [html](https://github.com/i18next/jquery-i18next?tab=readme-ov-file#set-innerhtml-attributes) or [title/placeholder attribute](https://github.com/i18next/jquery-i18next?tab=readme-ov-file#set-different-attribute) is also supported like used in `jquery-i18next`\n\n## 3) Lookup in locize\n\nIf not using recommended 1) or 2) the script will send the raw texts to the editor which will try an exact search for that text and send the found exact match back (only one result with 100% exact match).\n\n# Setup\n\n## with locizify\n\nThis plugin is already included in [locizify](https://github.com/locize/locizify) \u003e= v4.1.0\n\n**Hint:** show the incontext editor popup by adding incontext=true query paramenter, i.e. http://localhost:8080?incontext=true\n\n## with i18next\n\nFor i18next we provide a plugin to be used.\n\n```js\nimport { locizePlugin } from 'locize'\n\ni18next.use(locizePlugin)\n```\n\n**Hint:** this will show the locize incontext editor as a popup in your website only if the url contains the incontext=true query paramenter, i.e. http://localhost:8080?incontext=true\n\nOpen as default:\n\n```js\nimport { locizeEditorPlugin } from 'locize'\n\ni18next.use(locizeEditorPlugin({ show: true }))\n```\n\nUsing `react-i18next` you might want to bind the editorSaved event to trigger a rerender each time you save changes in the editor:\n\n```js\ni18next.init({\n  // ...\n  react: {\n    bindI18n: 'languageChanged editorSaved'\n  }\n})\n```\n\n**Hint** you can match the integration to a locize project by:\n\nHaving [i18next-locize-backend](https://github.com/locize/i18next-locize-backend) configured or adding\n\n```js\ni18next.init({\n  // ...\n  editor: {\n    projectId: \"5e9ed7da-51ab-4b15-888b-27903f06be09\"\n    version: \"latest\"\n  }\n})\n```\n\n## not using i18next (messageformat, fluent, ...)\n\nNot using i18next currently only the option to show your website inside the locize incontext view (https://www.locize.com/docs/incontext).\n\n### using import\n\n```js\nimport { addLocizeSavedHandler, startStandalone, setEditorLng } from 'locize'\n\n// optional\naddLocizeSavedHandler(res =\u003e {\n  res.updated.forEach(item =\u003e {\n    const { lng, ns, key, data } = item\n    // load the translations somewhere...\n    // and maybe rerender your UI\n  })\n})\n\n// start\nstartStandalone()\n\n// switch lng in locize editor\nsetEditorLng(lng)\n```\n\n**Hint** you can match the integration to a locize project by adding:\n\n```js\nstartStandalone({\n  projectId: \"5e9ed7da-51ab-4b15-888b-27903f06be09\",\n  version: \"latest\"\n})\n```\n\n**Hint:** show the incontext editor popup by adding incontext=true query paramenter, i.e. http://localhost:8080?incontext=true\n\nor\n\n```js\nstartStandalone({\n  show: true\n})\n```\n\n### vanilla javascript\n\nOnly relevant when your website is shown inside the locize incontext solution via incontext view (https://www.locize.com/docs/incontext).\n\n```html\n\u003cscript src=\"https://unpkg.com/locize/locize.min.js\" /\u003e\n```\n\n```js\nwindow.locizeSavedHandler = res =\u003e {\n  res.updated.forEach(item =\u003e {\n    const { lng, ns, key, data } = item\n    // load the translations somewhere...\n    // and maybe rerender your UI\n  })\n}\n\nwindow.locizeStartStandalone()\n```\n\n**Hint** you can match the integration to a locize project by adding:\n\n```js\n\u003cscript\n  id=\"locize\"\n  projectid=\"5e9ed7da-51ab-4b15-888b-27903f06be09\"\n  version=\"latest\"\n  src=\"https://unpkg.com/locize/locize.min.js\"\n\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocize%2Flocize","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flocize%2Flocize","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flocize%2Flocize/lists"}