> ## Documentation Index
> Fetch the complete documentation index at: https://anylang.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install anylang-dev and configure it for Vite or Next.js.

Use the framework tabs below to pick your setup path. Tabs with the same title stay synchronized across the page.

## Install

<Tabs>
  <Tab title="Vite" icon="zap">
    ```bash theme={null}
    npm install --save-dev anylang-dev
    npx anylang init
    ```
  </Tab>

  <Tab title="Next.js" icon="triangle">
    ```bash theme={null}
    npm install --save-dev anylang-dev
    npx anylang init
    ```
  </Tab>
</Tabs>

## Configure your framework

<Tabs>
  <Tab title="Vite" icon="zap">
    Add the anylang plugin before your React plugin in `vite.config.ts`.

    ```ts vite.config.ts theme={null}
    import { defineConfig } from "vite";
    import react from "@vitejs/plugin-react";
    import anylang from "anylang-dev/vite";

    export default defineConfig({
      plugins: [anylang(), react()],
    });
    ```

    If you use TypeScript and `tr="false"`, add the JSX type augmentation once.

    ```ts src/vite-env.d.ts theme={null}
    import "anylang-dev/jsx-runtime";
    ```
  </Tab>

  <Tab title="Next.js" icon="triangle">
    Wrap your Next config with `anylang` in `next.config.mjs`.

    ```js next.config.mjs theme={null}
    import anylang from "anylang-dev/next";

    const nextConfig = {};

    export default anylang({
      runtimeImport: "@/anylang",
    })(nextConfig);
    ```

    If you use TypeScript and `tr="false"`, add the JSX type augmentation in a global declaration file.

    ```ts anylang-env.d.ts theme={null}
    import "anylang-dev/jsx-runtime";
    ```

    Update your `package.json` scripts to use the `--webpack` flag, as Next.js Turbopack is not supported by the plugin yet.

    ```json package.json theme={null}
    "scripts": {
      "dev": "next dev --webpack",
      "build": "next build --webpack",
      "start": "next start",
      "lint": "eslint"
    }
    ```
  </Tab>
</Tabs>