Weglot Developer Documentation

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

Translate your project

React

Translate your React and Next.js apps, and their CMS content.

Translate Action

Translate your JSON localization files from GitHub Actions.

API

Call the Weglot API directly over HTTP.

Translate a React app in minutes

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.

Need some help?

Some text in my components is not translated

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.

Dynamic content stays in the source language

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

The build fails while waiting for translations

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

Get started Troubleshooting

1

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.

Sign in to Weglot 2.0

2

Install the package

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

3

Add the plugin

Next.js

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

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

Vite

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

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

Then wrap your app with WeglotProvider. See the full setup.

Customize your integration

WordPress

Hooks, filters and helper functions to customize the plugin.

Craft CMS

Settings, events and use cases to customize the plugin.

JavaScript snippet

Options, functions and link hooks of the JavaScript library.

Shopify

Customize the Weglot JavaScript integration on your Shopify theme.

Proxy

Headers Weglot sends to your original website.

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.

Join the Weglot developer community

Ask questions, share feedback and follow what we build.

Slack community

Join our Slack to ask questions, share feedback and get tips from the Weglot team and other developers.

Join Slack

GitHub

Browse the source of our plugins and libraries, report issues and contribute.

Go to GitHub