### Install and Start Application

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Run these commands to install dependencies and start the development server.

```bash
npm install
npm run start
```

--------------------------------

### Setup Lingo.dev Local Development Environment

Source: https://github.com/lingodotdev/lingo.dev/blob/main/CONTRIBUTING.md

Clone the repository, install dependencies, and build the project. Ensure Node.js 18+ and pnpm are installed.

```bash
git clone https://github.com/lingodotdev/lingo.dev
cd lingo.dev
pnpm install
pnpm turbo build
```

--------------------------------

### Install Frontend Dependencies and Run Development Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Install Node.js dependencies and start the Vue.js development server.

```bash
npm install
npm run dev
```

--------------------------------

### Install and Run GlobalOnboard Locally

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/global-onboard/README.md

Clone the repository, install dependencies, set your API key, and start the development server. Visit http://localhost:3000 to view the HR Workspace and Employee preview.

```bash
git clone https://github.com/lingodotdev/lingo.dev.git
cd lingo.dev/community/global-onboard
npm install

# Provide your API key so CLI + SDK can translate
export LINGO_DOT_DEV_API_KEY="your-key"
# Optional alias used by some shells/CLIs
export LINGODOTDEV_API_KEY="$LINGO_DOT_DEV_API_KEY"

npm run dev
```

--------------------------------

### Install Dependencies and Start Vite Dev Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

After creating a Svelte project with Vite, install dependencies and start the development server.

```bash
npm install
npm run dev -- --open
```

--------------------------------

### Start Development Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-global-forms/README.md

Start the development server using npm to run the demo locally.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-global-forms/README.md

Navigate to the demo directory and install project dependencies using npm.

```bash
cd community/lingo-global-forms
npm install
```

--------------------------------

### HTML List Examples

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Demonstrates unordered lists, ordered lists with custom starting values, and menu lists.

```html
*   Unordered list item
*   Another item with [anchor](#forms)

3.  Ordered item with custom value
4.  Next ordered item

*   Menu button 1
*   Menu button 2
```

--------------------------------

### Install Lingo.dev SDK

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/sdk/README.md

Install the SDK using npm. This is the first step to using the Lingo.dev SDK in your project.

```bash
npm i lingo.dev
```

--------------------------------

### Install Awesome Project

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/example/SAMPLE.md

Use npm to install the awesome-project package.

```bash
npm install awesome-project
```

--------------------------------

### Start Production Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/shift-read/README.md

Run the production-ready build of the application.

```bash
pnpm start
```

--------------------------------

### Complete Lingo Translator Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/translators/USAGE.md

A full example demonstrating the setup of the Lingo Translator and its usage within a Next.js server component for fetching translations.

```typescript
// translator.ts
import {
  LingoTranslator,
  createCachedTranslator,
} from "@lingo.dev/compiler-beta/translate";

export const translator = createCachedTranslator(
  new LingoTranslator({
    models: "lingo.dev",
    sourceLocale: "en",
  }),
  {
    cacheDir: ".lingo",
    sourceRoot: "./app",
  }
);

// app/layout.tsx
import { getServerTranslations } from "@lingo.dev/compiler-beta/react/server";
import { translator } from "./translator";
import metadata from "./.lingo/metadata.json";

export default async function RootLayout({ children }) {
  const t = await getServerTranslations({
    metadata,
    translator,
  });

  return (
    <html>
      <body>
        <nav>
          <a href="/">{t("home_link")}</a>
          <a href="/about">{t("about_link")}</a>
        </nav>
        {children}
      </body>
    </html>
  );
}
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/Lingo-lens/README.md

Navigate to the project directory and install all necessary dependencies using npm. Ensure Node.js v18 or higher is installed.

```bash
cd community/Lingo-lens
npm install
```

--------------------------------

### Navigate and Start SvelteKit Dev Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

After creating a SvelteKit project, navigate into its directory and start the development server.

```bash
cd <Name-of-the-app>
npm run dev -- --open
```

--------------------------------

### Set Up Environment Variables

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/README.md

Copy the example environment file and edit it to add your Lingo.dev API key.

```bash
cp .env.example .env
```

--------------------------------

### Start Directus Docker Container

Source: https://github.com/lingodotdev/lingo.dev/blob/main/integrations/directus/README.md

Start the Directus Docker container to load the installed extensions.

```bash
docker compose up
```

--------------------------------

### Install Lingo.dev Globally (Windows Alternative)

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

If `npx` encounters issues on Windows, install the Lingo.dev CLI globally and then log in.

```bash
npm i -g lingo.dev
lingo.dev login
```

--------------------------------

### Testing Watch Mode with Demo Script

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/WATCH_MODE.md

This bash script demonstrates how to set up and test the watch mode. It involves running the setup script, navigating to the demo directory, starting watch mode, and then modifying a locale file to observe automatic retranslation.

```bash
# Use the provided demo setup script:
./demo-watch-setup.sh
cd /tmp/lingo-watch-demo
lingo.dev run --watch

# Then in another terminal:

# Add a new translation key
echo '{"hello": "Hello", "world": "World", "welcome": "Welcome to Lingo.dev", "goodbye": "Goodbye"}' > locales/en.json

# Watch as translations are automatically updated
```

--------------------------------

### Example Test Case

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/tests/README.md

An example demonstrating how to write a new E2E test. It covers setting up a fixture, starting a dev server, switching locales, and cleaning up resources.

```typescript
import { test, expect } from "@playwright/test";
import { setupFixture } from "../../helpers/setup-fixture";
import { switchLocale } from "../../helpers/locale-switcher";

test("my test", async ({ page }) => {
  const fixture = await setupFixture({ framework: "next" });
  const devServer = await fixture.startDev();

  try {
    await page.goto(`http://localhost:${devServer.port}`);
    await switchLocale(page, "de");

    // Your test assertions...
  } finally {
    devServer.stop();
    await fixture.clean();
  }
});
```

--------------------------------

### Clone Repository and Install Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-translator/README.md

Steps to clone the repository, navigate into the project directory, and install project dependencies using pnpm.

```bash
git clone https://github.com/ShubhamOulkar/lingo.video.git
cd lingo.video
```

```bash
pnpm install
```

--------------------------------

### Install New Lingo.dev Compiler

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/compiler/README.md

Install the new Lingo.dev compiler package using npm.

```bash
npm install @lingo.dev/compiler
```

--------------------------------

### Configure API Key

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-global-forms/README.md

Copy the example environment file and add your Lingo.dev API key to the .env file.

```bash
cp .env.example .env
VITE_LINGO_API_KEY=your_actual_api_key_here
```

--------------------------------

### Install Dependencies with pip

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/README.md

Install project dependencies using pip. This is an alternative to using uv.

```bash
pip install -e .
```

--------------------------------

### Install Dependencies and Playwright Browsers

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/tests/QUICK_START.md

Run these commands once to set up your project for E2E testing.

```bash
pnpm install
```

```bash
pnpm playwright:install
```

--------------------------------

### Install Dependencies with uv

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/README.md

Install project dependencies using the uv package manager. This is the recommended method.

```bash
uv sync
```

--------------------------------

### Example Test Flow in TypeScript

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/tests/QUICK_START.md

Demonstrates the typical lifecycle of an E2E test, including setting up a fixture, starting a dev server, running assertions, and cleaning up resources.

```typescript
import { setupFixture } from "../../helpers/setup-fixture";

test("my test", async ({ page }) => {
  // 1. Copy prepared fixture to temp dir (fast - already has node_modules)
  const fixture = await setupFixture({ framework: "next" });

  // 2. Start dev server (dependencies already installed)
  const devServer = await fixture.startDev();

  try {
    // 3. Run your test
    await page.goto(`http://localhost:${devServer.port}`);
    // ... test assertions ...
  } finally {
    // 4. Cleanup
    devServer.stop();
    await fixture.clean();
  }
});
```

--------------------------------

### Install Python Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Install all necessary Python packages listed in the requirements.txt file.

```bash
pip install -r requirements.txt
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/README.md

Use this command to install all project dependencies in the monorepo.

```bash
pnpm install
```

--------------------------------

### Environment Variables Setup

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/shift-read/README.md

Create a .env file in the project root and populate it with your API keys for Firecrawl, lingo.dev, and Groq.

```env
FIRECRAWL_API_KEY=your_firecrawl_api_key_here
LINGODOTDEV_API_KEY=your_lingodotdev_api_key_here
GROQ_API_KEY=groq_api_key_here
```

--------------------------------

### Install @lingo.dev/locales

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/locales/README.md

Install the package using npm. This command adds the library to your project's dependencies.

```bash
npm install @lingo.dev/locales
```

--------------------------------

### Install Playwright Browsers

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/tests/README.md

Installs the necessary Playwright browsers for running E2E tests.

```bash
pnpm playwright:install
```

--------------------------------

### Prepare Test Fixtures

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/tests/QUICK_START.md

Execute this command to prepare the test fixtures, which includes installing dependencies for demo applications. This step is time-consuming and typically only needs to be done once.

```bash
pnpm test:e2e:prepare
```

--------------------------------

### Example Usage: Translate and Add Badge

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/README.md

An example command demonstrating how to translate a sample markdown file to Spanish and Japanese, and add a language selector badge.

```bash
lingo-docs translate example/SAMPLE.md --langs es,ja --badge
```

--------------------------------

### Run Development Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-next16/README.md

Use these commands to start the Next.js development server. Open http://localhost:3000 to view the application.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Start Lingo.dev CLI in Watch Mode

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/WATCH_MODE.md

Use the `--watch` flag with the `run` command to start monitoring files for changes. This will automatically trigger retranslations when modifications are detected.

```bash
lingo.dev run --watch
```

--------------------------------

### Run Backend Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/Lingo-lens/README.md

Start the Node.js backend server using the command below. This server handles communication with the Lingo.dev API.

```bash
node server.js
```

--------------------------------

### Run Backend Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Start the FastAPI backend server in reload mode for development.

```bash
uvicorn src.main:app --reload
```

--------------------------------

### Clone Repository and Navigate to API Directory

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Use these bash commands to clone the repository and change the directory to the API folder for setup.

```bash
git clone <your-repo-url>
cd video-lingo-ai/api
```

--------------------------------

### Install Directus Integration Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/integrations/directus/README.md

Install project dependencies for the Directus integration after cloning the repository.

```bash
cd integrations/directus
pnpm install
```

--------------------------------

### Use Awesome Project Utility

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/lingo-docs/example/SAMPLE.md

Import and use the awesome function from the 'awesome-project' library. This example demonstrates basic usage by passing a string and logging the result.

```javascript
import { awesome } from 'awesome-project';

const result = awesome('Hello World');
console.log(result);
```

--------------------------------

### Start Translation Server Locally

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/translation-server/README.md

Manually start the translation server using tsx for local development. Ensure `--lingo-dir` and `--source-root` match project settings.

```bash
pnpm tsx ../../packages/new-compiler/src/translation-server/cli.ts --port 3456 --target-locales "es,fr,de,ja" --source-locale "en"  --source-root app --lingo-dir ".lingo"
```

--------------------------------

### Vite Configuration Migration (After)

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/compiler/README.md

Example of a Vite configuration using the new Lingo.dev compiler with advanced options.

```typescript
import { defineConfig, type UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import { withLingo } from "@lingo.dev/compiler/vite";

const viteConfig: UserConfig = {
  plugins: [react()],
};

export default defineConfig(async () =>
  await withLingo(viteConfig, {
    sourceLocale: "en",
    targetLocales: ["es", "fr"],
    models: "lingo.dev",
  })
);
```

--------------------------------

### Vite Configuration Migration (Before)

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/compiler/README.md

Example of a Vite configuration using the legacy Lingo.dev compiler.

```typescript
import { defineConfig, type UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "@lingo.dev/_compiler";

const viteConfig: UserConfig = {
  plugins: [react()],
};

export default defineConfig(() =>
  lingoCompiler.vite({
    models: "lingo.dev",
  })(viteConfig)
);
```

--------------------------------

### Start Directus with Docker Compose for Testing

Source: https://github.com/lingodotdev/lingo.dev/blob/main/integrations/directus/README.md

Start Directus using Docker Compose for local testing of the integration. Access it at http://localhost:8055.

```bash
docker-compose up
```

--------------------------------

### Next.js Configuration Migration (Before)

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/compiler/README.md

Example of a Next.js configuration using the legacy Lingo.dev compiler.

```typescript
import lingoCompiler from "@lingo.dev/_compiler";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {};

export default lingoCompiler.next({
  sourceRoot: "app",
  models: "lingo.dev",
})(nextConfig);
```

--------------------------------

### Full i18n.json configuration example

Source: https://context7.com/lingodotdev/lingo.dev/llms.txt

An extensive configuration demonstrating all options for locales, buckets (json, markdown, yaml, android, xcode-strings), formatter, provider, and dev settings.

```json
{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.15",
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de", "ja", "zh-Hans"],
    "extraSource": "en-GB"
  },
  "formatter": "prettier",
  "buckets": {
    "json": {
      "include": ["src/i18n/[locale].json"],
      "exclude": ["src/i18n/test-*.json"],
      "lockedKeys": ["app.version", "api.endpoint"],
      "lockedPatterns": ["https?://[^\\s]+"],
      "ignoredKeys": ["internal.debug"],
      "preservedKeys": ["user.customGreeting"],
      "localizableKeys": ["release.date"]
    },
    "markdown": {
      "include": ["docs/[locale]/*.md"]
    },
    "yaml": {
      "include": [
        {
          "path": "config/[locale].yml",
          "delimiter": "-"
        }
      ]
    },
    "android": {
      "include": ["app/src/main/res/values-[locale]/strings.xml"]
    },
    "xcode-strings": {
      "include": ["App/[locale].lproj/Localizable.strings"]
    }
  },
  "provider": {
    "id": "openai",
    "model": "gpt-4o",
    "prompt": "Translate the following content professionally.",
    "settings": {
      "temperature": 0.3
    }
  },
  "dev": {
    "usePseudotranslator": false
  }
}
```

--------------------------------

### Next.js Configuration Migration (After)

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/compiler/README.md

Example of a Next.js configuration using the new Lingo.dev compiler with advanced options.

```typescript
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceLocale: "en",
    targetLocales: ["es", "fr"],
    models: "lingo.dev",
  });
}
```

--------------------------------

### Inline Code and Keyboard Input Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Shows how to represent inline code, keyboard shortcuts, sample output, and variables using appropriate HTML elements.

```html
Code-ish stuff: <code>const x = 1;</code>, keyboard: <kbd>Ctrl+C</kbd>, sample output: <samp>OK</samp>, and variable <var>n</var>.
```

--------------------------------

### Manual Setup for Pseudolocalization in Layout

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/translators/README.md

Demonstrates manual setup of pseudolocalization with caching within a Next.js layout component. This provides explicit control over the translation function used.

```typescript
// app/layout.tsx
import { getServerTranslations } from '@lingo.dev/compiler-beta/react/server';
import { createCachedTranslator, pseudoTranslate } from '@lingo.dev/compiler-beta/translate';
import __lingoMetadata from './.lingo/metadata.json';

// Create cached translator
const translate = createCachedTranslator(pseudoTranslate, {
  cacheDir: '.lingo',
  sourceRoot: './app',
});

export default async function RootLayout({ children }) {
  const t = await getServerTranslations({
    metadata: __lingoMetadata,
    sourceLocale: 'en',
    translate,  // Pseudolocalize with caching
  });

  return (
    <html>
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### Run Lingo.dev CLI Locally

Source: https://github.com/lingodotdev/lingo.dev/blob/main/CONTRIBUTING.md

Start the CLI in watch mode in one terminal and test its functionality with commands like --help in another.

```bash
# Terminal 1 - watch CLI changes
cd packages/cli
pnpm run dev
```

```bash
# Terminal 2 - test CLI
cd packages/cli
pnpm lingo.dev --help
```

--------------------------------

### Start Vue Development Server

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/vue-integration-guide.md

Command to run the Vue development server. Access the application at http://localhost:8080.

```bash
npm run serve
```

--------------------------------

### Fetch Data with useQuery

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Example of using the `useQuery` hook to fetch data from an API and display it in a list.

```tsx
import { useQuery } from "@tanstack/react-query";

import "./App.css";

function App() {
  const { data } = useQuery({
    queryKey: ["people"],
    queryFn: () =>
      fetch("https://swapi.dev/api/people")
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  });

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

--------------------------------

### Create Directory for Localizable Content

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

Create a directory to store your translation files. This example creates a directory for i18n content within the `src/lib` folder.

```bash
mkdir -p src/lib/i18n
```

--------------------------------

### HTML Details and Summary Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Demonstrates an expandable details element with a summary, allowing users to reveal or hide content.

```html
Expandable details with summary

Details content. Supports [more anchors](#misc).
```

--------------------------------

### Run Lingo.dev CLI for Localization

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/README.md

Execute this command to start the localization process using the Lingo.dev CLI. It processes new or changed content based on the lockfile.

```bash
npx lingo.dev@latest run
```

--------------------------------

### Run Lingo.dev CLI for Translation

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

Execute the Lingo.dev CLI to generate translated content based on your configuration. Use `lingo.dev run` if installed globally.

```bash
npx lingo.dev@latest run
```

```bash
lingo.dev run
```

--------------------------------

### Create New Svelte Project with Vite

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

Use this command to create a new Svelte project using Vite. This installs the Svelte compiler.

```bash
npm create vite@latest <Name-of-the-app> -- --template svelte
```

--------------------------------

### Root Layout with Navigation and Devtools

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Example of a root layout component that includes navigation links and TanStack Router development tools.

```tsx
import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";

import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
});
```

--------------------------------

### Create Dockerfile for Directus Extension

Source: https://github.com/lingodotdev/lingo.dev/blob/main/integrations/directus/README.md

Add a Dockerfile to your project root to install the Lingo.dev Directus extension during the Docker image build process.

```Dockerfile
FROM directus/directus:11.x.y

USER root
RUN corepack enable
USER node

RUN pnpm install @replexica/integration-directus
```

--------------------------------

### Create Localizable Content File

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/vue-integration-guide.md

Define your application's localizable content in a JSON file. This example uses English as the source language.

```json
{
  "welcome": "Welcome to Your Vue.js App",
  "description": "This text is translated by Lingo.dev",
  "greeting": "Hello, {name}!",
  "toggle": "Switch Language",
  "counter": "You clicked {count} times"
}
```

--------------------------------

### Set up React-Query Client and Provider

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Initialize a QueryClient and wrap your application with QueryClientProvider in `main.tsx`.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>,
  );
}
```

--------------------------------

### Custom Client Locale Resolver

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/README.md

Define custom client-side locale detection and persistence logic in `.lingo/locale-resolver.client.ts`. This example uses `localStorage` to get and set the user's locale.

```ts
// Custom client-side locale detection and persistence
export function getClientLocale(): string {
  // Your custom logic - e.g., from localStorage, URL params, etc.
  return localStorage.getItem('user-locale') || 'en';
}

export function persistLocale(locale: string): void {
  localStorage.setItem('user-locale', locale);
  // Optionally update URL, etc.
}
```

--------------------------------

### Basic Lingo.dev Engine Translation

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/translators/lingo/README.md

Demonstrates basic single and batch translation using the recommended Lingo.dev Engine. Ensure the 'ai' and '@lingo.dev/_sdk' packages are installed.

```typescript
import { lingoTranslator } from "@lingo.dev/compiler-beta/translate";

const translator = new lingoTranslator({
  models: "lingo.dev",
  sourceLocale: "en",
});

// Single entry translation
const result = await translator.translate("es", {
  temp: { text: "Hello World", context: {} },
});
console.log(result); // { temp: "Hola Mundo" }

// Multiple entries translation
const batch = await translator.translate("fr", {
  hash1: { text: "Dashboard", context: {} },
  hash2: { text: "Settings", context: {} },
});
console.log(batch);
// { hash1: "Tableau de bord", hash2: "Paramètres" }
```

--------------------------------

### Manage lingo.dev CLI settings

Source: https://context7.com/lingodotdev/lingo.dev/llms.txt

Use `config get`, `config set`, and `config unset` to manage CLI settings like API URLs.

```bash
# Get a setting value
npx lingo.dev@latest config get apiUrl
```

```bash
# Set a value
npx lingo.dev@latest config set apiUrl https://api.lingo.dev
```

```bash
# Unset (delete) a value
npx lingo.dev@latest config unset apiUrl
```

--------------------------------

### Build Application for Production

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Execute this command to create a production-ready build of the application.

```bash
npm run build
```

--------------------------------

### Initialize Lingo.dev Project

Source: https://context7.com/lingodotdev/lingo.dev/llms.txt

Use `lingo.dev init` to create an `i18n.json` configuration file. Supports interactive and non-interactive modes for CI/CD, and allows forcing an overwrite of existing configurations.

```bash
npx lingo.dev@latest init
```

```bash
npx lingo.dev@latest init \
  --no-interactive \
  --source en \
  --targets es,fr,de \
  --bucket json \
  --paths "public/locales/[locale].json"
```

```bash
npx lingo.dev@latest init --force --no-interactive \
  --source en --targets ja,ko --bucket yaml \
  --paths "src/i18n/[locale].yaml"
```

--------------------------------

### HTML Image Placeholder Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

An example of an inline SVG used as a placeholder image.

```html
![Placeholder image](data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='240'%3E%3Crect width='100%25' height='100%25' fill='%23111827'/%3E%3Ctext x='50%25' y='50%25' fill='%23e5e7eb' font-size='28' text-anchor='middle' dominant-baseline='middle'%3EInline SVG Image Placeholder%3C/text%3E%3C/svg%3E)
```

--------------------------------

### Show lingo.dev information

Source: https://context7.com/lingodotdev/lingo.dev/llms.txt

Use these commands to display locale codes, file paths, and key statuses.

```bash
npx lingo.dev@latest show locale
```

```bash
npx lingo.dev@latest show files
```

```bash
npx lingo.dev@latest show locked-keys
```

```bash
npx lingo.dev@latest show ignored-keys
```

```bash
npx lingo.dev@latest show preserved-keys
```

--------------------------------

### HTML Definition List Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Provides an example of a definition list, used for terms and their corresponding definitions.

```html
Term A

Definition for term A.

Term B

Definition for term B.
```

--------------------------------

### Run Local Development Checks

Source: https://github.com/lingodotdev/lingo.dev/blob/main/CONTRIBUTING.md

Install dependencies, build the project, run tests, and check changeset status. Use --force flags for builds and tests if needed.

```bash
pnpm install --frozen-lockfile
pnpm turbo build --force
pnpm turbo test --force
pnpm changeset status --since origin/main
```

--------------------------------

### Install Vue CLI Globally

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/vue-integration-guide.md

Install the Vue CLI globally to manage Vue.js projects. This is a prerequisite for creating new Vue applications.

```bash
npm install -g @vue/cli
```

--------------------------------

### Create New SvelteKit Project

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

Use this command to create a new SvelteKit project. Follow the prompts to configure your project.

```bash
npx sv create <Name-of-the-app>
```

--------------------------------

### Initialize Lingo.dev CLI

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/README.md

Run this command to initialize the Lingo.dev CLI in your project. It sets up the necessary configuration for localization.

```bash
npx lingo.dev@latest init
```

--------------------------------

### Create and Activate Virtual Environment

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Set up a Python virtual environment to manage project dependencies. Activate it using the appropriate command for your operating system.

```bash
python -m venv .venv
source .venv/bin/activate   # Linux/Mac
.venv\Scripts\activate      # Windows
```

--------------------------------

### Install React-Query Dependencies

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Add React-Query and its devtools to your project dependencies using npm.

```bash
npm install @tanstack/react-query @tanstack/react-query-devtools
```

--------------------------------

### Configure Lingo.dev API Key

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/Lingo-lens/README.md

Create a .env file in the project root and add your Lingo.dev API key. This key is required for the backend server to authenticate with the Lingo.dev service.

```bash
LINGO_API_KEY=link_your_actual_api_key_here
```

--------------------------------

### Set Environment Variables

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/video-lingo-ai/README.md

Create a .env file in the API directory and add your GROQ_API_KEY and LINGODOTDEV_API_KEY.

```env
GROQ_API_KEY=<your_openai_api_key>
LINGODOTDEV_API_KEY=<your_lingo_api_key>
```

--------------------------------

### Get User Info with LingoDotDevEngine

Source: https://context7.com/lingodotdev/lingo.dev/llms.txt

Retrieve information about the authenticated user, such as their email and ID.

```typescript
// ── whoami ────────────────────────────────────────────────────────────────────
const user = await engine.whoami();
// => { email: "user@example.com", id: "clxyz..." } or null
```

--------------------------------

### Full Transformation Flow Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/plugin/transform/TRANSFORMATION_PIPELINE.md

Illustrates the complete transformation process from original source code to runtime execution, including detection, metadata creation, and the transformed output with runtime calls.

```jsx
// 1. ORIGINAL SOURCE
export function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// 2. DETECTION
// - Found component: "Greeting"
// - Found text: "Hello, "
// - Generated hash: "a1b2c3d4e5f6"

// 3. METADATA CREATED
{
  "a1b2c3d4e5f6": {
    "sourceText": "Hello, ",
    "context": { "componentName": "Greeting", "filePath": "src/Greeting.tsx" }
  }
}

// 4. TRANSFORMED OUTPUT
import { getServerTranslations } from "@lingo.dev/compiler/react/server";

export async function Greeting({ name }) {
  const { t } = await getServerTranslations({
    hashes: ["a1b2c3d4e5f6"],
  });
  return <h1>{t("a1b2c3d4e5f6", "Hello, ")}{name}!</h1>;
}

// 5. RUNTIME EXECUTION
// - t("a1b2c3d4e5f6", "Hello, ") looks up translation
// - Returns "Hola, " for Spanish locale
// - Falls back to "Hello, " if translation missing
```

--------------------------------

### Install TanStack Store Dependency

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Add TanStack Store to your project dependencies using npm.

```bash
npm install @tanstack/store
```

--------------------------------

### Install vue-i18n for Internationalization

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/vue-integration-guide.md

Add the vue-i18n library to your Vue.js project to handle internationalization and localization.

```bash
npm install vue-i18n@9
```

--------------------------------

### JavaScript Function Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

A simple JavaScript function that takes a name and returns a greeting string.

```javascript
function hello(name){
  return `Hello, ${name}`;
}
```

--------------------------------

### Parse Locale Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/locales/README.md

Demonstrates parsing a locale string into its components. Handles single-component locales as well.

```typescript
parseLocale("en-US"); // { language: "en", region: "US" }
parseLocale("zh-Hans-CN"); // { language: "zh", script: "Hans", region: "CN" }
parseLocale("es"); // { language: "es" }
```

--------------------------------

### Create Lingo.dev CLI Configuration File

Source: https://github.com/lingodotdev/lingo.dev/blob/main/docs/svelte-integration-guide.md

Create the `i18n.json` configuration file in the project root. This file tells Lingo.dev where to find your source content and which languages to translate to.

```bash
touch i18n.json
```

--------------------------------

### Translatable Text Examples

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/plugin/transform/TRANSFORMATION_PIPELINE.md

Illustrates which JSX text nodes are transformed and which are skipped. Whitespace-only nodes and expressions are not transformed.

```jsx
<div>Hello World</div>        // ✅ Transformed
<h1>Welcome!</h1>              // ✅ Transformed
<p>   </p>                     // ❌ Skipped (whitespace only)
<span>{variable}</span>        // ❌ Skipped (expression)
```

--------------------------------

### Verify No Files Created

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/new-compiler/src/plugin/transform/TESTING.md

After running tests, verify that no .lingo or metadata directories were created on the filesystem.

```bash
# Should return 0
find compiler/src -name ".lingo" -type d | wc -l
find compiler/src -name "metadata-dev" -type d | wc -l
find compiler/src -name "metadata-build" -type d | wc -l
```

--------------------------------

### HTML Article Element Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Shows the usage of the article element for self-contained content that could be distributed independently.

```html
### Article inside grid

Using `article` for self-contained content.
```

--------------------------------

### Project Structure Overview

Source: https://github.com/lingodotdev/lingo.dev/blob/main/community/global-onboard/README.md

This tree displays the directory and file structure of the Global Onboard project, highlighting key configuration and source files.

```text
app/
  layout.tsx        # Root metadata + ThemeProvider
  page.tsx          # HR + Employee panels, QA, overrides, spinner
  globals.css       # Tailwind layers + design tokens
components/
  mode-toggle.tsx   # Shadcn-style theme toggle (hidden by default)
data/
  ui.*.json         # Static UI translations (CLI managed)
  onboarding_template.*.json
lib/
  i18n.ts           # Typed loaders for JSON bundles
  lingo-client.ts   # SDK setup + runtime translation helpers
.github/workflows/
  i18n.yml          # CI job running `lingo.dev ci`
i18n.json           # Bucket + locale configuration
```

--------------------------------

### Derive State with TanStack Store

Source: https://github.com/lingodotdev/lingo.dev/blob/main/demo/new-compiler-vite-react-spa/README.md

Example of creating a derived store that automatically updates when the base state changes.

```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
});
doubledStore.mount();

function App() {
  const count = useStore(countStore);
  const doubledCount = useStore(doubledStore);

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
      <div>Doubled - {doubledCount}</div>
    </div>
  );
}

export default App;
```

--------------------------------

### HTML Section Element Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Illustrates the use of the section element for thematic grouping of content within an article or page.

```html
### Section inside grid

Using `section` for thematic grouping.
```

--------------------------------

### HTML Link Variations Example

Source: https://github.com/lingodotdev/lingo.dev/blob/main/packages/cli/demo/html/en/advanced-example.html

Showcases different types of hyperlinks, including external, downloadable, mailto, and tel links.

```html
Links with attributes: [external link](https://example.com) , [download-ish link](#top), [mailto](mailto:test@example.com?subject=Hello), [tel](tel:+15551234567).
```