@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/cs/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-17
 title: Konfigurace (Configuration)
 description: Naučte se, jak nakonfigurovat Intlayer pro vaši aplikaci. Porozumějte různým nastavením a možnostem dostupným pro přizpůsobení Intlayer vašim potřebám.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Přidání možnosti `format` do konfigurace slovníku"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Přidána podpora pro poskytovatele LM Studio"
@@ -135,6 +138,7 @@ Intlayer přijímá formáty konfiguračních souborů JSON, JS, MJS a TS:
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -582,10 +586,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Konfigurace slovníku.
+   */
+  dictionary: {
+    /**
+     * Řídí, jak se slovníky importují.
+     * - "static": Staticky importováno v době sestavení.
+     * - "dynamic": Dynamicky importováno pomocí Suspense.
+     * - "fetch": Dynamicky načteno přes API pro živou synchronizaci.
+     */
+    importMode: "static",
+
+    /**
+     * Výchozí formát zpráv pro všechny slovníky v projektu.
+     * - 'intlayer': Nativní formát intlayer (výchozí).
+     * - 'icu': Formát zpráv ICU.
+     * - 'i18next': Formát i18next.
+     * - 'vue-i18n': Formát Vue I18n.
+     * - 'po': Formát GNU Gettext PO.
+     */
+    format: "icu",
+  },
+
   /**
    * Konfigurace pluginů.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -862,6 +894,7 @@ Parametry ovládající operace se slovníky, včetně chování automatického
 | `contentAutoTransformation` | Automaticky transformuje řetězce obsahu do typovaných uzlů (markdown, HTML nebo vložení).                                                                 | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`       | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')`.<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')`.<br/>• Vložení : `Hello {{name}}` → `insert('Hello {{name}}')`.                                                                                                                                                                                                                 |
 | `location`                  | Udává, kde jsou uloženy soubory slovníků a jak jsou synchronizovány s CMS.                                                                                | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`     | `'hybrid'`                                                                                  | • `'local'`: správa pouze lokálně.<br/>• `'remote'`: správa pouze vzdáleně (CMS).<br/>• `'hybrid'`: správa lokálně i vzdáleně.<br/>• `'plugin'` nebo vlastní řetězec: správa pluginem nebo vlastním zdrojem.                                                                                                                                                                               |
 | `importMode`                | Ovládá způsob importu slovníků.                                                                                                                           | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`    | `'dynamic'`                                                                                 | • `'static'`: statický import.<br/>• `'dynamic'`: dynamický import přes Suspense.<br/>• `'fetch'`: načtení přes Live Sync API; odklad na `'dynamic'` při neúspěchu.<br/>• Vyžaduje pluginy `@intlayer/babel` a `@intlayer/swc`.<br/>• Klíče musí být deklarovány staticky.<br/>• Ignorováno, pokud je `optimize` vypnuto.<br/>• Neovlivňuje `getIntlayer`, `getDictionary` atd.            |
+| `format`                    | Výchozí formát zpráv pro všechny slovníky v projektu.                                                                                                     | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'`  | `'icu'`                                                                                     | • `'intlayer'`: Nativní formát intlayer.<br/>• `'icu'`: Formát zpráv ICU.<br/>• `'i18next'`: Formát i18next.<br/>• `'vue-i18n'`: Formát Vue I18n.<br/>• `'po'`: Formát GNU Gettext PO.                                                                                                                                                                                                     |
 | `priority`                  | Priorita slovníku. Vyšší hodnoty vítězí nad nižšími při řešení konfliktů mezi slovníky.                                                                   | `number`                                                                                                        | `undefined`   | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                            |
 | `live`                      | Zastaralé - použijte `importMode: 'fetch'`. Udávalo, zda se má obsah slovníku načítat dynamicky přes Live Sync API.                                       | `boolean`                                                                                                       | `undefined`   |                                                                                             | Přejmenováno na `importMode: 'fetch'` ve v8.0.0.                                                                                                                                                                                                                                                                                                                                           |
 | `schema`                    | Generováno automaticky Intlayerem pro validaci JSON schématu.                                                                                             | `'https://intlayer.org/schema.json'`                                                                            | auto-generace |                                                                                             | Neupravujte ručně.                                                                                                                                                                                                                                                                                                                                                                         |

package/docs/de/cli/doc-review.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-11-22
+updatedAt: 2026-06-17
 title: Dokument überprüfen
 description: Erfahren Sie, wie Sie Dokumentationsdateien auf Qualität, Konsistenz und Vollständigkeit in verschiedenen Sprachversionen überprüfen.
 keywords:
@@ -15,6 +15,10 @@ slugs:
   - concept
   - cli
   - doc-review
+history:
+  - version: 9.0.0
+    date: 2026-06-17
+    changes: "Option --log hinzufügen"
 author: aymericzip
 ---
 
@@ -55,8 +59,110 @@ Für die meisten Anwendungsfälle,
 
 ## Argumente:
 
-Der Befehl `doc review` akzeptiert dieselben Argumente wie `doc translate`, sodass Sie bestimmte Dokumentationsdateien überprüfen und Qualitätsprüfungen anwenden können.
+**Optionen für die Dateiliste:**
 
-Wenn Sie eine der Git-Optionen aktiviert haben, überprüft der Befehl nur die Teile der Dateien, die geändert werden. Das Skript verarbeitet die Datei in Abschnitten (Chunks) und überprüft jeden Abschnitt. Wenn in einem Abschnitt keine Änderungen vorhanden sind, überspringt das Skript diesen, um den Überprüfungsprozess zu beschleunigen und die Kosten für die AI-Provider-API zu begrenzen.
+- **`--doc-pattern [docPattern...]`**: Glob-Muster, um Dokumentationsdateien zur Überprüfung auszuwählen.
 
-Für eine vollständige Liste der Argumente siehe die [Dokumentation zum Befehl „Translate Document“](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/doc-translate.md).
+  > Beispiel: `npx intlayer doc review --doc-pattern "docs/**/*.md" "src/**/*.mdx"`
+
+- **`--excluded-glob-pattern [excludedGlobPattern...]`**: Glob-Muster, die von der Überprüfung ausgeschlossen werden sollen.
+
+  > Beispiel: `npx intlayer doc review --excluded-glob-pattern "docs/internal/**"`
+
+- **`--skip-if-modified-before [skipIfModifiedBefore]`**: Überspringe die Datei, wenn sie vor dem angegebenen Zeitpunkt geändert wurde.
+  - Kann eine absolute Zeit wie "2025-12-05" sein (String oder Date)
+  - Kann eine relative Zeit in ms sein `1 * 60 * 60 * 1000` (1 Stunde)
+  - Diese Option prüft die Aktualisierungszeit der Datei mit der Methode `fs.stat`. Daher kann sie durch Git oder andere Tools, die die Datei ändern, beeinflusst werden.
+
+  > Beispiel: `npx intlayer doc review --skip-if-modified-before "2025-12-05"`
+
+- **`--skip-if-modified-after [skipIfModifiedAfter]`**: Überspringe die Datei, wenn sie innerhalb des angegebenen Zeitraums geändert wurde.
+  - Kann eine absolute Zeit wie "2025-12-05" sein (String oder Date)
+  - Kann eine relative Zeit in ms sein `1 * 60 * 60 * 1000` (1 Stunde)
+  - Diese Option prüft die Aktualisierungszeit der Datei mit der Methode `fs.stat`. Daher kann sie durch Git oder andere Tools, die die Datei ändern, beeinflusst werden.
+
+  > Beispiel: `npx intlayer doc review --skip-if-modified-after "2025-12-05"`
+
+- **`--skip-if-exists`**: Überspringe die Datei, wenn sie bereits existiert.
+
+  > Beispiel: `npx intlayer doc review --skip-if-exists`
+
+**Überprüfungsmodus-Optionen:**
+
+- **`--log`**: Nur-Protokollierungsmodus. Nicht mit KI übersetzen; stattdessen die Blöcke, die Aufmerksamkeit erfordern (mit Zeilennummern und Inhalt), für die Basis- und Ziel-Locales protokollieren, um einem anderen Agenten bei der Generierung der Übersetzungen zu helfen.
+
+  > Beispiel: `npx intlayer doc review --log`
+
+**Optionen für die Ausgabe der Einträge:**
+
+- **`--locales [locales...]`**: Ziel-Lokalisierungen, für die die Dokumentation überprüft werden soll.
+
+  > Beispiel: `npx intlayer doc review --locales fr es de`
+
+- **`--base-locale [baseLocale]`**: Quell-Lokalisierung (Basisdokument), mit der verglichen werden soll.
+
+  > Beispiel: `npx intlayer doc review --base-locale en`
+
+**Optionen zur Dateiverarbeitung:**
+
+- **`--nb-simultaneous-file-processed [nbSimultaneousFileProcessed]`**: Anzahl der Dateien, die gleichzeitig für die Überprüfung verarbeitet werden.
+
+  > Beispiel: `npx intlayer doc review --nb-simultaneous-file-processed 5`
+
+**KI-Optionen:**
+
+- **`--model [model]`**: Das für die Überprüfung zu verwendende KI-Modell (z. B. `gpt-3.5-turbo`).
+- **`--provider [provider]`**: Der für die Überprüfung zu verwendende KI-Anbieter.
+- **`--temperature [temperature]`**: Temperatureinstellung für das KI-Modell.
+- **`--api-key [apiKey]`**: Eigener API-Schlüssel für den KI-Dienst.
+- **`--application-context [applicationContext]`**: Zusätzlicher Kontext für die KI-Überprüfung.
+- **`--data-serialization [dataSerialization]`**: Das Datenserialisierungsformat für die KI-Funktionen von Intlayer. Optionen: `json` (Standard, zuverlässig), `toon` (weniger Token, weniger konsistent).
+- **`--custom-prompt [prompt]`**: Passen Sie den Basis-Prompt an, der für die Überprüfung verwendet wird. (Hinweis: Für die meisten Anwendungsfälle wird stattdessen die Option `--custom-instructions` empfohlen, da sie eine bessere Kontrolle bietet.)
+
+  > Beispiel: `npx intlayer doc review --model deepseek-chat --provider deepseek --temperature 0.5 --api-key sk-1234567890 --application-context "Meine Anwendung ist ein Katzenladen"`
+
+**Optionen für Umgebungsvariablen:**
+
+- **`--env`**: Geben Sie die Umgebung an (z. B. `development`, `production`).
+- **`--env-file [envFile]`**: Geben Sie eine benutzerdefinierte Umgebungsdatei an, aus der Variablen geladen werden.
+- **`--base-dir`**: Geben Sie das Basisverzeichnis für das Projekt an.
+- **`--no-cache`**: Deaktivieren Sie den Cache.
+
+  > Beispiel: `npx intlayer doc review --base-dir ./docs --env-file .env.production.local`
+
+**Protokollierungsoptionen:**
+
+- **`--verbose`**: Aktiviert ausführliche Protokollierung zur Fehlerbehebung. (Standardmäßig über CLI auf true gesetzt)
+
+  > Beispiel: `npx intlayer doc review --verbose`
+
+**Optionen für benutzerdefinierte Anweisungen:**
+
+- **`--custom-instructions [customInstructions]`**: Benutzerdefinierte Anweisungen, die dem Prompt hinzugefügt werden. Nützlich, um spezifische Regeln bezüglich Formatierung, URL-Übersetzung usw. anzuwenden.
+
+  > Beispiel: `npx intlayer doc review --custom-instructions "URLs nicht übersetzen und das Markdown-Format beibehalten"`
+
+  > Beispiel: `npx intlayer doc review --custom-instructions "$(cat ./instructions.md)"`
+
+**Git-Optionen:**
+
+- **`--git-diff`**: Nur auf Dateien anwenden, die Änderungen vom Basis-Branch (Standard `origin/main`) zum aktuellen Branch (Standard: `HEAD`) enthalten.
+- **`--git-diff-base`**: Basis-Referenz für den Git-Diff angeben (Standard `origin/main`).
+- **`--git-diff-current`**: Aktuelle Referenz für den Git-Diff angeben (Standard: `HEAD`).
+- **`--uncommitted`**: Uncommittete Änderungen einbeziehen.
+- **`--unpushed`**: Nicht gepushte Änderungen einbeziehen.
+- **`--untracked`**: Nicht verfolgte Dateien einbeziehen.
+
+  > Beispiel: `npx intlayer doc review --git-diff --git-diff-base origin/main --git-diff-current HEAD`
+
+  > Beispiel: `npx intlayer doc review --uncommitted --unpushed --untracked`
+
+> Beachten Sie, dass der Ausgabepfad der Datei durch Ersetzen der folgenden Muster bestimmt wird:
+>
+> - `/{{baseLocale}}/` durch `/{{locale}}/` (Unix)
+> - `\{{baseLocale}}\` durch `\{{locale}}\` (Windows)
+> - `_{{baseLocale}}.` durch `_{{locale}}.`
+> - `{{baseLocale}}_` durch `{{locale}}_`
+> - `.{{baseLocaleName}}.` durch `.{{localeName}}.`
+>
+> Wenn das Muster nicht gefunden wird, wird die Ausgabedatei die Endung `.{{locale}}` erhalten. `./my/file.md` wird überprüft und für die französische Locale zu `./my/file.fr.md` aktualisiert.

package/docs/de/cli/index.md

@@ -17,7 +17,7 @@ slugs:
   - concept
   - cli
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Befehl scan hinzugefügt"
   - version: 8.6.4

package/docs/de/cli/scan.md

@@ -18,7 +18,7 @@ slugs:
   - cli
   - scan
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-11
     changes: "Befehl scan hinzugefügt"
 author: aymericzip

package/docs/de/configuration.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-13
-updatedAt: 2026-05-12
+updatedAt: 2026-06-17
 title: Konfiguration (Configuration)
 description: Erfahren Sie, wie Sie Intlayer für Ihre Anwendung konfigurieren. Verstehen Sie die verschiedenen Einstellungen und Optionen, um Intlayer an Ihre Bedürfnisse anzupassen.
 keywords:
@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.10.0
+    date: 2026-06-17
+    changes: "Option `format` zur Wörterbuchkonfiguration hinzugefügt"
   - version: 8.9.4
     date: 2026-05-12
     changes: "Unterstützung für LM Studio-Anbieter hinzugefügt"
@@ -135,6 +138,7 @@ Intlayer akzeptiert die Konfigurationsdateiformate JSON, JS, MJS und TS:
 ````typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
 import { nextjsRewrite } from "intlayer/routing";
+import { syncJSON } from "@intlayer/sync-json-plugin";
 import { z } from "zod";
 
 /**
@@ -585,10 +589,38 @@ const config: IntlayerConfig = {
     }),
   },
 
+  /**
+   * Wörterbuchkonfiguration.
+   */
+  dictionary: {
+    /**
+     * Steuert, wie Wörterbücher importiert werden.
+     * - "static": Statisch zur Build-Zeit importiert.
+     * - "dynamic": Dynamisch über Suspense importiert.
+     * - "fetch": Dynamisch über die Live-Sync-API abgerufen.
+     */
+    importMode: "static",
+
+    /**
+     * Das Standard-Nachrichtenformat für alle Wörterbücher im Projekt.
+     * - 'intlayer': Natives intlayer-Format (Standard).
+     * - 'icu': ICU-Nachrichtenformat.
+     * - 'i18next': i18next-Format.
+     * - 'vue-i18n': Vue I18n-Format.
+     * - 'po': GNU Gettext PO-Format.
+     */
+    format: "icu",
+  },
+
   /**
    * Plugin-Konfiguration.
    */
-  plugins: [],
+  plugins: [
+    syncJSON({
+      format: "icu",
+      source: ({ locale }) => `./messages/${locale}.json`,
+    }),
+  ],
 };
 
 export default config;
@@ -865,6 +897,7 @@ Einstellungen, die Wörterbuchoperationen steuern, einschließlich automatischem
 | `contentAutoTransformation` | Transformiert Inhaltsstrings automatisch in typisierte Knoten (Markdown, HTML oder Insertion).                                                                                         | `boolean` &#124; <br/> `{ markdown?: boolean; html?: boolean; insertion?: boolean }`                            | `false`               | `true`                                                                                      | • Markdown : `### Title` → `md('### Title')`.<br/>• HTML : `<div>Title</div>` → `html('<div>Title</div>')`.<br/>• Insertion : `Hallo {{name}}` → `insert('Hallo {{name}}')`.                                                                                                                                                                                                                                                    |
 | `location`                  | Gibt an, wo Wörterbuchdateien gespeichert werden und wie sie mit dem CMS synchronisiert werden.                                                                                        | `'local'` &#124; <br/> `'remote'` &#124; <br/> `'hybrid'` &#124; <br/> `'plugin'` &#124; <br/> `string`         | `'local'`             | `'hybrid'`                                                                                  | • `'local'`: Nur lokal verwaltet.<br/>• `'remote'`: Nur remote verwaltet (CMS).<br/>• `'hybrid'`: Sowohl lokal als auch remote verwaltet.<br/>• `'plugin'` oder benutzerdefinierter String: Von einem Plugin oder einer benutzerdefinierten Quelle verwaltet.                                                                                                                                                                   |
 | `importMode`                | Steuert, wie Wörterbücher importiert werden.                                                                                                                                           | `'static'` &#124; <br/> `'dynamic'` &#124; <br/> `'fetch'`                                                      | `'static'`            | `'dynamic'`                                                                                 | • `'static'`: Statisch importiert.<br/>• `'dynamic'`: Dynamisch mittels Suspense importiert.<br/>• `'fetch'`: Über Live Sync API abgerufen; Fallback auf `'dynamic'`, falls fehlgeschlagen.<br/>• Erfordert `@intlayer/babel` und `@intlayer/swc` Plugins.<br/>• Schlüssel müssen statisch deklariert sein.<br/>• Wird ignoriert, wenn `optimize` deaktiviert ist.<br/>• Beeinflusst nicht `getIntlayer`, `getDictionary`, etc. |
+| `format`                    | Das Standard-Nachrichtenformat für alle Wörterbücher im Projekt.                                                                                                                       | `'intlayer'` &#124; <br/> `'icu'` &#124; <br/> `'i18next'` &#124; <br/> `'vue-i18n'` &#124; <br/> `'po'`        | `'intlayer'`          | `'icu'`                                                                                     | • `'intlayer'`: Natives intlayer-Format.<br/>• `'icu'`: ICU-Nachrichtenformat.<br/>• `'i18next'`: i18next-Format.<br/>• `'vue-i18n'`: Vue I18n-Format.<br/>• `'po'`: GNU Gettext PO-Format.                                                                                                                                                                                                                                     |
 | `priority`                  | Priorität des Wörterbuchs. Höhere Werte gewinnen beim Lösen von Konflikten zwischen Wörterbüchern.                                                                                     | `number`                                                                                                        | `undefined`           | `1`                                                                                         |                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | `live`                      | Veraltet - stattdessen `importMode: 'fetch'` verwenden. Gibt an, ob Wörterbuchinhalte dynamisch über die Live Sync API abgerufen werden sollen.                                        | `boolean`                                                                                                       | `undefined`           |                                                                                             | In v8.0.0 in `importMode: 'fetch'` umbenannt.                                                                                                                                                                                                                                                                                                                                                                                   |
 | `schema`                    | Wird automatisch von Intlayer für die JSON-Schema-Validierung generiert.                                                                                                               | `'https://intlayer.org/schema.json'`                                                                            | automatisch generiert |                                                                                             | Nicht manuell bearbeiten.                                                                                                                                                                                                                                                                                                                                                                                                       |

package/docs/de/dictionary/condition.md

@@ -67,7 +67,10 @@ export default myConditionalContent;
 
 ## Verwendung von bedingtem Inhalt mit React Intlayer
 
-Um bedingten Inhalt innerhalb einer React-Komponente zu verwenden, importieren und nutzen Sie den `useIntlayer`-Hook aus dem `react-intlayer`-Paket. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, eine Bedingung zu übergeben, um die entsprechende Ausgabe auszuwählen.
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To utilize conditional content within a React component, import and use the `useIntlayer` hook from the `react-intlayer` package. This hook fetches the content for the specified key and allows you to pass in a condition to select the appropriate output.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -80,25 +83,25 @@ const ConditionalComponent: FC = () => {
     <div>
       <p>
         {
-          /* Ausgabe: mein Inhalt, wenn es wahr ist */
+          /* Output: my content when it's true */
           myCondition(true)
         }
       </p>
       <p>
         {
-          /* Ausgabe: mein Inhalt, wenn es falsch ist */
+          /* Output: my content when it's false */
           myCondition(false)
         }
       </p>
       <p>
         {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
+          /* Output: my content when the condition fails */
           myCondition("")
         }
       </p>
       <p>
         {
-          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */
+          /* Output: my content when the condition fails */
           myCondition(undefined)
         }
       </p>
@@ -109,6 +112,165 @@ const ConditionalComponent: FC = () => {
 export default ConditionalComponent;
 ```
 
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To utilize conditional content in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To utilize conditional content in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { myCondition } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ myCondition(true) }}</p>
+    <p>{{ myCondition(false) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To utilize conditional content in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.myCondition(true)}</p>
+  <p>{$content.myCondition(false)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To utilize conditional content in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const ConditionalComponent: FC = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To utilize conditional content in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const ConditionalComponent: Component = () => {
+  const { myCondition } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{myCondition(true)}</p>
+      <p>{myCondition(false)}</p>
+    </div>
+  );
+};
+
+export default ConditionalComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To utilize conditional content in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-conditional",
+  template: `
+    <div>
+      <p>{{ content().myCondition(true) }}</p>
+      <p>{{ content().myCondition(false) }}</p>
+    </div>
+  `,
+})
+export class ConditionalComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To utilize conditional content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("true-content")!.textContent =
+    newContent.myCondition(true);
+  document.getElementById("false-content")!.textContent =
+    newContent.myCondition(false);
+});
+
+// Initial render
+document.getElementById("true-content")!.textContent =
+  content.myCondition(true);
+document.getElementById("false-content")!.textContent =
+  content.myCondition(false);
+```
+
+  </Tab>
+</Tabs>
+
 ## Zusätzliche Ressourcen
 
 Für detailliertere Informationen zur Konfiguration und Nutzung finden Sie in den folgenden Ressourcen: