Lovable i18n: translate TanStack Start apps

Lovalingo translates Lovable apps without manual JSON files. New Lovable projects use TanStack Start with SSR, while Lovalingo adds the missing multilingual layer: automatic UI translation, /es and /fr locale URLs, html[lang], canonical and hreflang tags, translated metadata, and a language switcher.

1 · Copy this TanStack-aware prompt into Lovable

Install Prompt for Lovable
Open Lovable
Add multilingual support to this Lovable app with Lovalingo.

npm install @lovalingo/lovalingo

Detect the app stack first.

If this project uses TanStack Start:
- configure Lovalingo's TanStack Start setup
- add locale URLs for /en, /es, /fr, /nl
- make /:locale/* routes return HTTP 200
- render the correct html[lang], canonical, hreflang, title, meta description, OG, and Twitter tags on the server
- add the Lovalingo language switcher
- keep /.well-known/lovalingo.json, /robots.txt, and /sitemap.xml unprefixed

If this project is a legacy React/Vite Lovable app:
- use LovalingoProvider at the root
- enable routing="path"
- add the Lovalingo language switcher

import { LovalingoProvider } from '@lovalingo/lovalingo/core';

<LovalingoProvider
  publicAnonKey="YOUR_PUBLIC_KEY"
  defaultLocale="en"
  locales={["fr", "es", "de", "it"]}
  routing="path"
>
  <App />
</LovalingoProvider>

For legacy React/Vite apps, add a language switcher anywhere in the UI:

import { LanguageSwitcher } from '@lovalingo/lovalingo/core';
<LanguageSwitcher />

After setup, verify:
- /es returns 200
- the switcher appears
- html[lang], canonical, hreflang, and translated metadata are present in the initial HTML

Tip: select the block above, copy, and paste it as the next prompt in your Lovable chat. The prompt handles new TanStack Start projects and legacy React/Vite projects differently.

2 · Or install manually

If you want to add Lovalingo without the prompt, install it directly in your Lovable codebase. For new TanStack Start projects, use the TanStack setup path after installing the package. For older Lovable React/Vite projects, use the provider path.

npm install @lovalingo/lovalingo

Then create a free Lovalingo project to get your publicAnonKey.

Create free project

How to put a Lovable app in Spanish

If someone searches “como poner Lovable en español”, the practical setup is simple: add Lovalingo to the generated React app, enable Spanish as thees locale, add the language switcher, and publish the Spanish route at /es.

  1. 1.Install Lovalingo in the Lovable React project.
  2. 2.Add es to the configured locales.
  3. 3.Submit the translated /es URL in your sitemap.

Go deeper on Lovable i18n

Why Lovalingo for Lovable apps

  • Built for Lovable's TanStack Start stack and legacy React/Vite apps
  • SSR-aware locale URLs: /es, /fr, /nl return real pages
  • No JSON translation files to manage
  • Automatic hreflang, canonical, html[lang], and translated metadata
  • Language switcher aligned with TanStack Router navigation
  • Free Starter plan: 1 target language, unlimited words

How much does Lovable i18n cost with Lovalingo?

$0/month forever on the Starter plan (1 target language, unlimited words under fair use, Lovalingo badge shown). $9/month on Start-up for up to 3 languages + hreflang SEO + badge removal. $29/month on Global for unlimited languages.

See full pricing

Lovable i18n FAQ

How do I put Lovable in Spanish?

To put a Lovable app in Spanish, add Lovalingo to the Lovable app, enable Spanish (`es`) as a target locale, add a language switcher, and publish the `/es` route. New Lovable projects use the TanStack Start setup path; legacy React projects use the provider path.

How do I add i18n to a Lovable app?

Install @lovalingo/lovalingo and let Lovalingo detect the Lovable stack. New Lovable projects use TanStack Start, so Lovalingo configures locale routes, server-rendered metadata, hreflang, and the switcher through the TanStack setup path. Legacy React/Vite Lovable apps use the standard LovalingoProvider path.

Does Lovable support multiple languages natively?

Lovable can generate UI in any language you ask for and now gives new projects SSR through TanStack Start, but it does not replace a full localization layer. Lovalingo adds runtime language switching, locale URLs, translated metadata, hreflang, and automatic translation.

How does Lovable i18n work with SEO?

Lovalingo emits proper hreflang tags, locale-prefixed URLs (/fr/page, /es/page, etc), translated meta descriptions, and the correct html[lang] value. On Lovable TanStack Start apps, those signals are server-rendered so crawlers can index each locale independently.

Can I translate a Lovable app for free?

Yes. Lovalingo's Starter plan is free forever with 1 target language and unlimited words under fair use. Upgrade to Start-up ($9/mo) for up to 3 languages with hreflang SEO.

How is Lovable i18n different from i18next or react-i18next?

react-i18next requires you to manage JSON translation files manually for every string. Lovalingo translates content automatically with AI, no JSON files. You keep editorial control via the dashboard for overrides.

Start translating your Lovable app for free

Free Starter plan. No credit card. Pick 1 target language and add the Lovalingo layer to a Lovable TanStack Start or legacy React/Vite app.

Get started free
Free forever for 1 language