Translation with built-in AI

Stay organized with collections Save and categorize content based on your preferences.

Thomas Steiner

Alexandra Klepper

Published: November 13, 2024, Last updated: May 20, 2025

Explainer	Web	Extensions	Chrome Status	Intent
GitHub	Origin trial	Origin trial	View	Intent to Experiment

Use the Translator API in Chrome to translate text with AI models provided in the browser.

Your website may already offer website content in multiple languages, to make it accessible to a global audience. With the Translator API, users can contribute in their first language. For example, users can participate in support chats in their first language, and your site can translate it into the language your support agents use, before it leaves the user's device. This creates a smooth, fast, and inclusive experience for all users.

Translation of content on the web has typically required using a cloud service. First, the source content is uploaded to a server, which runs the translation to a target language, then the resulting text is downloaded and returned to the user. By running translation on the client, you save the time required by server trips and the cost of hosting the translation service.

Get started

The Translator API is available from Chrome 138 stable. First, run feature detection to see if the browser supports the Translator API.

if ('Translator' in self) {
  // The Translator API is supported.
}

While you always know the target language for translations, you may not always know the source language. In such cases, you can use the Language Detector API.

Check language pair support

Translation is managed with language packs, downloaded on demand. A language pack is like a dictionary for a given language.

• sourceLanguage: The current language for the text.
• targetLanguage: The final language the text should be translated into.

Use BCP 47 language short codes as strings. For example, 'es' for Spanish or 'fr' for French.

const translatorCapabilities = await Translator.availability({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
});
// 'available'

The availability() function returns a promise with the following values:

• "unavailable": The implementation does not support translation or language detection of the given languages.
• "downloadable": The implementation supports translation or language detection of the given languages, but a download is required to proceed. The download may be the browser model.
• "downloading": The implementation supports translation or language detection of the given languages. The browser is finishing an ongoing download, as part of creating the associated object.
• "available": The implementation supports translation or language detection of the given languages and any required downloads are already complete.

Listen for model download progress with the downloadprogress event:

const translator = await Translator.create({
  sourceLanguage: 'es',
  targetLanguage: 'fr',
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
});

If the download fails, then downloadprogress events stop and the ready promise is rejected.

Create and run the translator

To create a translator, call the asynchronous create() function. It requires an options parameter with two fields, one for the sourceLanguage and one for the targetLanguage.

// Create a translator that translates from English to French.
const translator = await Translator.create({
  sourceLanguage: 'en',
  targetLanguage: 'fr',
});

Once you have a translator, call the asynchronous translate().

await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"

Sequential translations

Translations are processed sequentially. If you send large amounts of text to be translated, subsequent translations are blocked until the earlier ones complete.

For the best response to your requests, chunk them together and add a loading interface, such as a spinner, to convey that translation is ongoing.

Demo

You can see the Translator API, used in combination with the Language Detector API, in the Translator and Language Detector API playground.

Standardization effort

We're working to standardize the Translator API, to ensure cross-browser compatibility.

Our API proposal received community support and has moved to the W3C Web Incubator Community Group for further discussion. The Chrome team requested feedback from the W3C Technical Architecture Group and asked Mozilla and WebKit for their standards positions.

You can participate in the standards effort by joining the Web Incubator Community Group.

Share feedback

We want to see what you're building with the Language Detector API. Share your websites and web applications with us on X, YouTube, and LinkedIn.

For feedback on Chrome's implementation, file a bug report or a feature request.