@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/it/dictionary/html.md

@@ -33,47 +33,12 @@ history:
 
 Intlayer supporta contenuti HTML, permettendoti di incorporare contenuti ricchi e strutturati all'interno dei tuoi dizionari. Questi contenuti possono essere renderizzati con tag HTML standard o sostituiti con componenti personalizzati a runtime.
 
-## Come funziona l'HTML
-
-Intlayer v8 rileva in modo intelligente i tag HTML nelle tue stringhe di contenuto. Se una stringa è identificata come HTML (contiene tag), viene automaticamente trasformata in un nodo HTML.
-
-<Columns>
-<Column title="Comportamento v7 (Avvolgimento manuale)">
-
-```typescript fileName="htmlDictionary.content.ts"
-import { html } from "intlayer";
-
-export default {
-  key: "app",
-  content: {
-    text: html("<p>Ciao <strong>Mondo</strong></p>"),
-  },
-};
-```
-
-</Column>
-<Column title="Comportamento v8 (Rilevamento automatico)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Ciao <strong>Mondo</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## Dichiarare contenuti HTML
 
 Puoi dichiarare contenuti HTML usando la funzione `html` o semplicemente come stringa.
 
 <Tabs>
-  <Tab label="Avvolgimento manuale">
+  <Tab label="Avvolgimento manuale" value="manual-wrapping">
     Usa la funzione `html` per dichiarare esplicitamente contenuti HTML. Questo garantisce che i tag standard siano mappati correttamente anche se il rilevamento automatico è disabilitato.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -90,7 +55,7 @@ Puoi dichiarare contenuti HTML usando la funzione `html` o semplicemente come st
     ```
 
   </Tab>
-  <Tab label="Rilevamento automatico">
+  <Tab label="Rilevamento automatico" value="automatic-detection">
     Se la stringa contiene tag HTML comuni (ad esempio, `<p>`, `<div>`, `<strong>`, ecc.), Intlayer la trasformerà automaticamente.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -103,7 +68,7 @@ Puoi dichiarare contenuti HTML usando la funzione `html` o semplicemente come st
     ```
 
   </Tab>
-  <Tab label="File esterni">
+  <Tab label="File esterni" value="external-files">
     Importa contenuti HTML da file. Nota che attualmente la funzione `file()` restituisce una stringa, che verrà rilevata automaticamente come HTML se contiene tag.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -124,6 +89,30 @@ Puoi dichiarare contenuti HTML usando la funzione `html` o semplicemente come st
   </Tab>
 </Tabs>
 
+### Il nodo `html()`
+
+La funzione `html()` è una nuova funzionalità di Intlayer v8 che consente di definire esplicitamente il contenuto HTML nei dizionari. Sebbene Intlayer sia spesso in grado di rilevare automaticamente il contenuto HTML, l'uso della funzione `html()` offre diversi vantaggi:
+
+- **Sicurezza dei tipi**: La funzione `html()` consente di definire le prop attese per i componenti personalizzati, offrendo un migliore completamento automatico e controllo dei tipi nel proprio editor.
+- **Dichiarazione esplicita**: Garantisce che una stringa venga sempre trattata come HTML, anche se non contiene tag HTML standard che attiverebbero il rilevamento automatico.
+- **Definizione di componenti personalizzati**: È possibile passare un secondo argomento a `html()` per definire i componenti personalizzati e i tipi di prop attesi.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='Ciao'>Mondo</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+Quando si utilizza il metodo `.use()` su un nodo HTML, i componenti forniti verranno controllati rispetto alla definizione fornita nella funzione `html()` (se disponibile).
+
 ---
 
 ## Rendering dell'HTML
@@ -135,7 +124,7 @@ Il rendering può essere gestito automaticamente dal sistema di contenuti di Int
 Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti per il rendering.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     I nodi HTML possono essere renderizzati direttamente come JSX. I tag standard funzionano automaticamente.
 
     ```tsx fileName="App.tsx"
@@ -157,7 +146,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     In Vue, i contenuti HTML possono essere renderizzati usando il built-in `component`.
 
     ```vue fileName="App.vue"
@@ -177,7 +166,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte rende i nodi HTML come stringhe. Usa `{@html}` per renderizzarli.
 
     ```svelte
@@ -190,7 +179,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact supporta i nodi HTML direttamente nel JSX.
 
     ```tsx fileName="App.tsx"
@@ -203,7 +192,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid supporta i nodi HTML direttamente nel JSX.
 
     ```tsx fileName="App.tsx"
@@ -216,7 +205,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular utilizza la direttiva `[innerHTML]` per renderizzare contenuti HTML.
 
     ```typescript fileName="app.component.ts"
@@ -249,7 +238,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi HTML sono già pronti p
 Puoi configurare il rendering HTML a livello globale per l'intera applicazione. Questo è ideale per definire componenti personalizzati che dovrebbero essere disponibili in tutti i contenuti 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";
@@ -267,7 +256,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -288,7 +277,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -306,7 +295,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -323,7 +312,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -340,7 +329,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -367,7 +356,7 @@ Puoi configurare il rendering HTML a livello globale per l'intera applicazione.
 Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### Componente `<HTMLRenderer />`
     Esegui il rendering di una stringa HTML con componenti specifici.
 
@@ -404,7 +393,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### Componente `<HTMLRenderer />`
    
@@ -419,7 +408,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### Componente `<HTMLRenderer />`
    
@@ -453,7 +442,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### Componente `<HTMLRenderer />`
    
@@ -484,7 +473,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### Componente `<HTMLRenderer />`
    
@@ -515,7 +504,7 @@ Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo magg
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Servizio `IntlayerMarkdownService`
     Renderizza una stringa HTML utilizzando il servizio.
 

package/docs/it/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer supporta contenuti rich text definiti utilizzando la sintassi Markdown. Questo ti consente di scrivere e mantenere facilmente contenuti con formattazione ricca, come blog, articoli e altro.
 
-## Come funziona Markdown
-
-Intlayer v8 rileva in modo intelligente la sintassi Markdown nelle tue stringhe di contenuto. Se una stringa viene identificata come Markdown, viene automaticamente trasformata in un nodo Markdown.
-
-<Columns>
-  <Column title="Comportamento v7 (Avvolgimento manuale)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## Il mio titolo \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="Comportamento v8 (Rilevamento automatico)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // Abilita il rilevamento automatico del contenuto Markdown - Può essere impostato globalmente in intlayer.config.ts
-      content: {
-        text: "## Il mio titolo \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## Parte 1: Dichiarare contenuti Markdown
 
 Puoi dichiarare contenuti Markdown usando la funzione `md` o semplicemente come stringa (se contiene sintassi Markdown).
 
 <Tabs>
-  <Tab label="Avvolgimento manuale">
+  <Tab label="Avvolgimento manuale" value="manual-wrapping">
     Usa la funzione `md` per dichiarare esplicitamente contenuti Markdown. Questo è utile se vuoi assicurarti che una stringa sia trattata come Markdown anche se non contiene sintassi ovvia.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Puoi dichiarare contenuti Markdown usando la funzione `md` o semplicemente come
     ```
 
   </Tab>
-  <Tab label="Rilevamento automatico">
+  <Tab label="Rilevamento automatico" value="automatic-detection">
     Se la stringa contiene indicatori Markdown comuni (come intestazioni, elenchi, collegamenti, ecc.), Intlayer la trasformerà automaticamente.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Puoi dichiarare contenuti Markdown usando la funzione `md` o semplicemente come
     ```
 
   </Tab>
-  <Tab label="File esterni">
+  <Tab label="File esterni" value="external-files">
     Importa file `.md` direttamente usando la funzione `file`.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -136,7 +100,7 @@ Il rendering può essere gestito automaticamente dal sistema di contenuti di Int
 Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pronti per il rendering.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     I nodi Markdown possono essere renderizzati direttamente come JSX.
 
     ```tsx fileName="App.tsx"
@@ -157,7 +121,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     In Vue, il contenuto Markdown può essere renderizzato utilizzando il built-in `component` o direttamente come nodo.
 
     ```vue fileName="App.vue"
@@ -172,7 +136,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte renderizza Markdown come una stringa HTML per impostazione predefinita. Usa `{@html}` per renderizzarlo.
 
     ```svelte
@@ -185,7 +149,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact supporta i nodi Markdown direttamente nel JSX.
 
     ```tsx fileName="App.tsx"
@@ -198,7 +162,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid supporta i nodi Markdown direttamente nel JSX.
 
     ```tsx fileName="App.tsx"
@@ -211,7 +175,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular utilizza la direttiva `[innerHTML]` per renderizzare il contenuto Markdown.
 
     ```typescript fileName="app.component.ts"
@@ -243,7 +207,7 @@ Quando accedi al contenuto tramite `useIntlayer`, i nodi Markdown sono già pron
 Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore controllo sul processo di rendering, usa i seguenti strumenti.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### Componente `<MarkdownRenderer />`
 
@@ -282,7 +246,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### Componente `<MarkdownRenderer />`
 
@@ -297,7 +261,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### Componente `<MarkdownRenderer />`
 
@@ -331,7 +295,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### Componente `<MarkdownRenderer />`
 
     ```tsx
@@ -361,7 +325,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### Componente `<MarkdownRenderer />`
 
     ```tsx
@@ -391,7 +355,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### Servizio `IntlayerMarkdownService`
     Renderizza una stringa Markdown utilizzando il servizio.
 
@@ -417,7 +381,7 @@ Se hai bisogno di renderizzare stringhe Markdown grezze o di avere un maggiore c
 Puoi configurare il rendering Markdown a livello globale per l'intera applicazione. Questo evita di passare le stesse prop a ogni renderer.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "react-intlayer";
@@ -437,7 +401,7 @@ Puoi configurare il rendering Markdown a livello globale per l'intera applicazio
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -462,7 +426,7 @@ Puoi configurare il rendering Markdown a livello globale per l'intera applicazio
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -482,7 +446,7 @@ Puoi configurare il rendering Markdown a livello globale per l'intera applicazio
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -501,7 +465,7 @@ Puoi configurare il rendering Markdown a livello globale per l'intera applicazio
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -520,7 +484,7 @@ Puoi configurare il rendering Markdown a livello globale per l'intera applicazio
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/it/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:
 
 Benvenuti in Intlayer v8! Questa release si concentra sul miglioramento della Developer Experience con il rilevamento automatico dei contenuti, sull'assicurare l'integrità dei dati tramite la validazione degli schemi e sul fornire un maggior controllo nella gestione dei dizionari.
 
+<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"
+/>
+
 ## Indice
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ Il contenuto Markdown e HTML in Svelte ora viene automaticamente convertito in H
 
 ### Modifiche alla configurazione
 
-- **Proprietà `live`**: La proprietà `live` nei dizionari è deprecata. Usa `importMode: 'fetch'` al suo posto.
-- **API unificata per contenuti avanzati**: Il nuovo metodo `.use()` viene ora utilizzato sia per gli override Markdown che per quelli HTML, fornendo un'API coerente per tutti i tipi di contenuti avanzati.
+- **Proprietà `live`**: La proprietà `live` nei dizionari è stata rimossa. Usa `importMode: 'fetch'` al suo posto.
+- **importMode**: La proprietà `build.importMode` nella configurazione è stata deprecata. Usa `dictionary.importMode` al suo posto.
 - **`contentDir` e `codeDir`**: `contentDir` è ora specificamente per i file di contenuto. È stata aggiunta una nuova proprietà `codeDir` per la trasformazione del codice. Se `codeDir` non è impostato, Intlayer farà fallback su `contentDir` e registrerà un warning.
 - **Validazione dello schema**: Per usare la nuova funzionalità `schema`, assicurati di avere `zod` installato nel tuo progetto.
 

package/docs/ja/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: コンテンツファイル
 description: コンテンツ宣言ファイルの拡張機能をカスタマイズする方法を学びます。このドキュメントに従って、プロジェクトで効率的に条件を実装しましょう。
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: `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;
@@ -126,6 +130,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# マークダウンの例"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * `react-intlayer` または `next-intlayer` を使用する場合のみ利用可能
@@ -176,6 +181,7 @@ export default {
       "login.button" // [オプション] ネストするコンテンツのパス
     ),
     markdownContent: md("# Markdownの例"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -226,6 +232,7 @@ module.exports = {
       "login.button" // [オプション] ネストするコンテンツのパス
     ),
     markdownContent: md("# マークダウンの例"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json())
 
@@ -287,6 +294,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# マークダウンの例",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -321,6 +332,7 @@ Intlayerは型付きノードを通じて様々なコンテンツタイプをサ
 - **列挙コンテンツ**: 列挙値に基づいて変化するコンテンツ [列挙コンテンツを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/enumeration_content.md)
 - **挿入コンテンツ**: 他のコンテンツに挿入可能なコンテンツ [挿入コンテンツを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/insertion_content.md)
 - **Markdown Content**: Markdown形式のリッチテキストコンテンツ [Markdown Contentを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/markdown_content.md)
+- **HTML Content**: オプションのカスタムコンポーネントを使用したリッチHTMLコンテンツ [HTML Contentを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/html.md)
 - **Nested Content**: 他の辞書への参照 [Nested Contentを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/nested_content.md)
 - **Gender Content**: 性別に応じて変わるコンテンツ [Gender Contentを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/gender_content.md)
 - **File Content**: 外部ファイルへの参照 [File Contentを参照](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/file_content.md)
@@ -693,6 +705,23 @@ markdownContent: md(
 );
 ```
 
+### HTMLコンテンツ (`html`)
+
+標準タグまたはカスタムコンポーネントを使用できるリッチHTMLコンテンツ：
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// インラインHTML
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// 外部ファイルからのロケール別HTML
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  ja: html(file("./content.ja.html")),
+});
+```
+
 ### ジェンダーコンテンツ (`gender`)
 
 ジェンダーに基づいて変化するコンテンツ: