App Setup

Scan strings

Run the scan command to generate your locale files and runtime helper.

npx anylang scan

scan creates locale files and the generated runtime without calling an AI provider.

locales/
  en.json
  hi.json
  anylang.lock.json
src/
  anylang.ts

Wrap your app

Vite
Next.js

Wrap your React tree once with AnyLangProvider.

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AnyLangProvider } from "@/anylang";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AnyLangProvider>
      <App />
    </AnyLangProvider>
  </StrictMode>
);

Create a client provider.

app/providers.tsx

"use client";

import { AnyLangProvider } from "@/anylang";

export function Providers({ children }: { children: React.ReactNode }) {
  return <AnyLangProvider>{children}</AnyLangProvider>;
}

Wrap your root layout.

app/layout.tsx

import { AnyLangProvider } from "@/anylang";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
           <AnyLangProvider>{children}</AnyLangProvider>
      </body>
    </html>
  );
}

Add a language selector

Build any selector UI and pass the selected locale to setLanguage.

"use client";

import { useLanguage, type LanguageCode } from "@/anylang";

export function LanguageSelector() {
  const { language, languages, setLanguage } = useLanguage();

  return (
    <select
      value={language}
      onChange={(event) => setLanguage(event.target.value as LanguageCode)}
    >
      {languages.map((language) => (
        <option key={language.code} value={language.code}>
          {language.nativeLabel}
        </option>
      ))}
    </select>
  );
}

Get started

Usage

Scan strings

Wrap your app

Add a language selector

​Scan strings

​Wrap your app

​Add a language selector

Scan strings

Wrap your app

Add a language selector