Lovable i18n: translate TanStack Start apps
Lovalingo translates Lovable apps without manual JSON files. New Lovable projects use TanStack Start with SSR. Lovalingo handles browser UI translation and switching; configure/es and /fr, html[lang], canonical and hreflang tags, translated metadata, sitemap entries, and target-language raw output in the host app.
1 · Copy this host-aware prompt into 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:
- preserve TanStack Start routing and server rendering
- mount the Lovalingo runtime from @lovalingo/lovalingo/core in client code
- 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 HTMLTip: 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, preserve host routing and server rendering, then mount the browser provider in client code. Older Lovable React/Vite projects use the standard provider path.
npm install @lovalingo/lovalingo
Then create a free Lovalingo project to get your publicAnonKey.
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.Install Lovalingo in the Lovable React project.
- 2.Add
esto the configured locales. - 3.Submit the translated
/esURL in your sitemap.
Go deeper on Lovable i18n
The exact setup for a switcher, locale paths, and metadata without rewriting components into JSON keys.
Why new Lovable projects pair a browser translation runtime with TanStack-owned SSR, routes, and SEO metadata.
The full walkthrough: TanStack Start locales, switcher, SEO routes, glossaries, and overrides.
How the free Starter plan covers a single-language translation end-to-end.
Generate, install, ship: the full AI-builder loop with timing benchmarks.
Browser runtime, TanStack host responsibilities, legacy provider setup, deploy flow.
Why Lovalingo for Lovable apps
- Browser runtime for Lovable's TanStack Start and legacy React/Vite output
- Explicit verification that /es, /fr, and /nl return real pages
- No JSON translation files to manage
- Locale, canonical, hreflang, and metadata support with raw-output verification
- 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 + browser hreflang controls + badge removal. $29/month on Global for unlimited languages.
See full pricingLovable i18n FAQ
How do I put Lovable in Spanish?
Add Lovalingo, enable Spanish (`es`), and add a language switcher. In TanStack Start, implement the `/es` route and raw locale output in the host app; legacy React/Vite projects can use the provider for browser locale UX.
How do I add i18n to a Lovable app?
Install @lovalingo/lovalingo and mount its core provider for browser translation. In new TanStack Start projects, keep host routing and server-rendered SEO in TanStack; legacy React/Vite apps use the standard provider path.
Does Lovable support multiple languages natively?
Lovable can generate UI in the language you ask for and gives new projects SSR through TanStack Start, but it does not replace a full localization layer. Lovalingo adds managed browser translation and switching; the host app owns crawlable locale routes and SEO.
How does Lovable i18n work with SEO?
Lovalingo supports locale-prefixed URLs and can inject translated metadata and hreflang in the browser. On Lovable TanStack Start apps, configure and verify the host framework so target-language body content, html[lang], canonical, hreflang, metadata, and sitemap entries are present in crawlable output.
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. Start-up ($9/mo) adds up to 3 languages and browser hreflang controls; raw SEO remains host-owned.
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.