Native multilingual support for Remix & React Router v7

What gets translated

• ✓Server-rendered loader data and meta tags
• ✓Client-side transitions and optimistic UI updates
• ✓Nested layouts and route boundaries
• ✓Localized route prefixes (/fr/about, /de/about)
• ✓Form actions and dynamic error banners
• ✓Streaming responses and defer() promises
• ✓SEO meta tags and canonical hreflang links
• ✓Interactive language switcher component

Setup guide

1. 1

   Install @lingvit/remix

   Add the package to your Remix or React Router v7 application.

   npm install @lingvit/remix

2. 2

   Wrap root.tsx with LingvitProvider

   Export the Lingvit loader and wrap your Document component.

   import { LingvitProvider } from '@lingvit/remix';
   
   export default function App() {
     return (
       <LingvitProvider projectKey="lng_pk_...">
         <Outlet />
       </LingvitProvider>
     );
   }

3. 3

   Add the language switcher

   Render the pre-built switcher component or use the useLingvit() hook.

   import { LingvitSwitcher } from '@lingvit/remix';
   
   export function Header() {
     return <header><LingvitSwitcher /></header>;
   }