Integration guide

Keyglot for plain JavaScript.

Track source text with the Keyglot CLI in any JavaScript codebase and deliver published translations with the zero-dependency core client.

Keyglot without a framework

The Keyglot runtime ships as a zero-dependency core package with optional React bindings. In plain JavaScript the same pieces apply: the CLI keeps your repository's translation files correct, and the core client delivers published translations straight from the Keyglot CDN with caching, staleness handling, and locale-aware t() built in.

1. Track source text with the CLI

The scanner works on JavaScript and TypeScript of any flavor — no framework adapter required to get value out of scan, check, and extract:

npm install --save-dev https://keyglot.com/downloads/keyglot-cli-0.1.3.tgz
npx keyglot init --adapter i18next --source-locale en

The i18next adapter is the closest match for plain JavaScript apps: extraction emits t('key', { ns }) calls, and check understands them when it computes missing and unused keys.

npx keyglot scan
npx keyglot extract --all-high-confidence --write
npx keyglot check

keyglot.config.jsonc controls everything: which files are scanned (include), where resources live (sink.resourcePattern), and how keys are shaped (keyStyle nested or flat). Every command locates the nearest enclosing configuration automatically, so it works from any directory in a monorepo, and check run from a configuration-less repo root checks every configured child package and aggregates the results.

2. Push to the cloud and publish

npx keyglot link --project PROJECT_ID
export KEYGLOT_API_TOKEN=kg_api_...

npx keyglot push --write
npx keyglot publish --promote
npx keyglot status

Publications are immutable: once promoted, a version serves until you promote the next one, and rollback is instant. keyglot pull --environment production can reproduce the exact published files at any time.

3. Deliver translations with the core client

Install the core package and create a client pointed at your project's delivery endpoint:

npm install @keyglot/core
import { createKeyglotClient } from '@keyglot/core';

const client = createKeyglotClient({
  // Delivery identifiers from Project settings → Delivery.
  organization: 'acme_a1b2c3',
  project: 'website_d4e5f6',
  environment: 'production',
  locale: navigator.language,
  namespaces: ['common'],
  publishableKey: import.meta.env.VITE_KEYGLOT_PUBLISHABLE_KEY,
});

await client.load();

document.querySelector('#welcome').textContent = client.t('common', 'greeting.hello', {
  name: 'Ada',
});

The client API is small on purpose:

  • load() / loadNamespace(ns) fetch published resources once and cache them.
  • t(namespace, key, options) interpolates {{placeholders}} and resolves plurals from count using Intl.PluralRules, so _one/_other families work in every locale without extra libraries.
  • setLocale(locale) swaps languages at runtime and re-resolves namespaces.
  • subscribe(listener) reports snapshot changes (ready, loading, stale, error) if you build your own binding layer.
  • fallbackResources inlines a bundled copy of the last known good translations so a cold CDN miss never shows raw keys.

Publishable keys (kg_pub_...) are project-scoped browser credentials: safe to ship in a client bundle, revocable from the dashboard, and enforced with per-plan request budgets on the CDN.

4. Keep it healthy in CI

npx keyglot check --format github

The report flags hardcoded text, missing keys, unused keys, missing translations, placeholder mismatches, plural families without _other, and drift between your local resources and the active production publication. Configure what fails in the check section of keyglot.config.jsonc or with flags:

npx keyglot check --fail-on missing-keys,drift --max missing-keys=5

Key conventions

  • Interpolations are {{name}}; plural categories are _zero, _one, _two, _few, _many, _other, with _other required.
  • Resource shape follows your configured pattern and key style; pull, push, and diff all accept --resource-pattern and --key-style overrides.
  • The CLI never mutates anything without --write, and push never archives cloud-only keys.

Ready to ship translations?

Create a project, link your workspace, and publish your first version.

Get started

Loading