@intlayer/docs 6.1.5 → 6.1.6-canary.0

package/docs/de/vs_code_extension.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Offizielle VS Code Erweiterung
 description: Erfahren Sie, wie Sie die Intlayer-Erweiterung in VS Code verwenden, um Ihren Entwicklungsworkflow zu verbessern. Navigieren Sie schnell zwischen lokalisierten Inhalten und verwalten Sie Ihre Wörterbücher effizient.
 keywords:
@@ -21,94 +21,38 @@ slugs:
 
 ## Übersicht
 
-[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) ist die offizielle Visual Studio Code Erweiterung für **Intlayer**, die darauf ausgelegt ist, die Entwicklererfahrung beim Arbeiten mit lokalisierten Inhalten in Ihren Projekten zu verbessern.
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) ist die offizielle Visual Studio Code Erweiterung für **Intlayer**, die entwickelt wurde, um die Entwicklererfahrung beim Arbeiten mit lokalisierten Inhalten in Ihren Projekten zu verbessern.
 
-![Intlayer VS Code Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code Erweiterung](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Erweiterungslink: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Funktionen
 
-### Sofortige Navigation
+![Wörterbücher füllen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Unterstützung für "Gehe zu Definition"** – Verwenden Sie `⌘ + Klick` (Mac) oder `Ctrl + Klick` (Windows/Linux) auf einem `useIntlayer`-Schlüssel, um die entsprechende Inhaltsdatei sofort zu öffnen.  
-**Nahtlose Integration** – Funktioniert mühelos mit **react-intlayer** und **next-intlayer** Projekten.  
-**Mehrsprachige Unterstützung** – Unterstützt lokalisierte Inhalte in verschiedenen Sprachen.  
-**VS Code Integration** – Integriert sich reibungslos in die Navigation und die Befehlspalette von VS Code.
-
-### Befehle zur Verwaltung von Wörterbüchern
-
-Verwalten Sie Ihre Inhaltswörterbücher direkt aus VS Code:
-
-- **Wörterbücher erstellen** – Generieren Sie Inhaltsdateien basierend auf Ihrer Projektstruktur.
-- **Wörterbücher hochladen** – Laden Sie die neuesten Wörterbuchinhalte in Ihr Repository hoch.
-- **Wörterbücher herunterladen** – Synchronisieren Sie die neuesten Wörterbuchinhalte aus Ihrem Repository mit Ihrer lokalen Umgebung.
+- **Sofortige Navigation** – Schneller Sprung zur richtigen Inhaltsdatei beim Klicken auf einen `useIntlayer`-Schlüssel.
 - **Wörterbücher füllen** – Füllen Sie Wörterbücher mit Inhalten aus Ihrem Projekt.
-- **Wörterbücher testen** – Erkennen Sie fehlende oder unvollständige Übersetzungen.
-
-### Generator für Inhaltsdeklarationen
-
-Erstellen Sie einfach strukturierte Wörterbuchdateien in verschiedenen Formaten:
 
-Wenn Sie gerade an einer Komponente arbeiten, wird die Datei `.content.{ts,tsx,js,jsx,mjs,cjs,json}` für Sie generiert.
+![Befehle auflisten](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Beispiel einer Komponente:
+- **Einfacher Zugriff auf Intlayer-Befehle** – Erstellen, pushen, pullen, füllen und testen Sie Inhaltswörterbücher mühelos.
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+![Inhaltsdatei erstellen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Generierte Datei im TypeScript-Format:
+- **Generator für Inhaltsdeklarationen** – Erstellen Sie Wörterbuch-Inhaltsdateien in verschiedenen Formaten (`.ts`, `.esm`, `.cjs`, `.json`).
 
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
+![Wörterbücher testen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+- **Wörterbücher testen** – Testen Sie Wörterbücher auf fehlende Übersetzungen.
 
-export default componentContent;
-```
+![Wörterbuch neu aufbauen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-Verfügbare Formate:
+- **Halten Sie Ihre Wörterbücher aktuell** – Halten Sie Ihre Wörterbücher mit den neuesten Inhalten aus Ihrem Projekt auf dem neuesten Stand.
 
-- **TypeScript (`.ts`)**
-- **ES Modul (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Intlayer-Tab (Aktivitätsleiste)
+![Intlayer-Tab (Aktivitätsleiste)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-Öffnen Sie den Intlayer-Tab, indem Sie auf das Intlayer-Symbol in der VS Code-Aktivitätsleiste klicken. Er enthält zwei Ansichten:
-
-- **Suche**: Eine Live-Suchleiste, um Wörterbücher und deren Inhalte schnell zu filtern. Das Tippen aktualisiert die Ergebnisse sofort.
-- **Wörterbücher**: Eine Baumansicht Ihrer Umgebungen/Projekte, Wörterbuchschlüssel und der Dateien, die Einträge beitragen. Sie können:
-  - Auf eine Datei klicken, um sie im Editor zu öffnen.
-  - Die Symbolleiste verwenden, um Aktionen auszuführen: Build, Pull, Push, Fill, Refresh, Test und Create Dictionary File.
-  - Das Kontextmenü für spezifische Aktionen verwenden:
-    - Auf einem Wörterbuch: Pull oder Push
-    - Auf einer Datei: Wörterbuch füllen
-  - Beim Wechseln der Editoren zeigt der Baum die passende Datei an, wenn sie zu einem Wörterbuch gehört.
-
-## Installation
-
-Sie können **Intlayer** direkt aus dem VS Code Marketplace installieren:
-
-1. Öffnen Sie **VS Code**.
-2. Gehen Sie zum **Extensions Marketplace**.
-3. Suchen Sie nach **"Intlayer"**.
-4. Klicken Sie auf **Installieren**.
+- **Intlayer-Tab (Aktivitätsleiste)** – Durchsuchen und durchsuchen Sie Wörterbücher über einen dedizierten Seiten-Tab mit Symbolleiste und Kontextaktionen (Build, Pull, Push, Fill, Refresh, Test, Create File).
 
 ## Verwendung
 
@@ -121,63 +65,58 @@ Sie können **Intlayer** direkt aus dem VS Code Marketplace installieren:
    const content = useIntlayer("app");
    ```
 
-3. **Command-Klick** (`⌘+Klick` auf macOS) oder **Strg-Klick** (unter Windows/Linux) auf den Schlüssel (z. B. `"app"`).
+3. **Befehl-Klick** (`⌘+Klick` auf macOS) oder **Strg-Klick** (auf Windows/Linux) auf den Schlüssel (z. B. `"app"`).
 4. VS Code öffnet automatisch die entsprechende Wörterbuchdatei, z. B. `src/app.content.ts`.
 
-### Verwaltung von Inhaltswörterbüchern
-
 ### Intlayer-Tab (Aktivitätsleiste)
 
-Verwenden Sie den seitlichen Tab, um Wörterbücher zu durchsuchen und zu verwalten:
+Verwenden Sie den Seiten-Tab, um Wörterbücher zu durchsuchen und zu verwalten:
 
 - Öffnen Sie das Intlayer-Symbol in der Aktivitätsleiste.
 - Geben Sie in **Suche** ein, um Wörterbücher und Einträge in Echtzeit zu filtern.
-- Durchsuchen Sie in **Wörterbücher** Umgebungen, Wörterbücher und Dateien. Verwenden Sie die Symbolleiste für Erstellen, Abrufen, Hochladen, Füllen, Aktualisieren, Testen und Wörterbuchdatei erstellen. Rechtsklicken Sie für Kontextaktionen (Abrufen/Hochladen bei Wörterbüchern, Füllen bei Dateien). Die aktuelle Editor-Datei wird im Baum automatisch angezeigt, wenn zutreffend.
+- Durchsuchen Sie in **Wörterbücher** Umgebungen, Wörterbücher und Dateien. Verwenden Sie die Symbolleiste für Erstellen, Abrufen, Senden, Füllen, Aktualisieren, Testen und Wörterbuchdatei erstellen. Rechtsklick für Kontextaktionen (Abrufen/Senden bei Wörterbüchern, Füllen bei Dateien). Die aktuelle Editor-Datei wird bei Bedarf automatisch im Baum angezeigt.
 
-#### Wörterbücher erstellen
+### Zugriff auf die Befehle
 
-Generieren Sie alle Wörterbuch-Inhaltsdateien mit:
+Sie können auf die Befehle über die **Befehlspalette** zugreifen.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Suchen Sie nach **Wörterbücher erstellen** und führen Sie den Befehl aus.
-
-#### Wörterbücher hochladen
-
-Laden Sie den neuesten Wörterbuchinhalt hoch:
-
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher hochladen**.
-3. Wählen Sie die hochzuladenden Wörterbücher aus und bestätigen Sie.
-
-#### Wörterbücher abrufen
+- **Wörterbücher erstellen**
+- **Wörterbücher hochladen**
+- **Wörterbücher herunterladen**
+- **Wörterbücher füllen**
+- **Wörterbücher testen**
+- **Wörterbuchdatei erstellen**
 
-Synchronisieren Sie die neuesten Wörterbuchinhalte:
+### Laden von Umgebungsvariablen
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher abrufen**.
-3. Wählen Sie die Wörterbücher aus, die abgerufen werden sollen.
+Intlayer empfiehlt, Ihre AI-API-Schlüssel sowie die Intlayer-Client-ID und das Secret in Umgebungsvariablen zu speichern.
 
-#### Wörterbücher füllen
+Die Erweiterung kann Umgebungsvariablen aus Ihrem Arbeitsbereich laden, um Intlayer-Befehle im richtigen Kontext auszuführen.
 
-Füllen Sie Wörterbücher mit Inhalten aus Ihrem Projekt:
+- **Ladereihenfolge (nach Priorität)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Nicht destruktiv**: vorhandene `process.env`-Werte werden nicht überschrieben.
+- **Geltungsbereich**: Dateien werden vom konfigurierten Basisverzeichnis aus aufgelöst (standardmäßig das Stammverzeichnis des Arbeitsbereichs).
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher füllen**.
-3. Führen Sie den Befehl aus, um die Wörterbücher zu befüllen.
+#### Auswahl der aktiven Umgebung
 
-#### Wörterbücher testen
+- **Befehls-Palette**: Öffnen Sie die Palette und führen Sie `Intlayer: Select Environment` aus, wählen Sie dann die Umgebung aus (z. B. `development`, `staging`, `production`). Die Erweiterung versucht, die erste verfügbare Datei in der oben genannten Prioritätsliste zu laden und zeigt eine Benachrichtigung wie „Env geladen von .env.<env>.local“ an.
+- **Einstellungen**: Gehen Sie zu `Einstellungen → Erweiterungen → Intlayer` und setzen Sie:
+  - **Umgebung**: der Umgebungsname, der zur Auflösung von `.env.<env>*` Dateien verwendet wird.
+  - (Optional) **Env-Datei**: ein expliziter Pfad zu einer `.env`-Datei. Wenn angegeben, hat dieser Vorrang vor der ermittelten Liste.
 
-Validieren Sie Wörterbücher und finden Sie fehlende Übersetzungen:
+#### Monorepos und benutzerdefinierte Verzeichnisse
 
-1. Öffnen Sie die **Befehls-Palette**.
-2. Suchen Sie nach **Wörterbücher testen**.
-3. Überprüfen Sie die gemeldeten Probleme und beheben Sie diese bei Bedarf.
+Wenn sich Ihre `.env`-Dateien außerhalb des Arbeitsbereichs-Stammverzeichnisses befinden, legen Sie das **Basisverzeichnis** unter `Einstellungen → Erweiterungen → Intlayer` fest. Der Loader sucht dann nach `.env`-Dateien relativ zu diesem Verzeichnis.
 
-## Dokumentationsverlauf
+## Dokumentationshistorie
 
-| Version | Datum      | Änderungen        |
-| ------- | ---------- | ----------------- |
-| 5.5.10  | 2025-06-29 | Verlauf initiiert |
+| Version | Datum      | Änderungen                                    |
+| ------- | ---------- | --------------------------------------------- |
+| 6.1.5   | 2025-09-30 | Demo-GIF hinzugefügt                          |
+| 6.1.0   | 2025-09-24 | Abschnitt zur Umgebungs-Auswahl hinzugefügt   |
+| 6.0.0   | 2025-09-22 | Intlayer-Tab / Befehle zum Ausfüllen & Testen |
+| 5.5.10  | 2025-06-29 | Historie initialisiert                        |

package/docs/en/component_i18n.md

@@ -0,0 +1,186 @@
+---
+createdAt: 2024-03-07
+updatedAt: 2025-09-30
+title: Make a component multilingual (i18n library) in React and Next.js
+description: Learn how to declare and retrieve localized content to build a multilingual React or Next.js component with Intlayer.
+keywords:
+  - i18n
+  - component
+  - react
+  - multilingual
+  - next.js
+  - intlayer
+slugs:
+  - doc
+  - component
+  - i18n
+applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+---
+
+# How to make a component multilingual (i18n) with Intlayer
+
+This guide shows the minimal steps to make a UI component multilingual in two common setups:
+
+- React (Vite/SPA)
+- Next.js (App Router)
+
+You will first declare your content, then retrieve it in your component.
+
+## 1) Declare your content (shared for React and Next.js)
+
+Create a content declaration file near your component. This keeps translations close to where they are used and enables type safety.
+
+```ts fileName="component.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "component-example",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+    }),
+    description: t({
+      en: "A multilingual React component",
+      fr: "Un composant React multilingue",
+      es: "Un componente React multilingüe",
+    }),
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
+
+JSON is also supported if you prefer configuration files.
+
+```json fileName="component.content.json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "component-example",
+  "content": {
+    "title": {
+      "nodeType": "translation",
+      "translation": { "en": "Hello", "fr": "Bonjour", "es": "Hola" }
+    },
+    "description": {
+      "nodeType": "translation",
+      "translation": {
+        "en": "A multilingual React component",
+        "fr": "Un composant React multilingue",
+        "es": "Un componente React multilingüe"
+      }
+    }
+  }
+}
+```
+
+## 2) Retrieve your content
+
+### Case A — React app (Vite/SPA)
+
+Default approach: use `useIntlayer` to retrieve by key. This keeps components lean and typed.
+
+```tsx fileName="ComponentExample.tsx"
+import { useIntlayer } from "react-intlayer";
+
+export function ComponentExample() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Server-side rendering or outside provider: use `react-intlayer/server` and pass an explicit `locale` when needed.
+
+```tsx fileName="ServerRenderedExample.tsx"
+import { useIntlayer } from "react-intlayer/server";
+
+export function ServerRenderedExample({ locale }: { locale: string }) {
+  const content = useIntlayer("component-example", locale);
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+Alternative: `useDictionary` can read a whole declared object if you prefer collocating structure at call site.
+
+```tsx fileName="ComponentWithDictionary.tsx"
+import { useDictionary } from "react-intlayer";
+import componentContent from "./component.content";
+
+export function ComponentWithDictionary() {
+  const { title, description } = useDictionary(componentContent);
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+}
+```
+
+### Case B — Next.js (App Router)
+
+Prefer server components for data safety and performance. Use `useIntlayer` from `next-intlayer/server` in server files, and `useIntlayer` from `next-intlayer` in client components.
+
+```tsx fileName="app/[locale]/example/ServerComponent.tsx"
+import { useIntlayer } from "next-intlayer/server";
+
+export default function ServerComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </>
+  );
+}
+```
+
+```tsx fileName="app/[locale]/example/ClientComponent.tsx"
+"use client";
+
+import { useIntlayer } from "next-intlayer";
+
+export function ClientComponent() {
+  const content = useIntlayer("component-example");
+  return (
+    <div>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
+    </div>
+  );
+}
+```
+
+Tip: For page metadata and SEO, you can also fetch content using `getIntlayer` and generate multilingual URLs via `getMultilingualUrls`.
+
+## Why Intlayer’s component approach is best
+
+- **Collocation**: Content declarations live near components, reducing drift and improving reuse across design systems.
+- **Type safety**: Keys and structures are strongly typed; missing translations surface at build-time rather than at runtime.
+- **Server-first**: Works natively in server components for better security and performance; client hooks remain ergonomic.
+- **Tree-shaking**: Only content used by the component is bundled, keeping payloads small in large apps.
+- **DX & tooling**: Built-in middleware, SEO helpers, and optional Visual Editor/AI translations streamline everyday work.
+
+See the comparisons and patterns in the Next.js-focused roundup: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+## Related guides and references
+
+- React setup (Vite): https://intlayer.org/doc/environment/vite-and-react
+- React Router v7: https://intlayer.org/doc/environment/vite-and-react/react-router-v7
+- TanStack Start: https://intlayer.org/doc/environment/vite-and-react/tanstack-start
+- Next.js setup: https://intlayer.org/doc/environment/nextjs
+- Why Intlayer vs. next-intl vs. next-i18next: https://intlayer.org/blog/next-i18next-vs-next-intl-vs-intlayer
+
+These pages include end-to-end setup, providers, routing, and SEO helpers.

package/docs/en/intlayer_with_nextjs_14.md

@@ -1398,7 +1398,23 @@ Link.displayName = 'Link';
 
 By integrating this `Link` component across your application, you maintain a coherent and language-aware user experience while also benefitting from improved SEO and usability.
 
-### (Optional) Step 12: Optmize your bundle size
+### (Optional) Step 12: Get the current locale in Server Actions
+
+If you need the active locale inside a Server Action (e.g., to localize emails or run locale-aware logic), call `getLocale` from `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Do something with the locale
+};
+```
+
+### (Optional) Step 13: Optmize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 
@@ -1474,6 +1490,7 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 | Version | Date       | Changes                                                         |
 | ------- | ---------- | --------------------------------------------------------------- |
+| 5.6.6   | 2025-10-02 | Added docs for `getLocale` function on server actions           |
 | 5.6.2   | 2025-09-22 | Added docs for `multipleMiddlewares` helper                     |
 | 5.6.0   | 2025-07-06 | Transform `withIntlayer()` function to a promise based function |
 | 5.5.10  | 2025-06-29 | Init history                                                    |

package/docs/en/intlayer_with_nextjs_15.md

@@ -1445,7 +1445,23 @@ const Link = ({ href, children, ...props }) => {
 
 By integrating this `Link` component across your application, you maintain a coherent and language-aware user experience while also benefitting from improved SEO and usability.
 
-### (Optional) Step 12: Optmize your bundle size
+### (Optional) Step 12: Get the current locale in Server Actions
+
+If you need the active locale inside a Server Action (e.g., to localize emails or run locale-aware logic), call `getLocale` from `next-intlayer/server`:
+
+```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
+"use server";
+
+import { getLocale } from "next-intlayer/server";
+
+export const myServerAction = async () => {
+  const locale = await getLocale();
+
+  // Do something with the locale
+};
+```
+
+### (Optional) Step 13: Optmize your bundle size
 
 When using `next-intlayer`, dictionaries are included in the bundle for every page by default. To optimize bundle size, Intlayer provides an optional SWC plugin that intelligently replace `useIntlayer` calls using macros. This ensures dictionaries are only included in bundles for pages that actually use them.
 
@@ -1537,6 +1553,7 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 | Version | Date       | Changes                                                         |
 | ------- | ---------- | --------------------------------------------------------------- |
+| 5.6.6   | 2025-10-02 | Added docs for `getLocale` function on server actions           |
 | 5.6.2   | 2025-09-23 | Added docs for watch dictionaries changes on Turbopack          |
 | 5.6.2   | 2025-09-22 | Added docs for `multipleMiddlewares` helper                     |
 | 5.6.0   | 2025-07-06 | Transform `withIntlayer()` function to a promise based function |

package/docs/en/vs_code_extension.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-17
-updatedAt: 2025-09-22
+updatedAt: 2025-09-30
 title: Official VS Code Extension
 description: Learn how to use the Intlayer extension in VS Code to enhance your development workflow. Quickly navigate between localized content and manage your dictionaries efficiently.
 keywords:
@@ -23,92 +23,36 @@ slugs:
 
 [**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) is the official Visual Studio Code extension for **Intlayer**, designed to improve the developer experience when working with localized content in your projects.
 
-![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif)
+![Intlayer VS Code Extension](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
 
 Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
 
 ## Features
 
-### Instant Navigation
+![Fill dictionaries](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
-**Go to Definition Support** – Use `⌘ + Click` (Mac) or `Ctrl + Click` (Windows/Linux) on a `useIntlayer` key to open the corresponding content file instantly.  
-**Seamless Integration** – Works effortlessly with **react-intlayer** and **next-intlayer** projects.  
-**Multi-language Support** – Supports localized content across different languages.  
-**VS Code Integration** – Smoothly integrates with VS Code’s navigation and command palette.
+- **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.
+- **Fill Dictionaries** – Fill dictionaries with content from your project.
 
-### Dictionary Management Commands
+![List commands](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
 
-Manage your content dictionaries directly from VS Code:
+- **Easy access to Intlayer Commands** – Build, push, pull, fill, test content dictionaries with ease.
 
-- **Build Dictionaries** – Generate content files based on your project structure.
-- **Push Dictionaries** – Upload the latest dictionary content to your repository.
-- **Pull Dictionaries** – Sync the latest dictionary content from your repository to your local environment.
-- **Fill Dictionaries** – Populate dictionaries with content from your project.
-- **Test Dictionaries** – Identify missing or incomplete translations.
+![Create content file](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
 
-### Content Declaration Generator
+- **Content Declaration Generator** – Create dictionary content files in various formats (`.ts`, `.esm`, `.cjs`, `.json`).
 
-Easily generate structured dictionary files in different formats:
+![Test dictionaties](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
 
-If you're currently working on a component, it will generate the `.content.{ts,tsx,js,jsx,mjs,cjs,json}` file for you.
+- **Test Dictionaries** – Test dictionaries for missing translations.
 
-Example of component:
+![Rebuild dictionary](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
 
-```tsx fileName="src/components/MyComponent/index.tsx"
-const MyComponent = () => {
-  const { myTranslatedContent } = useIntlayer("my-component");
+- **Keep your dictionaries up to date** – Keep your dictionaries up to date with the latest content from your project.
 
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Generated file in TypeScript format:
-
-```tsx fileName="src/components/MyComponent/index.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const componentContent = {
-  key: "my-component",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-};
+![Intlayer Tab (Activity Bar)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
 
-export default componentContent;
-```
-
-Available formats:
-
-- **TypeScript (`.ts`)**
-- **ES Module (`.esm`)**
-- **CommonJS (`.cjs`)**
-- **JSON (`.json`)**
-
-### Intlayer Tab (Activity Bar)
-
-Open the Intlayer tab by clicking the Intlayer icon in the VS Code Activity Bar. It contains two views:
-
-- **Search**: A live search bar to quickly filter dictionaries and their content. Typing updates the results instantly.
-- **Dictionaries**: A tree view of your environments/projects, dictionary keys, and the files contributing entries. You can:
-  - Click a file to open it in the editor.
-  - Use the toolbar to run actions: Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File.
-  - Use the context menu for item‑specific actions:
-    - On a dictionary: Pull or Push
-    - On a file: Fill Dictionary
-  - When you switch editors, the tree will reveal the matching file if it belongs to a dictionary.
-
-## Installation
-
-You can install **Intlayer** directly from the VS Code Marketplace:
-
-1. Open **VS Code**.
-2. Go to the **Extensions Marketplace**.
-3. Search for **"Intlayer"**.
-4. Click **Install**.
+- **Intlayer Tab (Activity Bar)** – Browse and search dictionaries from a dedicated side tab with toolbar and context actions (Build, Pull, Push, Fill, Refresh, Test, Create File).
 
 ## Usage
 
@@ -124,8 +68,6 @@ You can install **Intlayer** directly from the VS Code Marketplace:
 3. **Command-click** (`⌘+Click` on macOS) or **Ctrl+Click** (on Windows/Linux) on the key (e.g., `"app"`).
 4. VS Code will automatically open the corresponding dictionary file, e.g., `src/app.content.ts`.
 
-### Managing Content Dictionaries
-
 ### Intlayer Tab (Activity Bar)
 
 Use the side tab to browse and manage dictionaries:
@@ -134,47 +76,20 @@ Use the side tab to browse and manage dictionaries:
 - In **Search**, type to filter dictionaries and entries in real time.
 - In **Dictionaries**, browse environments, dictionaries, and files. Use the toolbar for Build, Pull, Push, Fill, Refresh, Test, and Create Dictionary File. Right‑click for context actions (Pull/Push on dictionaries, Fill on files). The current editor file auto‑reveals in the tree when applicable.
 
-#### Building Dictionaries
+### Accessing the commands
 
-Generate all dictionary content files with:
+You can access the commands from the **Command Palette**.
 
 ```sh
 Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
 ```
 
-Search for **Build Dictionaries** and execute the command.
-
-#### Pushing Dictionaries
-
-Upload the latest dictionary content:
-
-1. Open the **Command Palette**.
-2. Search for **Push Dictionaries**.
-3. Select the dictionaries to push and confirm.
-
-#### Pulling Dictionaries
-
-Sync the latest dictionary content:
-
-1. Open the **Command Palette**.
-2. Search for **Pull Dictionaries**.
-3. Choose the dictionaries to pull.
-
-#### Filling Dictionaries
-
-Fill dictionaries with content from your project:
-
-1. Open the **Command Palette**.
-2. Search for **Fill Dictionaries**.
-3. Run the command to populate dictionaries.
-
-#### Testing Dictionaries
-
-Validate dictionaries and find missing translations:
-
-1. Open the **Command Palette**.
-2. Search for **Test Dictionaries**.
-3. Review the reported issues and fix as needed.
+- **Build Dictionaries**
+- **Push Dictionaries**
+- **Pull Dictionaries**
+- **Fill Dictionaries**
+- **Test Dictionaries**
+- **Create Dictionary File**
 
 ### Loading Environment Variables
 
@@ -197,16 +112,11 @@ The extension can load environment variables from your workspace to run Intlayer
 
 If your `.env` files live outside the workspace root, set the **Base Directory** in `Settings → Extensions → Intlayer`. The loader will look for `.env` files relative to that directory.
 
-#### Notes
-
-- The extension loads the first matching file and keeps any existing variables intact.
-- You’ll see an info message each time a file is successfully loaded.
-- If no candidate file is found, commands still run with your current environment variables.
-
 ## Doc History
 
 | Version | Date       | Changes                             |
 | ------- | ---------- | ----------------------------------- |
+| 6.1.5   | 2025-09-30 | Add demo gif                        |
 | 6.1.0   | 2025-09-24 | Added environment selection section |
 | 6.0.0   | 2025-09-22 | Intlayer Tab / Fill & Test commands |
 | 5.5.10  | 2025-06-29 | Init history                        |