Getting Started with React
Install Glotstack with yarn
yarn install glotstack
Integrate the Glotstack provider into your React app
import * as React from 'react'
import { GlotstackProvider } from 'glotstack'

const importMethod = (locale: string) => {
  // Use fetch() from static directories to optimize bundle sizes; save your translations to a static path.
  return fetch(`/public/translations/${locale}.json`)
}
// // OR implement inline requires for built-in translations — works without dynamic import support.
const translations: Record<string, () => Promise<Translations>> = {
  'en-US': () => require('@/translations/en-US.json'),
  'pl-PL': () => require('@/translations/pl-PL.json'),
  'fr-FR': () => require('@/translations/fr-FR.json'),
};

const importMethod2 = (locale: string) => {
  return translations[locale]();
}

const Application = () => {
  const locale = 'en-US' // replace with your locale source
  return (
    <GlotstackProvider initialLocale={locale} importMethod={importMethod}>
      {/*<YourComponent />*/}
    </GlotstackProvider>
  )
}
When to Use Fetch or Import?
fetch() retrieves files from static hosting like a CDN — this helps keep bundle sizes small, which is ideal for environments like Cloudflare Workers. fetch() is generally preferred unless your environment doesn't support dynamic import syntax, in which case require() is your fallback with a bit more boilerplate. For smaller applications or React Native, we recommend using require() to bundle assets directly.
useGlotstack() within your components
import * as React from 'react'
import {useGlotstack} from 'glotstack'

function MyComponent() => {
  const {t} = useGlotstack()

  return (
    <div>
      {t('Quickstart.example', {assigns: {userName: 'JD'}})}
      {/* Icon can be a function reference or a node */}
      {t('Quickstart.example2', {assigns: {Icon: <Icon/>}})}
    </div>
  )
}
How to Create Your Translation Source File
You can use your native language, but Glotstack defaults to en-US.json . We recommend placing it in a location like ./translations/en-US.json . To minimize bundle sizes, consider using public files like ./public/translations/en-US.json .
New
Prefer YAML over JSON?
Try writing your translation file in YAML (we do!)i18n using YAML
Get Translations
Option 1
: Create .glotstack.json in Your Project
You can use the API key provided in the config. You'll get to run 10 translations before needing to sign up.
Run get-translations
yarn glotstack get-translations
Coming Soon! Live Translations via yarn glotstack live-translate
Option 2:
Use CLI to Fetch Your Translations
export GLOTSTACK_API_KEY="m65vOCKNspkd/5jYqIC7sJ9helOca39IQ1xAje0hO9GzhIg/YF139VVhZ8Zj6oZLWBQar4VoDS8fpzApW7CMGg==" 
yarn glotstack get-translations --source-path "./translations" --project-id "first-project" pl-PL fr-FR
Using the terminal is allowed! However, our options may change frequently, and it's easier to add a codemod for your config than to update saved commands.
© 2026 Glotstack.ai. All rights reserved.
Glotstack is a developer-first localization workflow for React: manage translations in YAML/JSON, keep locales in sync, and ship new languages faster with AI-assisted tools.