@lovalingo/lovalingo
v0.5.27
Published
React translation runtime with i18n routing, deterministic bundles + DOM rules, and zero-flash rendering.
Maintainers
lovalingoReadme
@lovalingo/lovalingo
Lovalingo is a Lovable translation + multi-language SEO tool for React and Next.js apps. It adds localized URLs, zero-flash UX, and an always-updated sitemap without translating in the browser.
- Website: https://lovalingo.com
- Use cases: https://lovalingo.com/use-cases
- Pricing & onboarding: https://lovalingo.com
Lovalingo is a developer-friendly Weglot alternative for modern vibe-coding tools (Lovable, v0, Bolt) and custom React apps.
Why Lovalingo
- Localized, SEO-friendly URLs (path or query)
- Automatic canonical + hreflang
- Zero-flash loading experience
- Always-updated multilingual sitemap
- Works with React Router and Next.js
- TypeScript support
Installation
npm install @lovalingo/lovalingo react-router-domQuick start (React Router)
import { useRef } from "react";
import { LovalingoProvider, LangRouter } from "@lovalingo/lovalingo";
export function App() {
const navigateRef = useRef();
return (
<LangRouter publicAnonKey="aix_your_public_anon_key" defaultLang="en" langs={["en", "de", "fr"]} navigateRef={navigateRef}>
<LovalingoProvider
publicAnonKey="aix_your_public_anon_key"
defaultLocale="en"
locales={["en", "de", "fr"]}
routing="path"
navigateRef={navigateRef}
>
<YourApp />
</LovalingoProvider>
</LangRouter>
);
}URLs look like: /de/pricing.
Next.js (App Router)
// app/layout.tsx
import { LovalingoProvider } from "@lovalingo/lovalingo";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<LovalingoProvider publicAnonKey="aix_your_public_anon_key" defaultLocale="en" locales={["en", "de", "fr"]}>
{children}
</LovalingoProvider>
</body>
</html>
);
}SEO (canonical + hreflang)
Enabled by default. Disable if you already manage <head> yourself:
<LovalingoProvider seo={false} ... />Sitemap
Lovalingo generates a multilingual sitemap. You should serve it on your own domain at /sitemap.xml.
<LovalingoProvider sitemap={false} ... /> // disable if you manage it yourselfRecommended: follow the install prompt in the Lovalingo dashboard to publish /sitemap.xml.
Advanced API (optional)
Manual translation control:
import { useLovalingoTranslate } from "@lovalingo/lovalingo";
function MyComponent() {
const { translateElement, translateDOM } = useLovalingoTranslate();
const handleDynamicContent = () => {
const el = document.getElementById("dynamic-content");
if (el) translateElement(el);
translateDOM();
};
return <button onClick={handleDynamicContent}>Load Content</button>;
}Edit mode for exclusions:
import { useLovalingoEdit } from "@lovalingo/lovalingo";
function MyComponent() {
const { editMode, toggleEditMode } = useLovalingoEdit();
return (
<button onClick={toggleEditMode}>
{editMode ? "Exit Edit Mode" : "Edit Exclusions"}
</button>
);
}License
COMMERCIAL LICENSE - NOT OPEN SOURCE
Copyright (c) 2026 Lovalingo. All rights reserved.
For Agencies & Developers
You MAY:
- Use Lovalingo in unlimited client projects
- Charge clients for integration and development services
- Deploy compiled code to client applications
- Install via npm/yarn for development and production
You MAY NOT:
- Resell or white-label Lovalingo as your own product
- Redistribute source code or allow client modifications
- Build competing translation products
- Extract code for other purposes
For End Clients
End clients receive usage rights through their agency/developer and may operate applications containing Lovalingo, but may not modify, redistribute, or extract the software.
This software is licensed under the Lovalingo Commercial License. This is NOT open source software. All intellectual property rights remain the exclusive property of Lovalingo.
See LICENSE for complete terms and conditions.