@intlayer/docs 7.3.0 → 7.3.2-canary.0

package/docs/de/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Automatisierte Inhaltsextraktion für i18n
+description: Automatisieren Sie Ihren Internationalisierungsprozess mit dem Intlayer Compiler. Extrahieren Sie Inhalte direkt aus Ihren Komponenten für schnellere und effizientere i18n in Vite, Next.js und mehr.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internationalisierung
+  - i18n
+  - Automatisierung
+  - Extraktion
+  - Geschwindigkeit
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Release Compiler
+---
+
+# Intlayer Compiler | Automatisierte Inhaltsextraktion für i18n
+
+## Was ist der Intlayer Compiler?
+
+Der **Intlayer Compiler** ist ein leistungsstarkes Werkzeug, das entwickelt wurde, um den Prozess der Internationalisierung (i18n) in Ihren Anwendungen zu automatisieren. Er durchsucht Ihren Quellcode (JSX, TSX, Vue, Svelte) nach Inhaltsdeklarationen, extrahiert diese und generiert automatisch die notwendigen Wörterbuchdateien. Dadurch können Sie Ihre Inhalte direkt bei den Komponenten belassen, während Intlayer die Verwaltung und Synchronisierung Ihrer Wörterbücher übernimmt.
+
+## Warum den Intlayer Compiler verwenden?
+
+- **Automatisierung**: Beseitigt das manuelle Kopieren und Einfügen von Inhalten in Wörterbücher.
+- **Geschwindigkeit**: Optimierte Inhaltsextraktion, die sicherstellt, dass Ihr Build-Prozess schnell bleibt.
+- **Entwicklererfahrung**: Behalten Sie Inhaltsdeklarationen genau dort, wo sie verwendet werden, und verbessern Sie so die Wartbarkeit.
+- **Live-Updates**: Unterstützt Hot Module Replacement (HMR) für sofortiges Feedback während der Entwicklung.
+
+Siehe den Blogbeitrag [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/compiler_vs_declarative_i18n.md) für einen tieferen Vergleich.
+
+## Warum den Intlayer Compiler nicht verwenden?
+
+Während der Compiler eine ausgezeichnete "funktioniert einfach so"-Erfahrung bietet, führt er auch einige Kompromisse ein, die Sie beachten sollten:
+
+- **Heuristische Mehrdeutigkeit**: Der Compiler muss erraten, was benutzerorientierter Inhalt im Gegensatz zur Anwendungslogik ist (z. B. `className="active"`, Statuscodes, Produkt-IDs). In komplexen Codebasen kann dies zu falschen Positiven oder übersehenen Zeichenketten führen, die manuelle Anmerkungen und Ausnahmen erfordern.
+- **Nur statische Extraktion**: Die compilerbasierte Extraktion basiert auf statischer Analyse. Zeichenketten, die nur zur Laufzeit existieren (API-Fehlercodes, CMS-Felder usw.), können vom Compiler allein nicht entdeckt oder übersetzt werden, daher benötigen Sie immer noch eine ergänzende Laufzeit-i18n-Strategie.
+
+Für einen tieferen architektonischen Vergleich siehe den Blogbeitrag [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/de/compiler_vs_declarative_i18n.md).
+
+Als Alternative, um Ihren i18n-Prozess zu automatisieren und gleichzeitig die volle Kontrolle über Ihren Inhalt zu behalten, bietet Intlayer auch einen Auto-Extraktionsbefehl `intlayer transform` (siehe [CLI-Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/transform.md)) oder den Befehl `Intlayer: extract content to Dictionary` aus der Intlayer VS Code-Erweiterung (siehe [VS Code-Erweiterungsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/vs_code_extension.md)).
+
+## Verwendung
+
+### Vite
+
+Für Vite-basierte Anwendungen (React, Vue, Svelte usw.) ist der einfachste Weg, den Compiler zu verwenden, das `vite-intlayer` Plugin.
+
+#### Installation
+
+```bash
+npm install vite-intlayer
+```
+
+#### Konfiguration
+
+Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler` Plugin einzubinden:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Fügt das Compiler-Plugin hinzu
+  ],
+});
+```
+
+#### Framework-Unterstützung
+
+Das Vite-Plugin erkennt und verarbeitet automatisch verschiedene Dateitypen:
+
+- **React / JSX / TSX**: Wird nativ unterstützt.
+- **Vue**: Erfordert `@intlayer/vue-compiler`.
+- **Svelte**: Erfordert `@intlayer/svelte-compiler`.
+
+Stellen Sie sicher, dass Sie das passende Compiler-Paket für Ihr Framework installieren:
+
+```bash
+# Für Vue
+npm install @intlayer/vue-compiler
+
+# Für Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+Für Next.js oder andere Webpack-basierte Anwendungen, die Babel verwenden, können Sie den Compiler mit dem `@intlayer/babel` Plugin konfigurieren.
+
+#### Installation
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Konfiguration
+
+Aktualisieren Sie Ihre `babel.config.js` (oder `babel.config.json`), um das Extraktions-Plugin einzubinden. Wir stellen einen Helfer `getExtractPluginOptions` bereit, der Ihre Intlayer-Konfiguration automatisch lädt.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+Diese Konfiguration stellt sicher, dass Inhalte, die in Ihren Komponenten deklariert sind, automatisch extrahiert und während Ihres Build-Prozesses zur Generierung von Wörterbüchern verwendet werden.

package/docs/de/how_works_intlayer.md

@@ -139,7 +139,7 @@ Das `vue-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpret
 
 Das `nuxt-intlayer`-Paket ist ein Nuxt-Modul, um Intlayer-Wörterbücher in Nuxt-Anwendungen nutzbar zu machen. Es integriert wesentliche Funktionen, damit Intlayer in einer Nuxt-Umgebung funktioniert, wie z. B. Übersetzungs-Middleware, Routing oder die Konfiguration der `nuxt.config.js`-Datei.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 Das `svelte-intlayer`-Paket wird verwendet, um Intlayer-Wörterbücher zu interpretieren und in Svelte-Anwendungen nutzbar zu machen.
 

package/docs/de/vs_code_extension.md

@@ -42,6 +42,10 @@ Erweiterungslink: [https://marketplace.visualstudio.com/items?itemName=Intlayer.
 
 ## Funktionen
 
+![Inhalt extrahieren](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Inhalt extrahieren** – Extrahieren Sie Inhalte aus Ihren React / Vue / Svelte Komponenten
+
 ![Wörterbücher füllen](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Sofortige Navigation** – Schneller Sprung zur richtigen Inhaltsdatei beim Klicken auf einen `useIntlayer`-Schlüssel.

package/docs/en/bundle_optimization.md

@@ -0,0 +1,184 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2025-11-25
+title: Optimizing i18n Bundle Size & Performance
+description: Reduce application bundle size by optimizing internationalization (i18n) content. Learn how to leverage tree shaking and lazy loading for dictionaries with Intlayer.
+keywords:
+  - Bundle Optimization
+  - Content Automation
+  - Dynamic Content
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 6.0.0
+    date: 2025-11-25
+    changes: Init history
+---
+
+# Optimizing i18n Bundle Size & Performance
+
+One of the most common challenges with traditional i18n solutions relying on JSON files is managing content size. If developers do not manually separate content into namespaces, users often end up downloading translations for every page and potentially every language just to view a single page.
+
+For example, an application with 10 pages translated into 10 languages might result in a user downloading the content of 100 pages, even though they only need **one** (the current page in the current language). This leads to wasted bandwidth and slower load times.
+
+> To detect it, you can use bundle analyzer like `rollup-plugin-visualizer` (vite), `@next/bundle-analyzer` (next.js), or `webpack-bundle-analyzer` (React CRA / Angular / etc).
+
+**Intlayer solves this problem through build-time optimization.** It analyzes your code to detect which dictionaries are actually used per component and reinjects only the necessary content into your bundle.
+
+## Table of Contents
+
+<TOC />
+
+## How It Works
+
+Intlayer uses a **per-component approach**. Unlike global JSON files, your content is defined alongside or within your components. During the build process, Intlayer:
+
+1.  **Analyzes** your code to find `useIntlayer` calls.
+2.  **Builds** the corresponding dictionary content.
+3.  **Replaces** the `useIntlayer` call with optimized code based on your configuration.
+
+This ensures that:
+
+- If a component is not imported, its content is not included in the bundle (Dead Code Elimination).
+- If a component is lazy-loaded, its content is also lazy-loaded.
+
+## Setup by Platform
+
+### Next.js
+
+Next.js requires the `@intlayer/swc` plugin to handle the transformation, as Next.js uses SWC for builds.
+
+> This plugin is installed by default because SWC plugins are still experimental for Next.js. It may change in the future.
+
+### Vite
+
+Vite uses `@intlayer/babel` plugin which is included as dependency of `vite-intlayer`. The optimization is enabled by default.
+
+### Webpack
+
+To enable bundle optimization with Intlayer on Webpack, you need to install and configure the appropriate Babel (`@intlayer/babel`) or SWC (`@intlayer/swc`) plugin.
+
+### Expo / Lynx
+
+Bundle optimization is **not available yet** for this platform. Support will be added in a future release.
+
+## Configuration
+
+You can control how Intlayer optimizes your bundle via the `build` property in your `intlayer.config.ts`.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  build: {
+    optimize: true,
+    importMode: "static", // or 'dynamic'
+    traversePattern: ["**/*.{js,ts,mjs,cjs,jsx,tsx}", "!**/node_modules/**"],
+  },
+};
+
+export default config;
+```
+
+> Keeping the default option for `optimize` is recommended in the most majority of cases.
+
+> See doc configuration for more details: [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
+
+### Build Options
+
+The following options are available under the `build` configuration object:
+
+| Property              | Type                            | Default                         | Description                                                                                                                                                                                      |
+| :-------------------- | :------------------------------ | :------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`**        | `boolean`                       | `undefined`                     | Controls whether build optimization is enabled. If `true`, Intlayer replaces dictionary calls with optimized injects. If `false`, optimization is disabled. Ideally set to `true` in production. |
+| **`importMode`**      | `'static' , 'dynamic' , 'live'` | `'static'`                      | Determines how dictionaries are loaded (see details below).                                                                                                                                      |
+| **`traversePattern`** | `string[]`                      | `['**/*.{js,ts,jsx,tsx}', ...]` | Glob patterns defining which files Intlayer should scan for optimization. Use this to exclude unrelated files and speed up builds.                                                               |
+| **`outputFormat`**    | `'esm', 'cjs'`                  | `'esm', 'cjs'`                  | Controls the output format of the built dictionaries.                                                                                                                                            |
+
+## Import Modes
+
+The `importMode` setting dictates how the dictionary content is injected into your component.
+
+### 1. Static Mode (`default`)
+
+In static mode, Intlayer replaces `useIntlayer` with `useDictionary` and injects the dictionary directly into the JavaScript bundle.
+
+- **Pros:** Instant rendering (synchronous), zero extra network requests during hydration.
+- **Cons:** The bundle includes translations for **all** available languages for that specific component.
+- **Best for:** Single Page Applications (SPA).
+
+**Transformed Code Example:**
+
+```tsx
+// Your code
+const content = useIntlayer("my-key");
+
+// Optimized code (Static)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+
+### 2. Dynamic Mode
+
+In dynamic mode, Intlayer replaces `useIntlayer` with `useDictionaryAsync`. This uses `import()` (Suspense-like mechanism) to lazy-load specifically the JSON for the current locale.
+
+- **Pros:** **Locale-level tree shaking.** A user viewing the English version will _only_ download the English dictionary. The French dictionary is never loaded.
+- **Cons:** Triggers a network request (asset fetch) per component during hydration.
+- **Best for:** Large text blocks, articles, or applications supporting many languages where bundle size is critical.
+
+**Transformed Code Example:**
+
+```tsx
+// Your code
+const content = useIntlayer("my-key");
+
+// Optimized code (Dynamic)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
+});
+```
+
+> When using `importMode: 'dynamic'`, if you have 100 components using `useIntlayer` on a single page, the browser will attempt 100 separate fetches. To avoid this "waterfall" of requests, group content into fewer `.content` files (e.g., one dictionary per page section) rather than one per atom component.
+
+> Currently, `importMode: 'dynamic'` is not fully supported for Vue and Svelte. It is recommended to use `importMode: 'static'` for these frameworks until further updates.
+
+### 3. Live Mode
+
+Behaves similarly to Dynamic mode but attempts to fetch dictionaries from the Intlayer Live Sync API first. If the API call fails or the content is not marked for live updates, it falls back to the dynamic import.
+
+> See CMS documentation for more details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)
+
+## Summary: Static vs Dynamic
+
+| Feature              | Static Mode                                   | Dynamic Mode                         |
+| :------------------- | :-------------------------------------------- | :----------------------------------- |
+| **JS Bundle Size**   | Larger (includes all langs for the component) | Smallest (only code, no content)     |
+| **Initial Load**     | Instant (Content is in bundle)                | Slight delay (Fetches JSON)          |
+| **Network Requests** | 0 extra requests                              | 1 request per dictionary             |
+| **Tree Shaking**     | Component-level                               | Component-level + Locale-level       |
+| **Best Use Case**    | UI Components, Small Apps                     | Pages with much text, Many Languages |

package/docs/en/compiler.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-09-09
+updatedAt: 2025-09-09
+title: Intlayer Compiler | Automated Content Extraction for i18n
+description: Automate your internationalization process with the Intlayer Compiler. Extract content directly from your components for faster, more efficient i18n in Vite, Next.js, and more.
+keywords:
+  - Intlayer
+  - Compiler
+  - Internationalization
+  - i18n
+  - Automation
+  - Extraction
+  - Speed
+  - Vite
+  - Next.js
+  - React
+  - Vue
+  - Svelte
+slugs:
+  - doc
+  - compiler
+history:
+  - version: 7.3.1
+    date: 2025-11-27
+    changes: Release Compiler
+---
+
+# Intlayer Compiler | Automated Content Extraction for i18n
+
+## What is the Intlayer Compiler?
+
+The **Intlayer Compiler** is a powerful tool designed to automate the process of internationalization (i18n) in your applications. It scans your source code (JSX, TSX, Vue, Svelte) for content declarations, extracts them, and automatically generates the necessary dictionary files. This allows you to keep your content co-located with your components while Intlayer handles the management and synchronization of your dictionaries.
+
+## Why Use the Intlayer Compiler?
+
+- **Automation**: Eliminates manual copy-pasting of content into dictionaries.
+- **Speed**: Optimized content extraction ensuring your build process remains fast.
+- **Developer Experience**: Keep content declarations right where they are used, improving maintainability.
+- **Live Updates**: Supports Hot Module Replacement (HMR) for instant feedback during development.
+
+See the [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md) blog post for a deeper comparison.
+
+## Why not use the Intlayer Compiler?
+
+While the compiler offers an excellent "just works" experience, it also introduces some trade-offs you should be aware of:
+
+- **Heuristic ambiguity**: The compiler must guess what is user-facing content vs. application logic (e.g., `className="active"`, status codes, product IDs). In complex codebases, this can lead to false positives or missed strings that require manual annotations and exceptions.
+- **Static-only extraction**: Compiler-based extraction relies on static analysis. Strings that only exist at runtime (API error codes, CMS fields, etc.) cannot be discovered or translated by the compiler alone, so you still need a complementary runtime i18n strategy.
+
+For a deeper architectural comparison, see the blog post [Compiler vs. Declarative i18n](https://github.com/aymericzip/intlayer/blob/main/docs/blog/en/compiler_vs_declarative_i18n.md).
+
+As an alternative, to automate your i18n process while keeping full control of your content, Intlayer also provides an auto-extraction command `intlayer transform` (see [CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/transform.md)), or the `Intlayer: extract content to Dictionary` command from the Intlayer VS Code extension (see [VS Code extension documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/vs_code_extension.md)).
+
+## Usage
+
+### Vite
+
+For Vite-based applications (React, Vue, Svelte, etc.), the easiest way to use the compiler is through the `vite-intlayer` plugin.
+
+#### Installation
+
+```bash
+npm install vite-intlayer
+```
+
+#### Configuration
+
+Update your `vite.config.ts` to include the `intlayerCompiler` plugin:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Adds the compiler plugin
+  ],
+});
+```
+
+#### Framework Support
+
+The Vite plugin automatically detects and handles different file types:
+
+- **React / JSX / TSX**: Handled natively.
+- **Vue**: Requires `@intlayer/vue-compiler`.
+- **Svelte**: Requires `@intlayer/svelte-compiler`.
+
+Make sure to install the appropriate compiler package for your framework:
+
+```bash
+# For Vue
+npm install @intlayer/vue-compiler
+
+# For Svelte
+npm install @intlayer/svelte-compiler
+```
+
+### Next.js (Babel)
+
+For Next.js or other Webpack-based applications using Babel, you can configure the compiler using the `@intlayer/babel` plugin.
+
+#### Installation
+
+```bash
+npm install @intlayer/babel
+```
+
+#### Configuration
+
+Update your `babel.config.js` (or `babel.config.json`) to include the extraction plugin. We provide a helper `getExtractPluginOptions` to load your Intlayer configuration automatically.
+
+```js fileName="babel.config.js"
+const {
+  intlayerExtractBabelPlugin,
+  intlayerOptimizeBabelPlugin,
+  getExtractPluginOptions,
+  getOptimizePluginOptions,
+} = require("@intlayer/babel");
+
+module.exports = {
+  presets: ["next/babel"],
+  plugins: [
+    // Extract content from components into dictionaries
+    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
+    // Optimize imports by replacing useIntlayer with direct dictionary imports
+    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
+  ],
+};
+```
+
+This configuration ensures that content declared in your components is automatically extracted and used to generate dictionaries during your build process.

package/docs/en/configuration.md

@@ -654,6 +654,8 @@ Intlayer supports multiple AI providers for enhanced flexibility and choice. Cur
   - _Default_: None
   - _Description_: Provides additional context about your application to the AI model, helping it generate more accurate and contextually appropriate translations. This can include information about your app's domain, target audience, tone, or specific terminology.
 
+> If you provide additional parameters, Intlayer will pass them to the AI model as context. It can be used to customize the reasoning effort, text verbosity, etc
+
 ### Build Configuration
 
 Settings that control how Intlayer optimizes and builds your application's internationalization.
@@ -668,9 +670,10 @@ Build options apply to the `@intlayer/babel` and `@intlayer/swc` plugins.
 
 - **optimize**:
   - _Type_: `boolean`
-  - _Default_: `process.env.NODE_ENV === 'production'`
+  - _Default_: `undefined`
   - _Description_: Controls whether the build should be optimized.
-  - _Example_: `true`
+  - _Example_: `process.env.NODE_ENV === 'production'`
+  - _Note_: By default, the build optimization is not fixed. If not set, Intlayer will trigger the build optimization on the build of your application (vite / nextjs / etc). Setting it to `true` will force the build optimization, including during dev mode. Setting it to `false` will disable the build optimization.
   - _Note_: When enabled, Intlayer will replace all calls of dictionaries to optimize chunking. That way the final bundle will import only the dictionaries that are used. All imports will stay as static import to avoid async processing when loading the dictionaries.
   - _Note_: Intlayer will replace all calls of `useIntlayer` with the defined mode by the `importMode` option and `getIntlayer` with `getDictionary`.
   - _Note_: This option relies on the `@intlayer/babel` and `@intlayer/swc` plugins.

package/docs/en/how_works_intlayer.md

@@ -146,7 +146,7 @@ The `vue-intlayer` package is used to interpret Intlayer dictionaries and make t
 
 The `nuxt-intlayer` package is as Nuxt module to make Intlayer dictionaries usable in Nuxt applications. It integrates essential features to make Intlayer work in a Nuxt environment, such as translation middleware, routing, or the `nuxt.config.js` file configuration.
 
-### svelte-intlayer (WIP)
+### svelte-intlayer
 
 The `svelte-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Svelte applications.
 

package/docs/en/vs_code_extension.md

@@ -16,6 +16,9 @@ slugs:
   - doc
   - vs-code-extension
 history:
+  - version: 7.3.0
+    date: 2025-11-25
+    changes: Add extract content command
   - version: 6.1.5
     date: 2025-09-30
     changes: Add demo gif
@@ -42,6 +45,10 @@ Extension link: [https://marketplace.visualstudio.com/items?itemName=Intlayer.in
 
 ## Features
 
+![Extract content](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Extract Content** – Extract content from your React / Vue / Svelte components
+
 ![Fill dictionaries](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
 
 - **Instant Navigation** – Quickly jump to the correct content file when clicking on a `useIntlayer` key.