How to Translate Your Existing Lovable app with i18.dev (In Under 1 Minute)

sacsand sandaruvan — Wed, 27 May 2026 16:24:10 +0000

You Already Built Your App in Lovable. Now Make It Multilingual.

Here’s the exact workflow to go from single-language to fully translated using i18.dev’s built-in Lovable integration.

Step 1: Set Up Your i18.dev Project (30 seconds)

Go to i18.dev and sign in (or create an account).
Open the Projects page.

That’s it — you’re ready.

Step 2: Add Your i18.dev Environment Variables in Lovable

In the i18.dev project page, click the "Quick Setup" button to open the 1-minute getting-started guide.

then click the "Create Project + PAT" button to create a project and generate your Personal Access Token.

Then, ask Lovable to set up the keys for you:

"Set up keys for i18.dev — #keys from above ..."

Follow the chat instructions to complete the configuration.

Step 3: Choose “Lovable + React” as Your Library

i18.dev gives you two ready-made prompts. Click Copy on each and paste them directly into Lovable’s chat:

Prompt 1: “01-Setup prompt”

Paste this into Lovable. It will:

Set up Lovable + React + FormatJS + i18.dev CLI
Find your header and add a language switch component
Create an i18.dev readme file in your project for reference

Prompt 2: “02-Ask to translate your home page”

Paste this into Lovable. It will:

Find all user-facing strings in the selected page
Replace strings with Lovable + React translation calls
Push new locale strings to the i18.dev dashboard automatically

Step 4: Add a New Language

Once your strings are pushed to i18.dev:

Open your i18.dev dashboard.
Go to your project — "Quick Start Project".
Click "Add Language" from the left sidebar.
Select the language you want (e.g., Spanish, French, German, Japanese).
i18.dev’s AI automatically translates all your strings instantly.
Review & approve the translations (or invite a translator to refine).

Now here’s the smart part: as soon as you add the language, a notification pops up in the top-right corner:

Click "Copy prompt" — i18.dev has already written the exact prompt you need. Paste it into Lovable. Done.

No manual prompt writing. No guessing. i18.dev knows you just added Arabic, so it generates the precise prompt to pull ar.json, wire it into your app, and update the language switch list.

Step 5: The Mini Sidebar — Prompts on Demand

Anytime you need a prompt, click the mini sidebar Prompts button in the i18.dev project view. It shows:

Now you have a translation-ready web app in minutes. Invite your translator or localization expert to fine-tune wording using i18.dev project settings.

Happy Vibe Coding!

DEV Community: sacsand sandaruvan