@intlayer/docs 9.0.0-canary.9 → 9.0.1

package/docs/de/live-sync.md

@@ -0,0 +1,174 @@
+---
+createdAt: 2026-07-08
+updatedAt: 2026-07-08
+title: Live-Synchronisation | CMS-Inhaltsänderungen zur Laufzeit übernehmen
+description: Lassen Sie Ihre Anwendung CMS-Inhaltsänderungen zur Laufzeit widerspiegeln — ohne Neuerstellung oder erneutes Deployment.
+keywords:
+  - Live-Synchronisation
+  - Live Sync
+  - CMS
+  - Visueller Editor
+  - Internationalisierung
+  - Dokumentation
+  - Intlayer
+  - Next.js
+  - Vite
+history:
+  - version: 9.0.0
+    date: 2026-07-08
+    changes: "Aus der Intlayer-CMS-Dokumentation in eine eigene Seite verschoben"
+  - version: 6.0.1
+    date: 2025-09-22
+    changes: "Live-Sync-Dokumentation hinzugefügt"
+  - version: 6.0.0
+    date: 2025-09-04
+    changes: "Ersetzte das Feld `hotReload` durch `liveSync`"
+author: aymericzip
+---
+
+# Live-Synchronisation
+
+Live Sync ermöglicht es Ihrer App, CMS-Inhaltsänderungen zur Laufzeit widerzuspiegeln. Kein Neuaufbau oder erneutes Bereitstellen erforderlich. Wenn aktiviert, werden Updates an einen Live-Sync-Server gestreamt, der die Wörterbücher aktualisiert, die Ihre Anwendung liest.
+
+## Inhaltsverzeichnis
+
+<TOC/>
+
+---
+
+## Live-Synchronisation aktivieren
+
+> Live Sync erfordert eine kontinuierliche Serververbindung und ist im Enterprise-Plan verfügbar.
+
+Aktivieren Sie Live Sync, indem Sie Ihre Intlayer-Konfiguration aktualisieren:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... andere Konfigurationseinstellungen
+  editor: {
+    /**
+     * Aktiviert das Hot-Reloading der Lokalisierungskonfigurationen, wenn Änderungen erkannt werden.
+     * Zum Beispiel, wenn ein Wörterbuch hinzugefügt oder aktualisiert wird, aktualisiert die Anwendung
+     * den auf der Seite angezeigten Inhalt.
+     *
+     * Da Hot-Reloading eine kontinuierliche Verbindung zum Server erfordert, ist es
+     * nur für Kunden des `enterprise`-Plans verfügbar.
+     *
+     * Standard: false
+     */
+    liveSync: true,
+  },
+  dictionary: {
+    /**
+     * Steuert, wie Wörterbücher importiert werden:
+     *
+     * - "live": Wörterbücher werden dynamisch über die Live Sync API abgerufen.
+     *   Ersetzt useIntlayer durch useDictionaryDynamic.
+     *
+     * Hinweis: Der Live-Modus verwendet die Live Sync API, um Wörterbücher abzurufen. Wenn der API-Aufruf
+     * fehlschlägt, werden die Wörterbücher dynamisch importiert.
+     * Hinweis: Nur Wörterbücher mit entfernten Inhalten und dem "live"-Flag verwenden den Live-Modus.
+     * Andere verwenden den dynamischen Modus für bessere Leistung.
+     */
+    importMode: "fetch",
+  },
+};
+
+export default config;
+```
+
+Starten Sie den Live Sync Server, um Ihre Anwendung einzubinden:
+
+Beispiel mit Next.js:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... andere Skripte
+    "build": "next build",
+    "dev": "next dev",
+    "start": "npx intlayer live --with 'next start'",
+  },
+}
+```
+
+Beispiel mit Vite:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... andere Skripte
+    "build": "vite build",
+    "dev": "vite dev",
+    "start": "npx intlayer live --with 'vite start'",
+  },
+}
+```
+
+Der Live Sync Server umschließt Ihre Anwendung und wendet automatisch aktualisierte Inhalte an, sobald diese eintreffen.
+
+Um Änderungsbenachrichtigungen vom CMS zu erhalten, hält der Live-Sync-Server eine SSE-Verbindung zum Backend aufrecht. Wenn sich Inhalte im CMS ändern, leitet das Backend die Aktualisierung an den Live-Sync-Server weiter, der die neuen Wörterbücher schreibt. Ihre Anwendung spiegelt die Aktualisierung bei der nächsten Navigation oder beim Neuladen des Browsers wider – ein Neubau ist nicht erforderlich.
+
+Flussdiagramm (CMS/Backend -> Live Sync Server -> Application Server -> Frontend):
+
+![Live Sync Logik Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_logic_schema.svg)
+
+So funktioniert es:
+
+![Live Sync Ablauf CMS/Backend/Live Sync Server/Application Server/Frontend Schema](https://github.com/aymericzip/intlayer/blob/main/docs/assets/live_sync_flow_scema.svg)
+
+## Entwicklungs-Workflow (lokal)
+
+- In der Entwicklung werden alle entfernten Wörterbücher beim Start der Anwendung abgerufen, sodass Sie Updates schnell testen können.
+- Um Live Sync lokal mit Next.js zu testen, umschließen Sie Ihren Dev-Server:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    // ... andere Skripte
+    "dev": "npx intlayer live --with 'next dev'",
+    // "dev": "npx intlayer live --with 'vite dev'", // Für Vite
+  },
+}
+```
+
+Aktivieren Sie die Optimierung, damit Intlayer während der Entwicklung die Live-Import-Transformationen anwendet:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  editor: {
+    applicationURL: "http://localhost:5173",
+    liveSyncURL: "http://localhost:4000",
+    liveSync: true,
+  },
+  dictionary: {
+    importMode: "fetch",
+  },
+  build: {
+    optimize: true,
+  },
+};
+
+export default config;
+```
+
+Diese Konfiguration umschließt Ihren Dev-Server mit dem Live Sync Server, lädt entfernte Wörterbücher beim Start und streamt Updates vom CMS über SSE. Aktualisieren Sie die Seite, um Änderungen zu sehen.
+
+## Hinweise und Einschränkungen
+
+- Fügen Sie die Live-Sync-Quelle zu Ihrer Sicherheitsrichtlinie der Website (CSP) hinzu. Stellen Sie sicher, dass die Live-Sync-URL in `connect-src` (und `frame-ancestors`, falls relevant) erlaubt ist.
+- Live Sync funktioniert nicht mit statischer Ausgabe. Für Next.js muss die Seite dynamisch sein, um zur Laufzeit Updates zu erhalten (z. B. verwenden Sie `generateStaticParams`, `generateMetadata`, `getServerSideProps` oder `getStaticProps` entsprechend, um vollständige statische Einschränkungen zu vermeiden).
+- Im CMS hat jedes Wörterbuch ein `live`-Flag. Nur Wörterbücher mit `live=true` werden über die Live-Sync-API abgerufen; andere werden dynamisch importiert und bleiben zur Laufzeit unverändert.
+- Das `live`-Flag wird für jedes Wörterbuch zur Build-Zeit ausgewertet. Wenn der entfernte Inhalt während des Builds nicht mit `live=true` gekennzeichnet war, müssen Sie neu bauen, um Live Sync für dieses Wörterbuch zu aktivieren.
+- Der Live-Sync-Server muss in der Lage sein, in `.intlayer` zu schreiben. In Containern stellen Sie sicher, dass Schreibzugriff auf `/.intlayer` besteht.
+
+## Nützliche Links
+
+- [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md)
+- [Intlayer Visueller Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md)
+- [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
+- [Self-Hosting-Leitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/self_hosting.md)

package/docs/de/migration_from_i18next_to_intlayer.md

@@ -99,19 +99,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und den Kompatibilitätsadapter:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/docs/de/migration_from_next-i18next_to_intlayer.md

@@ -102,19 +102,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und die Kompatibilitätsadapter:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/docs/de/migration_from_next-intl_to_intlayer.md

@@ -98,19 +98,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und den Kompatibilitätsadapter `@intlayer/next-intl`:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.
@@ -184,9 +184,7 @@ import { createNextIntlPlugin } from "@intlayer/next-intl/plugin";
 
 const withIntlayer = createNextIntlPlugin();
 
-const nextConfig: NextConfig = {
-  /* Ihre bestehenden Konfigurationsoptionen */
-};
+const nextConfig: NextConfig = {/* Ihre bestehenden Konfigurationsoptionen */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/de/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -101,19 +101,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und den Kompatibilitätsadapter:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/docs/de/migration_from_react-i18next_to_intlayer.md

@@ -101,19 +101,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und die Kompatibilitätsadapter:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.
@@ -209,9 +209,7 @@ import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
 
 const withIntlayer = createNextI18nPlugin();
 
-const nextConfig: NextConfig = {
-  /* Ihre Optionen */
-};
+const nextConfig: NextConfig = {/* Ihre Optionen */};
 
 export default withIntlayer(nextConfig);
 ```

package/docs/de/migration_from_vue-i18n_to_intlayer.md

@@ -100,19 +100,19 @@ Die folgenden Schritte sind das Minimum, das erforderlich ist, um Ihre bestehend
 Installieren Sie die Intlayer-Kernpakete und den Kompatibilitätsadapter:
 
 ```bash packageManager="npm"
-npx intlayer-cli init --interactive
+npx intlayer init --interactive
 ```
 
 ```bash packageManager="pnpm"
-pnpm dlx intlayer-cli init --interactive
+pnpm dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="yarn"
-yarn dlx intlayer-cli init --interactive
+yarn dlx intlayer@canary init --interactive
 ```
 
 ```bash packageManager="bun"
-bunx intlayer-cli init --interactive
+bunx intlayer@canary init --interactive
 ```
 
 > Das Flag `--interactive` ist optional. Verwenden Sie `intlayer-cli init`, wenn Sie ein KI-Agent sind.

package/docs/de/releases/v9.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-06-14
-updatedAt: 2026-06-26
+updatedAt: 2026-07-08
 title: Neues Intlayer v9 – Was ist neu?
 description: Entdecken Sie die Neuerungen in Intlayer v9. Einführung von Drop-in-Kompatibilitätspaketen für beliebte i18n-Bibliotheken und Unterstützung für Collections und Variants.
 keywords:
@@ -9,9 +9,13 @@ keywords:
   - Migration
   - Collections
   - Variants
+  - CMS SDK
+  - Self-Hosting
+  - Docker
   - i18next
   - next-intl
   - vue-i18n
+youtubeVideo: https://www.youtube.com/watch?v=zmCN4z_B4jk
 slugs:
   - doc
   - releases
@@ -23,6 +27,14 @@ author: aymericzip
 
 Willkommen bei Intlayer v9! Dieses Major Release markiert einen riesigen Meilenstein bei der Vereinfachung des Migrationspfads zu Intlayer mit **Compat Adapter Packages** für wichtige i18n-Bibliotheken (`react-i18next`, `next-intl`, `vue-i18n`, etc.) und fügt Unterstützung für reichhaltige Inhaltsstrukturen hinzu: **Collections** und **Variants**.
 
+<iframe
+  src="https://www.youtube.com/embed/zmCN4z_B4jk"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Video - New Intlayer v9 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Inhaltsverzeichnis
 
 <TOC levels={[2]} maxDepth={1} />
@@ -109,36 +121,40 @@ Intlayer v9 geht über statische Schlüssel-Wert-Objekte hinaus und ermöglicht
 
 Definieren Sie eine CMS-verwaltete Liste geordneter Elemente (z.B. FAQs, Produkte oder Bloglisten):
 
-```ts fileName="faq.content.ts"
+```ts fileName="faq.1.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 export default {
   key: "faq",
-  content: [
-    {
-      question: t({
-        de: "Was ist Intlayer?",
-        en: "What is Intlayer?",
-        fr: "Qu'est-ce qu'Intlayer ?",
-      }),
-      answer: t({
-        de: "Ein i18n-Toolkit.",
-        en: "An i18n toolkit.",
-        fr: "Une boîte à outils i18n.",
-      }),
-    },
-  ],
+  item: 1,
+  content: {
+    question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
+    answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
+  },
+} satisfies Dictionary;
+```
+
+```ts fileName="faq.2.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  item: 2,
+  content: {
+    question: t({ en: "Is it free?", fr: "Est-ce gratuit ?" }),
+    answer: t({ en: "Yes, open-source.", fr: "Oui, open-source." }),
+  },
 } satisfies Dictionary;
 ```
 
 #### Verwendung:
 
 ```ts
-// Alle Elemente abrufen
+// Fetch all items as an array
 const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
 
-// Einzelnes Element nach Index abrufen
-const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+// Fetch a single item by index
+const faq = useIntlayer("faq", { item: 2 }); // -> { question: string, answer: string }
 ```
 
 ### 2. Variants
@@ -192,28 +208,52 @@ export default {
 ```ts
 // Ruft nur das angeforderte Element dynamisch ab (erfordert Suspense)
 const product = useIntlayer("product-copy", {
-  id: "prod_123",
-  category: "books",
+  variant: { id: "prod_123", category: "books" },
 });
 ```
 
 ---
 
-## Dynamisches Laden & Optimierungen der Bundle-Größe
-
-Um Bundles extrem klein zu halten, unterstützt Intlayer v9 dynamisches Lazy Loading.
-
-Stellen Sie in Ihrer Konfiguration `importMode` auf `'dynamic'` oder `'fetch'` ein:
-
-```ts fileName="intlayer.config.ts"
-export default {
-  dictionary: {
-    importMode: "dynamic", // "static" | "dynamic" | "fetch"
-  },
+## `@intlayer/analytics`: Content-Exposure-Tracking & A/B-Tests
+
+Ein neues optionales Paket, [`@intlayer/analytics`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md), zeigt Ihnen, welche Inhalte Ihren Besuchern tatsächlich angezeigt werden — und schließt damit den Kreis zu **Collections & Variants**, indem es Ihnen ermöglicht, Inhalte per A/B-Test zu testen und Conversions pro Variante zu messen.
+
+- **Tracking auf Provider-Ebene**: `IntlayerProvider` (React / Next.js / React Native) erfasst automatisch `page_view`-Ereignisse beim Laden, bei Routenwechseln und bei Sprachwechseln.
+- **Tracking auf Knotenebene**: Jede Auflösung von `useIntlayer` meldet ein `content_exposure`-Ereignis — welcher Dictionary-Schlüssel, Key-Path, welche Sprache und (falls zutreffend) welche A/B-**Variante** angezeigt wurde. Wiederholte Anzeigen desselben Knotens innerhalb eines Flush-Fensters werden zu einem Ereignis zusammengefasst.
+- **Deterministische A/B-Zuweisung**: `getVariant(experimentKey, variants)` weist jeder Sitzung eine Variante zu — **ohne Server-Roundtrip**, sodass kein Flackern vor dem ersten Rendering auftritt.
+- **`useConversion()`**: ordnet ein Ziel (Registrierung, Klick, Kauf …) der Variante zu, der die Sitzung ausgesetzt war.
+- **Keine Kosten, wenn nicht installiert**: gleiches tree-shakeable Muster wie bei `@intlayer/editor` — dynamischer, in `try/catch` gekapselter `import()`, plus eine Build-Zeit-Umgebungsvariable (`INTLAYER_ANALYTICS_ENABLED`), die die gesamte Integration für Apps, die sie nicht nutzen, per Dead-Code-Elimination entfernt.
+- **Kein neues Konfigurationsschema**: verwendet weiterhin `editor.backendURL` (Ingestion-Endpunkt / Self-Hosting) und `editor.clientId` (Projektschlüssel, zugleich Aktivierungsschalter).
+- **Datenschutzfreundlich**: anonymes Session-Hashing (SHA-256, keine Rohkennungen gespeichert), keine IP-Speicherung, nur grobe länderbasierte Geolokalisierung, gebündelte Anfragen etwa alle 20 Sekunden.
+- **Dashboard**: Eine neue **Analytics**-Seite (in der Seitenleiste sichtbar, sobald ein Projekt ausgewählt ist) zeigt aktive Nutzer, Nutzer heute, Nutzer der letzten 7/30/90 Tage, einen Besucherentwicklungsgraphen sowie Aufschlüsselungen nach Sprache und Standort.
+
+```tsx fileName="CTAButton.tsx" codeFormat="tsx"
+import { useConversion } from "react-intlayer";
+
+const CTAButton = () => {
+  const trackConversion = useConversion();
+
+  return (
+    <button
+      onClick={() =>
+        trackConversion({
+          experimentKey: "homepage-hero",
+          variant: "black_friday",
+          goal: "cta_click",
+        })
+      }
+    >
+      Get started
+    </button>
+  );
 };
 ```
 
-Zur Build-Zeit scannen `@intlayer/swc` und `@intlayer/babel` Ihre Dateien und ersetzen `useIntlayer` / `getIntlayer`-Aufrufe durch tree-shakeable Wrapper (`useDictionary` / `useDictionaryDynamic`). Nur der für das ausgewählte Collection-Element, die Variante oder das Locale erforderliche Inhalt wird geladen, wodurch verhindert wird, dass Ihr Produktions-Bundle ungenutzte Übersetzungen enthält.
+```bash packageManager="npm"
+npm install @intlayer/analytics
+```
+
+Bereits heute verfügbar für React, Next.js und React Native (über `react-intlayer`); weitere Framework-Anbindungen (Vue, Svelte, Angular, …) sind geplant und folgen demselben Rollout-Muster wie `@intlayer/editor`. Die vollständige Anleitung finden Sie in der [Analytics-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md).
 
 ---
 
@@ -296,13 +336,68 @@ npm install intlayer react-native-intlayer
 
 ---
 
+## CMS SDK: Intlayer als Headless-Content-Datenbank nutzen
+
+Intlayer v9 enthält ein sauberes, sich selbst authentifizierendes SDK in `@intlayer/api`, um programmgesteuert mit dem CMS zu interagieren – Projekte abrufen, Dictionaries abrufen sowie diese von Ihrem eigenen Server, Skripten oder CI aus pushen oder aktualisieren. Die Authentifizierung (OAuth2 `client_credentials`) wird für Sie übernommen und erneuert.
+
+Das SDK ist in **zwei getrennte Importe** aufgeteilt, sodass Ihr Bundle nur die Domänen enthält, die Sie tatsächlich verwenden:
+
+1. `createIntlayerCMS` – ein leichtgewichtiger **Authentifikator**, der die Anmeldedaten und das verwaltete Token hält (kein Domänen-Client gebündelt).
+2. `dictionaryEndpoint`, `projectEndpoint`, … – **Endpoint-Binder** pro Domäne, jeweils aus ihrem eigenen Unterpfad importiert.
+
+```ts fileName="cms.ts"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+// Konfiguration ist optional: Anmeldedaten fallen auf INTLAYER_CLIENT_ID /
+// INTLAYER_CLIENT_SECRET zurück, aufgelöst durch `@intlayer/config/built`.
+const cms = createIntlayerCMS();
+
+// Lesen
+const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
+
+// Schreiben – nutze das CMS wie eine Datenbank
+await dictionaryEndpoint(cms).pushDictionaries([myDictionary]);
+```
+
+> Sicherheit: Die CMS-Anmeldedaten gewähren Schreibzugriff auf Ihre Inhalte. Erstellen Sie den Authentifikator immer nur **serverseitig** – senden Sie `clientId` / `clientSecret` niemals an den Browser.
+
+---
+
+## Self-Hosting
+
+Intlayer v9 bietet erstklassige Unterstützung für den Betrieb Ihrer eigenen Intlayer-Instanz mit einem einzigen Befehl – kein Intlayer Cloud-Konto erforderlich.
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Das Installationsprogramm lädt eine `docker-compose.yml` und eine `.env` herunter, generiert automatisch die erforderlichen Secrets und führt `docker compose up -d` aus. Alles – das Dashboard, die API, die Datenbank, der Objektspeicher und die transaktionale E-Mail – läuft lokal in Containern.
+
+### Enthaltene Dienste
+
+| Dienst                                  | Zweck                                                                 |
+| --------------------------------------- | --------------------------------------------------------------------- |
+| **app** (TanStack Start)                | Dashboard-Oberfläche auf Port `3000`                                  |
+| **backend** (Fastify/Bun)               | REST API auf Port `3100`                                              |
+| **MongoDB 7** (single-node replica set) | Primäre Datenbank                                                     |
+| **Redis 7**                             | Job-Warteschlangen und Caching                                        |
+| **MinIO**                               | S3-kompatibler Objektspeicher (Avatare, Screenshots)                  |
+| **Mailpit**                             | Lokale SMTP-Senke + Web-UI für transaktionale E-Mails auf Port `8025` |
+
+Chromium (für die Puppeteer-Screenshot-Generierung verwendet) ist im Backend-Image gebündelt – kein zusätzlicher Container erforderlich.
+
+---
+
 ## Migrationshinweise von v8
 
 Wenn Sie von v8 upgraden, beachten Sie, dass v9 keine Breaking Changes enthält. Hier sind jedoch die wichtigsten Änderungen:
 
 - **Compiler standardmäßig deaktiviert**: `compiler.enabled` ist jetzt standardmäßig `false`. Wenn Sie auf die Extraktion Ihrer `.content.ts`-Dateien zur Build-Zeit angewiesen sind, setzen Sie `compiler.enabled: true` in Ihrer `intlayer.config.ts`.
+- **Vite-Plugin**: Der Compiler und der Locale-Routing-Proxy sind nun in `intlayer()` gebündelt. Falls Sie zuvor `intlayerCompiler()` oder `intlayerProxy()` manuell registriert haben, können Sie diese entfernen – sie werden automatisch dedupliziert, sodass das Beibehalten harmlos ist. Verwenden Sie `routing.enableProxy: false`, um den Proxy zu deaktivieren.
 - **Locales & Dialects**: Wenn Sie externe i18n-Abhängigkeiten verwenden, fügen Sie deren entsprechende Kompatibilitätsadapter-Plugins in Ihrer Konfiguration oder Ihrem Bundler-Setup hinzu, um Imports automatisch umzuschreiben.
 - **Custom Selectors**: Beim Aufruf von `useIntlayer` ist der zweite Parameter nun für ein Options-Objekt reserviert, das `{ locale, item, variant }` enthält. Wenn Sie zuvor direkt einen Locale-String übergeben haben, können Sie dies weiterhin tun, aber die Verwendung des Options-Objekts wird für erweiterte Auswahlen empfohlen.
+- **React Native**: `react-native-intlayer` re-exportiert nun die gesamte `react-intlayer` API. Importieren Sie in einer React Native App alles aus `react-native-intlayer` und entfernen Sie die direkte `react-intlayer`-Abhängigkeit. Bestehende `react-intlayer`-Imports funktionieren weiterhin.
 
 ---
 
@@ -310,4 +405,7 @@ Wenn Sie von v8 upgraden, beachten Sie, dass v9 keine Breaking Changes enthält.
 
 - [Leitfaden für Compat Adapter Packages](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/compat/index.md)
 - [Dynamische Dictionaries – Collections & Variants](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dynamic_dictionaries/index.md)
+- [Analytics - Content-Exposure-Tracking & A/B-Tests](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/analytics.md)
 - [Konfigurationsreferenz](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md)
+- [CMS SDK – Programmatischer Zugriff mit @intlayer/api](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md)
+- [Self-Hosting-Leitfaden](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/self_hosting.md)