@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/es/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 Intlayer admite contenido HTML, lo que permite incrustar contenido enriquecido y estructurado dentro de los diccionarios. Este contenido se puede renderizar con etiquetas HTML estándar o reemplazarse por componentes personalizados en tiempo de ejecución.
 
-## Cómo funciona el HTML
-
-Intlayer v8 detecta inteligentemente las etiquetas HTML en las cadenas de contenido. Si una cadena se identifica como HTML (contiene etiquetas), se transforma automáticamente en un nodo HTML.
-
-<Columns>
-<Column title="Comportamiento v7 (Envoltura manual)">
-
-```typescript fileName="htmlDictionary.content.ts"
-import { html } from "intlayer";
-
-export default {
-  key: "app",
-  content: {
-    text: html("<p>Hello <strong>World</strong></p>"),
-  },
-};
-```
-
-</Column>
-<Column title="Comportamiento v8 (Detección automática)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Hello <strong>World</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## Declarar contenido HTML
 
 Puedes declarar contenido HTML mediante la función `html` o simplemente como una cadena de texto.
 
 <Tabs>
-  <Tab label="Envoltura Manual">
+  <Tab label="Envoltura Manual" value="manual-wrapping">
     Utiliza la función `html` para declarar explícitamente contenido HTML. Esto garantiza que las etiquetas estándar se mapeen correctamente incluso si la detección automática está desactivada.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ Puedes declarar contenido HTML mediante la función `html` o simplemente como un
     ```
 
   </Tab>
-  <Tab label="Detección Automática">
+  <Tab label="Detección Automática" value="automatic-detection">
     Si la cadena contiene etiquetas HTML comunes (por ejemplo, `<p>`, `<div>`, `<strong>`, etc.), Intlayer la transformará automáticamente.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ Puedes declarar contenido HTML mediante la función `html` o simplemente como un
     ```
 
   </Tab>
-  <Tab label="Archivos Externos">
+  <Tab label="Archivos Externos" value="external-files">
     Importa contenido HTML desde archivos. Ten en cuenta que actualmente la función `file()` devuelve una cadena, que se detectará automáticamente como HTML si contiene etiquetas.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -121,6 +86,30 @@ Puedes declarar contenido HTML mediante la función `html` o simplemente como un
   </Tab>
 </Tabs>
 
+### El nodo `html()`
+
+La función `html()` es una nueva característica en Intlayer v8 que le permite definir explícitamente contenido HTML en sus diccionarios. Aunque Intlayer a menudo puede detectar automáticamente el contenido HTML, el uso de la función `html()` ofrece varias ventajas:
+
+- **Seguridad de Tipos**: La función `html()` le permite definir las props esperadas para los componentes personalizados, lo que proporciona un mejor autocompletado y comprobación de tipos en su editor.
+- **Declaración Explícita**: Garantiza que una cadena siempre se trate como HTML, incluso si no contiene etiquetas HTML estándar que activarían la detección automática.
+- **Definición de Componentes Personalizados**: Puede pasar un segundo argumento a `html()` para definir los componentes personalizados y sus tipos de props esperados.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='Hola'>Mundo</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+Al utilizar el método `.use()` en un nodo HTML, los componentes que proporcione se cotejarán con la definición proporcionada en la función `html()` (si está disponible).
+
 ---
 
 ## Renderizado de HTML
@@ -132,7 +121,7 @@ El renderizado puede ser gestionado automáticamente por el sistema de contenido
 Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están preparados para el renderizado.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     Los nodos HTML se pueden renderizar directamente como JSX. Las etiquetas estándar funcionan automáticamente.
 
     ```tsx fileName="App.tsx"
@@ -154,7 +143,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     En Vue, el contenido HTML se puede renderizar mediante el componente integrado `component`.
 
     ```vue fileName="App.vue"
@@ -174,7 +163,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte renderiza los nodos HTML como cadenas de texto. Utiliza `{@html}` para renderizarlo.
 
     ```svelte
@@ -187,7 +176,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact admite nodos HTML directamente en el JSX.
 
     ```tsx fileName="App.tsx"
@@ -200,7 +189,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid admite nodos HTML directamente en el JSX.
 
     ```tsx fileName="App.tsx"
@@ -213,7 +202,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular utiliza la directiva `[innerHTML]` para renderizar contenido HTML.
 
     ```typescript fileName="app.component.ts"
@@ -246,7 +235,7 @@ Cuando accedes al contenido a través de `useIntlayer`, los nodos HTML ya están
 Puedes configurar el renderizado de HTML de forma global para toda tu aplicación. Esto es ideal para definir componentes personalizados que deben estar disponibles en todo el contenido HTML.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "react-intlayer";
@@ -264,7 +253,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -285,7 +274,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -303,7 +292,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -320,7 +309,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -337,7 +326,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -364,7 +353,7 @@ Puedes configurar el renderizado de HTML de forma global para toda tu aplicació
 Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre el mapeo de componentes, utiliza las siguientes herramientas.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### Componente `<HTMLRenderer />`
     Renderiza una cadena HTML con componentes específicos.
 
@@ -401,7 +390,7 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### Componente `<HTMLRenderer />`
    
@@ -416,7 +405,7 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### Componente `<HTMLRenderer />`
    
@@ -450,7 +439,7 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### Componente `<HTMLRenderer />`
    
@@ -481,7 +470,7 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### Componente `<HTMLRenderer />`
    
@@ -512,7 +501,7 @@ Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Servicio `IntlayerMarkdownService`
     Renderiza una cadena HTML utilizando el servicio.
 

package/docs/es/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer admite contenido de texto enriquecido definido mediante la sintaxis Markdown. Esto le permite escribir y mantener fácilmente contenido con un formato enriquecido, como blogs, artículos y más.
 
-## Cómo funciona Markdown
-
-Intlayer v8 detecta inteligentemente la sintaxis Markdown en sus cadenas de contenido. Si una cadena se identifica como Markdown, se transforma automáticamente en un nodo Markdown.
-
-<Columns>
-  <Column title="Comportamiento en v7 (Envoltura manual)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## My title \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="Comportamiento en v8 (Detección automática)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // Habilitar la detección automática de contenido Markdown - Se puede configurar globalmente en intlayer.config.ts
-      content: {
-        text: "## My title \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## Parte 1: Declarar Contenido Markdown
 
 Puede declarar contenido Markdown mediante la función `md` o simplemente como una cadena (si contiene sintaxis Markdown).
 
 <Tabs>
-  <Tab label="Envoltura Manual">
+  <Tab label="Envoltura Manual" value="manual-wrapping">
     Utilice la función `md` para declarar explícitamente contenido Markdown. Esto es útil si desea asegurarse de que una cadena se trate como Markdown incluso si no contiene una sintaxis obvia.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Puede declarar contenido Markdown mediante la función `md` o simplemente como u
     ```
 
   </Tab>
-  <Tab label="Detección Automática">
+  <Tab label="Detección Automática" value="automatic-detection">
     Si la cadena contiene indicadores comunes de Markdown (como encabezados, listas, enlaces, etc.), Intlayer la transformará automáticamente.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Puede declarar contenido Markdown mediante la función `md` o simplemente como u
     ```
 
   </Tab>
-  <Tab label="Archivos Externos">
+  <Tab label="Archivos Externos" value="external-files">
     Importe archivos `.md` directamente mediante la función `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -135,7 +99,7 @@ El renderizado puede ser gestionado automáticamente por el sistema de contenido
 Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya están preparados para el renderizado.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     Los nodos Markdown se pueden renderizar directamente como JSX.
 
     ```tsx fileName="App.tsx"
@@ -156,7 +120,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     En Vue, el contenido Markdown se puede renderizar mediante el componente integrado `component` o directamente como un nodo.
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte renderiza Markdown como una cadena HTML por defecto. Utilice `{@html}` para renderizarlo.
 
     ```svelte
@@ -184,7 +148,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact admite nodos Markdown directamente en el JSX.
 
     ```tsx fileName="App.tsx"
@@ -197,7 +161,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid admite nodos Markdown directamente en el JSX.
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular utiliza la directiva `[innerHTML]` para renderizar contenido Markdown.
 
     ```typescript fileName="app.component.ts"
@@ -242,7 +206,7 @@ Cuando accede al contenido a través de `useIntlayer`, los nodos Markdown ya est
 Si necesita renderizar cadenas de Markdown sin procesar o tener más control sobre el proceso de renderizado, utilice las siguientes herramientas.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### Componente `<MarkdownRenderer />`
 
@@ -281,7 +245,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### Componente `<MarkdownRenderer />`
 
@@ -296,7 +260,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### Componente `<MarkdownRenderer />`
 
@@ -330,7 +294,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### Componente `<MarkdownRenderer />`
 
     ```tsx
@@ -360,7 +324,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### Componente `<MarkdownRenderer />`
 
     ```tsx
@@ -390,7 +354,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Servicio `IntlayerMarkdownService`
     Renderiza una cadena Markdown mediante el servicio.
 
@@ -416,7 +380,7 @@ Si necesita renderizar cadenas de Markdown sin procesar o tener más control sob
 Puede configurar el renderizado de Markdown de forma global para toda su aplicación. Esto evita pasar las mismas props a cada renderizador.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer";
@@ -436,7 +400,7 @@ Puede configurar el renderizado de Markdown de forma global para toda su aplicac
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ Puede configurar el renderizado de Markdown de forma global para toda su aplicac
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ Puede configurar el renderizado de Markdown de forma global para toda su aplicac
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ Puede configurar el renderizado de Markdown de forma global para toda su aplicac
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ Puede configurar el renderizado de Markdown de forma global para toda su aplicac
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/es/releases/v8.md

@@ -12,6 +12,7 @@ keywords:
   - Next.js
   - JavaScript
   - TypeScript
+youtubeVideo: https://www.youtube.com/watch?v=ia6JmVf-kkU
 slugs:
   - doc
   - releases
@@ -22,6 +23,14 @@ slugs:
 
 ¡Bienvenido a Intlayer v8! Esta versión se centra en mejorar la experiencia del desarrollador con la detección automática de contenido, garantizar la integridad de los datos con la validación de esquemas y proporcionar más control sobre la gestión de diccionarios.
 
+<iframe
+  src="https://www.youtube.com/embed/ia6JmVf-kkU"
+  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 v8 - What's new?"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## Tabla de contenidos
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ El contenido Markdown y HTML en Svelte ahora se analiza automáticamente a HTML
 
 ### Cambios en la configuración
 
-- **Propiedad `live`**: La propiedad `live` en los diccionarios está obsoleta. Use `importMode: 'fetch'` en su lugar.
-- **API unificada de contenido enriquecido**: El nuevo método `.use()` se utiliza ahora tanto para las sobreescrituras de Markdown como de HTML, proporcionando una API consistente a través de todos los tipos de contenido enriquecido.
+- **Propiedad `live`**: La propiedad `live` en los diccionarios ha sido eliminada. Use `importMode: 'fetch'` en su lugar.
+- **importMode**: La propiedad `build.importMode` en la configuración ha sido obsoleta. Use `dictionary.importMode` en su lugar.
 - **`contentDir` y `codeDir`**: `contentDir` ahora es específicamente para archivos de contenido. Se ha añadido una nueva propiedad `codeDir` para la transformación del código. Si `codeDir` no está configurado, Intlayer recurrirá a `contentDir` y registrará una advertencia.
 - **Validación del esquema**: Para utilizar la nueva función `schema`, asegúrese de tener `zod` instalado en su proyecto.
 

package/docs/fr/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: Fichier de Contenu
 description: Apprenez à personnaliser les extensions pour vos fichiers de déclaration de contenu. Suivez cette documentation pour implémenter efficacement des conditions dans votre projet.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: Ajout du type de nœud de contenu `html`
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -81,6 +84,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -125,6 +129,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# Exemple Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * Disponible uniquement avec `react-intlayer` ou `next-intlayer`
@@ -174,6 +179,7 @@ export default {
       "login.button" // [Optionnel] Le chemin vers le contenu à imbriquer
     ),
     markdownContent: md("# Exemple Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -223,6 +229,7 @@ module.exports = {
       "login.button" // [Optionnel] Le chemin vers le contenu à imbriquer
     ),
     markdownContent: md("# Exemple Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -284,6 +291,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# Exemple de Markdown",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -318,6 +329,7 @@ Intlayer prend en charge divers types de contenu via des nœuds typés :
 - **Contenu d'énumération** : Contenu qui varie en fonction de valeurs énumérées [voir Contenu d'énumération](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/enumeration_content.md)
 - **Contenu d'insertion** : Contenu pouvant être inséré dans un autre contenu [voir Contenu d'insertion](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/insertion_content.md)
 - **Contenu Markdown** : Contenu en texte enrichi au format Markdown [voir Contenu Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/markdown_content.md)
+- **Contenu HTML** : Contenu HTML riche avec des composants personnalisés optionnels [voir Contenu HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/html.md)
 - **Contenu Imbriqué** : Références à d’autres dictionnaires [voir Contenu Imbriqué](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/nested_content.md)
 - **Contenu Genré** : Contenu qui varie selon le genre [voir Contenu Genré](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/gender_content.md)
 - **Contenu Fichier** : Références à des fichiers externes [voir Contenu Fichier](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/file_content.md)
@@ -683,6 +695,23 @@ markdownContent: md(
 );
 ```
 
+### Contenu HTML (`html`)
+
+Contenu HTML riche pouvant utiliser des balises standard ou des composants personnalisés :
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// HTML en ligne
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// HTML par locale à partir de fichiers externes
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  fr: html(file("./content.fr.html")),
+});
+```
+
 ### Contenu selon le genre (`gender`)
 
 Contenu qui varie selon le genre :