@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/tr/dictionary/html.md

@@ -33,47 +33,12 @@ history:
 
 Intlayer, sözlükleriniz içinde zengin, yapılandırılmış içerik gömmenize olanak tanıyan HTML içeriğini destekler. Bu içerik, standart HTML etiketleriyle render edilebilir veya çalışma zamanında özel bileşenlerle değiştirilebilir.
 
-## HTML Nasıl Çalışır
-
-Intlayer v8, içerik dizelerinizdeki HTML etiketlerini akıllıca algılar. Eğer bir dize HTML olarak tanımlanırsa (etiketler içeriyorsa), otomatik olarak bir HTML düğümüne dönüştürülür.
-
-<Columns>
-<Column title="v7 davranışı (Manuel sarma)">
-
-```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="v8 davranışı (Otomatik algılama)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Merhaba <strong>Dünya</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## HTML İçeriğini Tanımlama
 
 HTML içeriğini `html` fonksiyonunu kullanarak veya basitçe bir string olarak tanımlayabilirsiniz.
 
 <Tabs>
-  <Tab label="Elle Sarma">
+  <Tab label="Elle Sarma" value="manual-wrapping">
     HTML içeriğini açıkça bildirmek için `html` fonksiyonunu kullanın. Bu, otomatik algılama devre dışı olsa bile standart etiketlerin doğru şekilde eşlenmesini sağlar.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -90,7 +55,7 @@ HTML içeriğini `html` fonksiyonunu kullanarak veya basitçe bir string olarak
     ```
 
   </Tab>
-  <Tab label="Otomatik Algılama">
+  <Tab label="Otomatik Algılama" value="automatic-detection">
     Dize yaygın HTML etiketleri içeriyorsa (ör. `<p>`, `<div>`, `<strong>` vb.), Intlayer bunu otomatik olarak dönüştürür.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -103,7 +68,7 @@ HTML içeriğini `html` fonksiyonunu kullanarak veya basitçe bir string olarak
     ```
 
   </Tab>
-  <Tab label="Harici Dosyalar">
+  <Tab label="Harici Dosyalar" value="external-files">
     HTML içeriğini dosyalardan içe aktarın. `file()` fonksiyonunun şu anda bir string döndürdüğünü ve eğer etiketler içeriyorsa bunun HTML olarak otomatik algılanacağını unutmayın.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -124,6 +89,30 @@ HTML içeriğini `html` fonksiyonunu kullanarak veya basitçe bir string olarak
   </Tab>
 </Tabs>
 
+### `html()` Düğümü
+
+`html()` fonksiyonu, Intlayer v8'de sözlüklerinizde HTML içeriğini açıkça tanımlamanıza olanak tanıyan yeni bir özelliktir. Intlayer genellikle HTML içeriğini otomatik olarak algılayabilse de, `html()` fonksiyonunu kullanmak birkaç avantaj sağlar:
+
+- **Tür Güvenliği**: `html()` fonksiyonu, özel bileşenler için beklenen propları tanımlamanıza olanak tanıyarak editörünüzde daha iyi otomatik tamamlama ve tür denetimi sağlar.
+- **Açık Bildirim**: Otomatik algılamayı tetikleyecek standart HTML etiketleri içermese bile bir dizenin her zaman HTML olarak değerlendirilmesini sağlar.
+- **Özel Bileşen Tanımlama**: Özel bileşenleri ve beklenen prop türlerini tanımlamak için `html()` fonksiyonuna ikinci bir argüman geçirebilirsiniz.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='Merhaba'>Dünya</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+Bir HTML düğümü üzerinde `.use()` yöntemini kullanırken, sağladığınız bileşenler `html()` fonksiyonunda sağlanan tanıma (varsa) göre kontrol edilecektir.
+
 ---
 
 ## HTML'i Render Etme
@@ -135,7 +124,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
 `useIntlayer` aracılığıyla içeriğe eriştiğinizde, HTML düğümleri render için zaten hazırlanmıştır.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     HTML düğümleri doğrudan JSX olarak render edilebilir. Standart etiketler otomatik olarak çalışır.
 
     ```tsx fileName="App.tsx"
@@ -157,7 +146,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vue'de, HTML içeriği `component` yerleşik bileşeni kullanılarak render edilebilir.
 
     ```vue fileName="App.vue"
@@ -177,7 +166,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte, HTML düğümlerini string olarak render eder. Bunu render etmek için `{@html}` kullanın.
 
     ```svelte
@@ -190,7 +179,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact, HTML düğümlerini JSX içinde doğrudan destekler.
 
     ```tsx fileName="App.tsx"
@@ -203,7 +192,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid, HTML düğümlerini JSX içinde doğrudan destekler.
 
     ```tsx fileName="App.tsx"
@@ -216,7 +205,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular, HTML içeriğini oluşturmak için `[innerHTML]` direktifini kullanır.
 
     ```typescript fileName="app.component.ts"
@@ -249,7 +238,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
 HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirsiniz. Bu, tüm HTML içeriğinde kullanılabilir olması gereken özel bileşenleri tanımlamak için idealdir.
 
 <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 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -288,7 +277,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -306,7 +295,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -323,7 +312,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -340,7 +329,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -367,7 +356,7 @@ HTML render'lamasını tüm uygulamanız için global olarak yapılandırabilirs
 Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde daha fazla kontrole ihtiyacınız varsa, aşağıdaki araçları kullanın.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` Bileşeni
     Belirli bileşenlerle bir HTML stringini render edin.
 
@@ -403,7 +392,7 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
    
     #### `<HTMLRenderer />` Bileşeni
    
@@ -418,7 +407,7 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
   
     #### `<HTMLRenderer />` Bileşeni
    
@@ -452,7 +441,7 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
    
     #### `<HTMLRenderer />` Bileşeni
    
@@ -483,7 +472,7 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
    
     #### `<HTMLRenderer />` Bileşeni
    
@@ -514,7 +503,7 @@ Ham HTML string'lerini render etmeniz gerekiyorsa veya bileşen eşlemesinde dah
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` Servisi
     Servisi kullanarak bir HTML dizesini oluşturun.
 

package/docs/tr/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer, Markdown sözdizimi kullanılarak tanımlanan zengin metin içeriğini destekler. Bu, bloglar, makaleler ve daha fazlası gibi zengin biçimlendirmeye sahip içeriği kolayca yazmanıza ve sürdürmenize olanak tanır.
 
-## Markdown Nasıl Çalışır
-
-Intlayer v8, içerik dizelerinizdeki Markdown sözdizimini akıllıca algılar. Bir dize Markdown olarak tanımlanırsa, otomatik olarak bir Markdown düğümüne dönüştürülür.
-
-<Columns>
-  <Column title="v7 davranışı (Manuel sarmalama)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## Başlığım \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="v8 davranışı (Otomatik algılama)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // Markdown içeriğinin otomatik olarak algılanmasını etkinleştir - intlayer.config.ts dosyasında küresel olarak ayarlanabilir
-      content: {
-        text: "## Başlığım \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## Bölüm 1: Markdown İçeriğini Tanımlama
 
 Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak (Markdown sözdizimi içeriyorsa) tanımlayabilirsiniz.
 
 <Tabs>
-  <Tab label="Elle Sarma">
+  <Tab label="Elle Sarma" value="manual-wrapping">
     Markdown içeriğini açıkça bildirmek için `md` fonksiyonunu kullanın. Bu, bir dizenin belirgin bir sözdizimi içermese bile Markdown olarak işlenmesini sağlamak istediğinizde yararlıdır.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
     ```
 
   </Tab>
-  <Tab label="Otomatik Algılama">
+  <Tab label="Otomatik Algılama" value="automatic-detection">
     Dize yaygın Markdown göstergelerini (başlıklar, listeler, bağlantılar vb.) içeriyorsa, Intlayer bunu otomatik olarak dönüştürecektir.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -136,7 +100,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
 `useIntlayer` aracılığıyla içeriğe eriştiğinizde, Markdown düğümleri render için zaten hazırlanmıştır.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     Markdown düğümleri doğrudan JSX olarak render edilebilir.
 
     ```tsx fileName="App.tsx"
@@ -157,7 +121,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vue'de, Markdown içeriği `component` yerleşik bileşeni kullanılarak veya doğrudan bir düğüm olarak render edilebilir.
 
     ```vue fileName="App.vue"
@@ -185,7 +149,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact, Markdown düğümlerini JSX içinde doğrudan destekler.
 
     ```tsx fileName="App.tsx"
@@ -198,7 +162,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid, Markdown düğümlerini JSX içinde doğrudan destekler.
 
     ```tsx fileName="App.tsx"
@@ -211,7 +175,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular, Markdown içeriğini oluşturmak için `[innerHTML]` direktifini kullanır.
 
     ```typescript fileName="app.component.ts"
@@ -243,7 +207,7 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
 Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzerinde daha fazla kontrole ihtiyacınız varsa, aşağıdaki araçları kullanın.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### `<MarkdownRenderer />` Bileşeni
 
@@ -281,7 +245,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### `<MarkdownRenderer />` Bileşeni
 
@@ -330,7 +294,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### `<MarkdownRenderer />` Bileşeni
 
     ```tsx
@@ -360,7 +324,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### `<MarkdownRenderer />` Bileşeni
 
     ```tsx
@@ -390,7 +354,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` Servisi
     Servisi kullanarak bir Markdown dizesini oluşturun.
 
@@ -416,7 +380,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
 Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabilirsiniz. Bu, her renderer'a aynı prop'ları geçirme zorunluluğunu ortadan kaldırır.
 
 <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 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -481,7 +445,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/tr/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:
 
 Intlayer v8'e hoş geldiniz! Bu sürüm, otomatik içerik algılama ile geliştirici deneyimini iyileştirmeye, şema doğrulaması ile veri bütünlüğünü sağlamaya ve sözlük yönetimi üzerinde daha fazla kontrol sunmaya odaklanıyor.
 
+<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"
+/>
+
 ## İçindekiler
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ Svelte'deki Markdown ve HTML içerikleri artık stringleştirildiklerinde otomat
 
 ### Yapılandırma Değişiklikleri
 
-- **`live` özelliği**: Sözlüklerdeki `live` özelliği kullanımdan kaldırıldı. Bunun yerine `importMode: 'fetch'` kullanın.
-- **Birleşik Zengin İçerik API'si**: Yeni `.use()` yöntemi artık hem Markdown hem de HTML geçersiz kılmaları için kullanılıyor ve tüm zengin içerik türlerinde tutarlı bir API sağlıyor.
+- **`live` özelliği**: Sözlüklerdeki `live` özelliği kaldırıldı. Bunun yerine `importMode: 'fetch'` kullanın.
+- **importMode**: Yapılandırmadaki `build.importMode` özelliği kullanımdan kaldırıldı. Bunun yerine `dictionary.importMode` kullanın.
 - **`contentDir` ve `codeDir`**: `contentDir` artık özellikle içerik dosyaları içindir. Kod dönüşümü için yeni bir `codeDir` özelliği eklendi. Eğer `codeDir` ayarlanmazsa, Intlayer `contentDir`'e geri dönecek ve bir uyarı kaydedecektir.
 - **Şema Doğrulama**: Yeni `schema` özelliğini kullanmak için projenize `zod`'un yüklü olduğundan emin olun.
 

package/docs/uk/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.
@@ -69,6 +72,7 @@ import {
   cond,
   nest,
   md,
+  html,
   insert,
   file,
   type Dictionary,
@@ -87,6 +91,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -132,6 +137,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# Приклад Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * Доступно лише при використанні `react-intlayer` або `next-intlayer`
@@ -142,7 +148,7 @@ export default {
 ```
 
 ```javascript fileName="src/example.content.mjx" contentDeclarationFormat="esm"
-import { t, enu, cond, nest, md, insert, file } from "intlayer";
+import { t, enu, cond, nest, md, html, insert, file } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
 export default {
@@ -182,6 +188,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())
 
@@ -192,7 +199,7 @@ export default {
 ```
 
 ```javascript fileName="src/example.content.cjx" contentDeclarationFormat="commonjs"
-const { t, enu, cond, nest, md, insert, file } = require("intlayer");
+const { t, enu, cond, nest, md, html, insert, file } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
 module.exports = {
@@ -294,6 +301,10 @@ module.exports = {
       "nodeType": "markdown",
       "markdown": "# Приклад Markdown",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -328,6 +339,7 @@ Intlayer підтримує різні типи контенту через ти
 - **Контент перелічення**: Контент, який змінюється залежно від переліку значень [див. Контент перелічення](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/enumeration_content.md)
 - **Вставний контент**: Контент, який можна вставити в інший контент [див. Вставний контент](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/insertion_content.md)
 - **Markdown-контент**: Багатий текстовий контент у форматі Markdown [див. Markdown-контент](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/markdown_content.md)
+- **HTML-вміст**: Багатий HTML-вміст з опційними власними компонентами [див. HTML-вміст](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/html.md)
 - **Вкладений вміст**: Посилання на інші словники [див. Вкладений вміст](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/nested_content.md)
 - **Гендерний вміст**: Вміст, що змінюється залежно від статі [див. Гендерний вміст](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/gender_content.md)
 - **Вміст файлу**: Посилання на зовнішні файли [див. Вміст файлу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/file_content.md)
@@ -706,6 +718,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")),
+  uk: html(file("./content.uk.html")),
+});
+```
+
 ### Гендерний вміст (`gender`)
 
 Вміст, що змінюється залежно від гендеру: