EJS

AI translation for EJS templates with Lingo.dev CLI

What is EJS?

EJS (Embedded JavaScript) is a simple templating language that lets you generate HTML markup with plain JavaScript. It's commonly used in Node.js applications for server-side rendering.

What is Lingo.dev CLI?

Lingo.dev CLI is a free, open-source CLI for translating apps and content with AI. It's designed to replace traditional translation management software while integrating with existing pipelines.

To learn more, see Overview.

About this guide

This guide explains how to translate EJS templates with Lingo.dev CLI.

You'll learn how to:

  • Create a project from scratch
  • Configure a translation pipeline
  • Generate translations with AI

Prerequisites

To use Lingo.dev CLI, ensure that Node.js v18+ is installed:

❯ node -v
v22.17.0

Step 1. Set up a project

In your project's directory, create an i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

This file defines the behavior of the translation pipeline, including what languages to translate between and where the localizable content exists on the file system.

To learn more about the available properties, see i18n.json.

Step 2. Configure the source locale

The source locale is the original language and region that your content was written in. To configure the source locale, set the locale.source property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

The source locale must be provided as a BCP 47 language tag.

For the complete list of the locale codes that Lingo.dev CLI supports, see Supported locale codes.

Step 3. Configure the target locales

The target locales are the languages and regions you want to translate your content into. To configure the target locales, set the locale.targets property in the i18n.json file:

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {}
}

Step 4. Create the source content

If you haven't already, create one or more EJS template files that contain the content to be translated. These files must be located at a path that includes the source locale somewhere in the path (e.g., as a directory name like en/ or as part of the filename like messages.en.ejs).

For EJS templates, translatable content includes:

  • Text content within HTML elements
  • Attribute values (alt text, titles, labels, placeholders, button values)
  • Text within JavaScript alert() or other string literals

EJS template tags (<%= %>, <%- %>, <% %>) and variable names are preserved during translation.

For example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <h1>Welcome back!</h1>
    <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <form action="/login" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" placeholder="Enter username">
    </form>
</body>
</html>

Step 5. Create a bucket

  1. In the i18n.json file, add an "ejs" object to the buckets object:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "ejs": {}
  }
}

  2. In the "ejs" object, define an array of one or more include patterns:

    {
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "ejs": {
      "include": ["./[locale]/example.ejs"]
    }
  }
}

    These patterns define which files to translate.

    The patterns themselves:

    • must contain [locale] as a placeholder for the configured locale
    • can point to file paths (e.g., "[locale]/config.ejs")
    • can use asterisks as wildcard placeholders (e.g., "[locale]/*.ejs")

    Recursive glob patterns (e.g., **/*.ejs) are not supported.

Step 6. Configure an LLM

Lingo.dev CLI uses large language models (LLMs) to translate content with AI. To use one of these models, you need an API key from a supported provider.

To get up and running as quickly as possible, we recommend using Lingo.dev Engine — our own, hosted platform that offers 10,000 tokens of free, monthly usage:

  1. Sign up for a Lingo.dev account.

  2. Run the following command:

    npx lingo.dev@latest login

    This will open your default browser and ask you to authenticte.

  3. Follow the prompts.

Step 7. Generate the translations

In the directory that contains the i18n.json file, run the following command:

npx lingo.dev@latest run

This command:

  1. Reads the i18n.json file.
  2. Finds the files that need to be translated.
  3. Extracts the translatable content from the files.
  4. Uses the configured LLM to translate the extracted content.
  5. Writes the translated content back to the file system.

The first time translations are generated, an i18n.lock file is created. This file keeps track of what content has been translated, preventing unnecessary retranslations on subsequent runs.

Example

en/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>Welcome back!</h1>
        <p>Hello, <%= user.name %>! You have <%= messageCount %> new messages.</p>
    <% } else { %>
        <h1>Please log in</h1>
        <form action="/login" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Sign In</button>
        </form>
    <% } %>
</body>
</html>

es/example.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <title><%= pageTitle %></title>
</head>
<body>
    <% if (user) { %>
        <h1>¡Bienvenido de nuevo!</h1>
        <p>Hola, <%= user.name %>! Tienes <%= messageCount %> nuevos mensajes.</p>
    <% } else { %>
        <h1>Por favor, inicia sesión</h1>
        <form action="/login" method="post">
            <label for="username">Nombre de usuario:</label>
            <input type="text" id="username" placeholder="Enter username">
            <button type="submit">Iniciar sesión</button>
        </form>
    <% } %>
</body>
</html>

i18n.json

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "ejs": {
      "include": ["./[locale]/example.ejs"]
    }
  }
}

i18n.lock

version: 1
checksums:
  21b99a2aea148b309f95ec2c966d326c:
    text_0: e4d2da607604b3fda41eef5e0dd35faa
    text_1: 69eb28c44f7168b1df0455ad2a62588c
    text_2: bff335b01588a8db802bd193c725ec11
    text_3: 0744639a7ac440afe0d792ea79c54512
    text_4: b4cc462fb3a00d2f60deefe548c10a33
    text_5: d0fd310aef9cf3c5827f1db4b0c098a1
    text_6: 85bb1f6fb66b5ab65a9c61469183236e
    text_7: bdbc827b3d224e03394dfd56304500f2
    text_8: 5e8497af456decf6cf716c0a23f1dbc2
    text_9: d572e25ed81420669e65c03925da1001
    text_10: 2cf6537fb69cdd2eb030e55bf4223b93
    text_11: ec7b8f314fe9bc6591006707484ede61
    text_12: c2460fb2a7887fdf2d68db2b553a4338
    text_13: 3abe623951250bd24a9d7799415761ab
    text_14: 988be328b82702586f2cd541858710fe
    text_15: b2328773b0ef0699fd5791055c5cf9e2
    text_16: 92acabd12cd9b63c825294c54fcbc806