@aixyte/aixster

Seamless website translation for React and Next.js applications with zero-flash rendering and automatic language routing.

Installation

``bash
npm install @aixyte/aixster react-router-dom
`

Quick Start

$3

One-line setup that automatically handles language routing like /en/pricing, /fr/pricing, /de/pricing:

`tsx
import { LangRouter, AixsterProvider } from '@aixyte/aixster';
import { Routes, Route } from 'react-router-dom';
import { useRef } from 'react';

function App() {
const navigateRef = useRef();

return (

apiKey="aix_your_api_key"
defaultLocale="en"
locales={['en', 'fr', 'de', 'es']}
routing="path"
navigateRef={navigateRef}
>

{/ No language prefix needed! /}
} />
} />
} />
} />



);
}
`

Important: Pass the same navigateRef to both and for proper URL synchronization.

URLs automatically work as:
- /en/, /en/home, /en/pricing, /en/about
- /fr/, /fr/home, /fr/pricing, /fr/about
- /de/, /de/home, /de/pricing, /de/about

$3

Use query parameters like /pricing?t=fr:

`tsx
import { AixsterProvider } from '@aixyte/aixster';
import { BrowserRouter } from 'react-router-dom';

function App() {
return (

apiKey="aix_your_api_key"
defaultLocale="en"
locales={['en', 'de', 'fr', 'es']}
routing="query"
>



);
}
`

$3

`tsx
// app/layout.tsx
import { AixsterProvider } from '@aixyte/aixster';

export default function RootLayout({ children }) {
return (


apiKey="aix_your_api_key"
defaultLocale="en"
locales={['en', 'de', 'fr', 'es']}
>
{children}



);
}
`

Configuration

`tsx
apiKey="aix_xxx" // Required: Your Aixster API key
defaultLocale="en" // Required: Source language
locales={['en', 'de', 'fr']} // Required: Supported languages
apiBase="https://..." // Optional: Custom API endpoint
routing="query" // Optional: 'query' | 'path' (default: 'query')
switcherPosition="bottom-right" // Optional: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
switcherOffsetY={20} // Optional: Vertical offset in pixels
editMode={false} // Optional: Enable edit mode
editKey="KeyE" // Optional: Keyboard shortcut for edit mode
mode="dom" // Optional: 'dom' | 'context' (default: 'dom')
sitemap={true} // Optional: Auto-inject sitemap link (default: true) - NEW in v4.2.2
>
{children}

`

$3

- query (default): Language in query parameter /pricing?t=fr
- Use with standard React Router setup
- No URL structure changes needed

- path: Language in URL path /fr/pricing
- Use with wrapper
- Automatic language routing
- SEO-optimized URLs
- See PATH_EXAMPLES.md for detailed examples

Path Mode Helpers (v4.2+)

$3

`tsx
import { LangLink } from '@aixyte/aixster';

function Navigation() {
return (



);
}
`

$3

`tsx
import { useLang } from '@aixyte/aixster';

function MyComponent() {
const lang = useLang(); // 'en', 'fr', 'de', etc.
return

;
}
`

$3

`tsx
import { useLangNavigate } from '@aixyte/aixster';

function MyComponent() {
const navigate = useLangNavigate();

const goToPricing = () => {
navigate('pricing'); // Goes to /en/pricing or /fr/pricing automatically
};

return View Pricing;
}
`

Core Hooks

$3

Access locale state and switching:

`tsx
import { useAixster } from '@aixyte/aixster';

function MyComponent() {
const { locale, setLocale, isLoading, config } = useAixster();

return (
setLocale('de')}>
Switch to German

);
}
`

$3

Manual translation control:

`tsx
import { useAixsterTranslate } from '@aixyte/aixster';

function MyComponent() {
const { translateElement, translateDOM } = useAixsterTranslate();

const handleDynamicContent = () => {
// Translate specific element
const el = document.getElementById('dynamic-content');
if (el) translateElement(el);

// Or translate entire DOM
translateDOM();
};

return Load Content;
}
`

$3

Edit mode for excluding elements:

`tsx
import { useAixsterEdit } from '@aixyte/aixster';

function MyComponent() {
const { editMode, toggleEditMode, excludeElement } = useAixsterEdit();

return (

{editMode ? 'Exit Edit Mode' : 'Edit Exclusions'}

);
}
`

Features

- ✅ Zero-flash translations (rendered before browser paint)
- ✅ Automatic route change detection
- ✅ MutationObserver for dynamic content
- ✅ Customizable language switcher
- ✅ TypeScript support
- ✅ Works with React Router and Next.js
- ✅ Edit mode for managing exclusions
- ✅ Automatic translation miss detection
- ✅ Automatic multilingual sitemap generation (v4.2.2+)

Automatic Sitemap (v4.2.2+)

Your multilingual sitemap is automatically generated with zero configuration. Just install @aixyte/aixster and it works!

$3

`tsx
apiKey="aix_xxx"
defaultLocale="en"
locales={['en', 'de', 'fr', 'es']}
>



// ✅ That's it! Sitemap exists automatically at:
// https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/aix_xxx
`

$3

- ✅ Auto-discovery: Pages automatically added as visitors browse
- ✅ Multilingual: All language variants included
- ✅ SEO-optimized: Proper hreflang tags for all locales
- ✅ Always up-to-date: No manual regeneration needed
- ✅ Cached: 1-hour cache for performance
- ✅ Zero maintenance: Completely automatic

$3

1. Page tracking: AixsterProvider tracks every visited page
2. Link injection: tag automatically added to
3. XML generation: Edge function generates sitemap from discovered pages
4. Google discovers: Search engines find sitemap via link tag

$3

`tsx
apiKey="aix_xxx"
defaultLocale="en"
locales={['en', 'de', 'fr']}
sitemap={false} // Disable automatic sitemap
>


`

$3

#### Netlify

`toml


netlify.toml


[[redirects]]
from = "/sitemap.xml"
to = "https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY"
status = 200
`

#### Vercel

`json
{
"rewrites": [{
"source": "/sitemap.xml",
"destination": "https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY"
}]
}
`

#### Next.js

`tsx
// app/sitemap.xml/route.ts
export async function GET() {
const res = await fetch(
'https://mvbumiwzjytmxswfjgzn.supabase.co/functions/v1/generate-sitemap/YOUR_API_KEY'
);
return new Response(await res.text(), {
headers: { 'Content-Type': 'application/xml' }
});
}
`

How It Works

1. Wrap your app with `
2. Locale detection from URL path or query params
3. Translations loaded from Aixster API
4. DOM translated before React paints
5. MutationObserver catches dynamic content
6. Language switcher appears for easy switching

License

COMMERCIAL LICENSE - NOT OPEN SOURCE

Copyright (c) 2025 Mertens Advies. All rights reserved.

$3

✅ You MAY:
- Use Aixster 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 Aixster as your own product
- Redistribute source code or allow client modifications
- Build competing translation products
- Extract code for other purposes

$3

End clients receive usage rights through their agency/developer and may operate
applications containing Aixster, but may not modify, redistribute, or extract the software.

$3

This software is licensed under the Aixster Commercial License.
This is NOT open source software. All intellectual property rights remain the
exclusive property of Mertens Advies.

See LICENSE file for complete terms and conditions.