> For the complete documentation index, see [llms.txt](https://developers.weglot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.weglot.com/readme.md).

# Weglot Developer Documentation

Translate your project with Weglot, and customize the Weglot plugins and libraries.

<button type="button" class="button primary" data-action="ask" data-icon="gitbook-assistant">Ask a question...</button>

<button type="button" class="button secondary" data-action="ask" data-query="How do I translate my React app with Weglot?" data-icon="react">Translate a React app</button><button type="button" class="button secondary" data-action="ask" data-query="How do I translate my JSON localization files with the Translate Action?" data-icon="github">Translate JSON files</button><button type="button" class="button secondary" data-action="ask" data-query="How do I customize the Weglot WordPress plugin?" data-icon="wordpress">Customize WordPress</button>

## Translate your project

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-react">:react:</i></h4></td><td><strong>React</strong></td><td>Translate your React and Next.js apps, and their CMS content.</td><td><a href="https://developers.weglot.com/frameworks-and-ai/react">https://developers.weglot.com/frameworks-and-ai/react</a></td></tr><tr><td><h4><i class="fa-github">:github:</i></h4></td><td><strong>Translate Action</strong></td><td>Translate your JSON localization files from GitHub Actions.</td><td><a href="https://developers.weglot.com/frameworks-and-ai/translate-action">https://developers.weglot.com/frameworks-and-ai/translate-action</a></td></tr><tr><td><h4><i class="fa-terminal">:terminal:</i></h4></td><td><strong>API</strong></td><td>Call the Weglot API directly over HTTP.</td><td><a href="https://developers.weglot.com/api-reference">https://developers.weglot.com/api-reference</a></td></tr></tbody></table>

## Translate a React app in minutes

{% columns %}
{% column width="50%" %}
Install the Weglot package on your Next.js or Vite app. Text written in your code is translated when your app is built, and languages and translations are managed in your Weglot 2.0 project.

{% hint style="warning" icon="life-ring" %}
**Need some help?**

<details>

<summary>Some text in my components is not translated</summary>

Point `sourceRoot` to the folder that contains all your pages and components. If the text is in a prop of your own component, declare it with `translatableAttributes`.

</details>

<details>

<summary>Dynamic content stays in the source language</summary>

The first request for a text returns the source text while it is translated. Check that the field goes through `tDynamic`, `tDynamicAll` or `tDynamicHtml`.

</details>

<details>

<summary>The build fails while waiting for translations</summary>

Run the build again without the `.next` cache: the translations already received are kept. To wait longer, raise `translationTimeout`.

</details>
{% endhint %}

<a href="https://developers.weglot.com/frameworks-and-ai/react/getting-started" class="button primary" data-icon="rocket-launch">Get started</a> <a href="https://developers.weglot.com/frameworks-and-ai/react/troubleshooting" class="button secondary" data-icon="life-ring">Troubleshooting</a>
{% endcolumn %}

{% column width="50%" %}
{% stepper %}
{% step %}

#### Create your project

Sign in to Weglot 2.0, create a project with its source and target languages, then copy its API key, from your project settings.

<a href="https://auth.weglot.com/" class="button primary">Sign in to Weglot 2.0</a>
{% endstep %}

{% step %}

#### Install the package

{% code overflow="wrap" %}

```bash
npm install @weglot/translate-react
echo "WEGLOT_API_KEY=pk_your_weglot_api_key" >> .env
```

{% endcode %}
{% endstep %}

{% step %}

#### Add the plugin

{% tabs %}
{% tab title="Next.js" %}
{% code overflow="wrap" %}

```ts
// next.config.ts
import { withWeglot } from "@weglot/translate-react/next";

export default async function () {
  return await withWeglot({}, { sourceRoot: "./app" });
}
```

{% endcode %}
{% endtab %}

{% tab title="Vite" %}
{% code overflow="wrap" %}

```ts
// vite.config.ts
import { defineConfig } from "vite";
import { weglotPlugin } from "@weglot/translate-react/vite";

export default defineConfig({
  plugins: [weglotPlugin({ sourceRoot: "src" })],
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

Then wrap your app with `WeglotProvider`. [See the full setup](https://developers.weglot.com/frameworks-and-ai/react/getting-started).
{% endstep %}
{% endstepper %}
{% endcolumn %}
{% endcolumns %}

## Customize your integration

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-wordpress">:wordpress:</i></h4></td><td><strong>WordPress</strong></td><td>Hooks, filters and helper functions to customize the plugin.</td><td><a href="https://developers.weglot.com/cms/wordpress/getting-started">https://developers.weglot.com/cms/wordpress/getting-started</a></td></tr><tr><td><h4><i class="fa-feather">:feather:</i></h4></td><td><strong>Craft CMS</strong></td><td>Settings, events and use cases to customize the plugin.</td><td><a href="https://developers.weglot.com/cms/craft-cms/overview">https://developers.weglot.com/cms/craft-cms/overview</a></td></tr><tr><td><h4><i class="fa-js">:js:</i></h4></td><td><strong>JavaScript snippet</strong></td><td>Options, functions and link hooks of the JavaScript library.</td><td><a href="https://developers.weglot.com/cms/javascript/javascript">https://developers.weglot.com/cms/javascript/javascript</a></td></tr><tr><td><h4><i class="fa-shopify">:shopify:</i></h4></td><td><strong>Shopify</strong></td><td>Customize the Weglot JavaScript integration on your Shopify theme.</td><td><a href="https://developers.weglot.com/cms/integrations/shopify">https://developers.weglot.com/cms/integrations/shopify</a></td></tr><tr><td><h4><i class="fa-server">:server:</i></h4></td><td><strong>Proxy</strong></td><td>Headers Weglot sends to your original website.</td><td><a href="https://developers.weglot.com/cms/proxy/headers">https://developers.weglot.com/cms/proxy/headers</a></td></tr></tbody></table>

{% hint style="info" icon="sparkle" %}
**Coming soon**: the Weglot MCP server, to add Weglot to your project and manage your translations from your LLM, and the reference for the new Weglot API 2.0.
{% endhint %}

<h2 align="center">Join the Weglot developer community</h2>

<p align="center">Ask questions, share feedback and follow what we build.</p>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><h4><i class="fa-slack">:slack:</i></h4></td><td><strong>Slack community</strong></td><td>Join our Slack to ask questions, share feedback and get tips from the Weglot team and other developers.</td><td><a href="https://inviter.co/weglot" class="button secondary">Join Slack</a></td><td><a href="https://inviter.co/weglot">https://inviter.co/weglot</a></td></tr><tr><td><h4><i class="fa-github">:github:</i></h4></td><td><strong>GitHub</strong></td><td>Browse the source of our plugins and libraries, report issues and contribute.</td><td><a href="https://github.com/weglot" class="button secondary">Go to GitHub</a></td><td><a href="https://github.com/weglot">https://github.com/weglot</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://developers.weglot.com/readme.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.