@intlayer/docs 8.0.0-canary.6 → 8.0.0

package/docs/ko/dictionary/html.md

@@ -31,47 +31,12 @@ history:
 
 Intlayer는 HTML 콘텐츠를 지원하여 사전(dictionary) 내에 풍부하고 구조화된 콘텐츠를 포함할 수 있습니다. 이 콘텐츠는 표준 HTML 태그로 렌더링되거나 런타임에 커스텀 컴포넌트로 교체될 수 있습니다.
 
-## HTML 작동 방식
-
-Intlayer v8는 콘텐츠 문자열에서 HTML 태그를 지능적으로 감지합니다. 문자열이 HTML(태그를 포함하는 것으로)로 식별되면 자동으로 HTML 노드로 변환됩니다.
-
-<Columns>
-<Column title="v7 동작(수동 래핑)">
-
-```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 동작(자동 감지)">
-
-```typescript fileName="htmlDictionary.content.ts"
-export default {
-  key: "app",
-  content: {
-    text: "<p>Hello <strong>World</strong></p>",
-  },
-};
-```
-
-</Column>
-</Columns>
-
----
-
 ## HTML 콘텐츠 선언
 
 HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할 수 있습니다.
 
 <Tabs>
-  <Tab label="수동 래핑">
+  <Tab label="수동 래핑" value="manual-wrapping">
     HTML 콘텐츠를 명시적으로 선언하려면 `html` 함수를 사용하세요. 자동 감지가 비활성화된 경우에도 표준 태그가 올바르게 매핑되도록 보장합니다.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -88,7 +53,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="자동 감지">
+  <Tab label="자동 감지" value="automatic-detection">
     문자열에 일반적인 HTML 태그(예: `<p>`, `<div>`, `<strong>` 등)가 포함되어 있으면 Intlayer가 자동으로 변환합니다.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -101,7 +66,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="외부 파일">
+  <Tab label="외부 파일" value="external-files">
     파일에서 HTML 콘텐츠를 가져옵니다. 현재 `file()` 함수는 문자열을 반환하며, 해당 문자열에 태그가 포함된 경우 HTML로 자동 감지됩니다.
 
     ```typescript fileName="htmlDictionary.content.ts"
@@ -121,6 +86,30 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
   </Tab>
 </Tabs>
 
+### `html()` 노드
+
+`html()` 함수는 Intlayer v8의 새로운 기능으로, 사전에서 HTML 콘텐츠를 명시적으로 정의할 수 있게 해줍니다. Intlayer는 종종 HTML 콘텐츠를 자동으로 감지할 수 있지만, `html()` 함수를 사용하면 다음과 같은 몇 가지 장점이 있습니다:
+
+- **타입 안전성**: `html()` 함수를 사용하면 커스텀 컴포넌트에 필요한 props를 정의할 수 있어, 에디터에서 더 나은 자동 완성 및 타입 체크를 제공합니다.
+- **명시적 선언**: 자동 감지를 트리거하는 표준 HTML 태그가 포함되어 있지 않더라도 문자열이 항상 HTML로 처리되도록 보장합니다.
+- **커스텀 컴포넌트 정의**: `html()`의 두 번째 인자로 커스텀 컴포넌트와 예상되는 prop 타입을 정의하여 전달할 수 있습니다.
+
+```typescript
+import { html } from "intlayer";
+
+const myContent = html(
+  "<MyCustomComponent title='안녕하세요'>세계</MyCustomComponent>",
+  {
+    MyCustomComponent: {
+      title: "string",
+      children: "node",
+    },
+  }
+);
+```
+
+HTML 노드에서 `.use()` 메서드를 사용할 때, 제공하는 컴포넌트는 `html()` 함수에 제공된 정의(사용 가능한 경우)에 따라 확인됩니다.
+
 ---
 
 ## HTML 렌더링
@@ -132,7 +121,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
 `useIntlayer`로 콘텐츠에 접근하면 HTML 노드는 이미 렌더링 준비가 되어 있습니다.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     HTML 노드는 JSX로 직접 렌더링할 수 있습니다. 표준 태그는 자동으로 작동합니다.
 
     ```tsx fileName="App.tsx"
@@ -154,7 +143,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vue에서는 HTML 콘텐츠를 내장된 `component`를 사용하여 렌더링할 수 있습니다.
 
     ```vue fileName="App.vue"
@@ -174,7 +163,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte는 HTML 노드를 문자열로 렌더링합니다. 이를 렌더링하려면 `{@html}`을 사용하세요.
 
     ```svelte
@@ -187,7 +176,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact는 JSX에서 HTML 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
@@ -200,7 +189,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid는 JSX에서 HTML 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
@@ -213,7 +202,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular는 HTML 콘텐츠를 렌더링하기 위해 `[innerHTML]` 디렉티브를 사용합니다.
 
     ```typescript fileName="app.component.ts"
@@ -246,7 +235,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
 애플리케이션 전체에 대해 HTML 렌더링을 전역으로 구성할 수 있습니다. 이는 모든 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 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
@@ -285,7 +274,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -303,7 +292,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "preact-intlayer";
@@ -320,7 +309,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { HTMLProvider } from "solid-intlayer";
@@ -337,7 +326,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";
@@ -364,7 +353,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
 원시 HTML 문자열을 렌더링하거나 컴포넌트 매핑을 더 세밀하게 제어해야 하는 경우, 다음 도구들을 사용하세요.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     #### `<HTMLRenderer />` 컴포넌트
     특정 컴포넌트로 HTML 문자열을 렌더링합니다.
 
@@ -401,7 +390,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### `<HTMLRenderer />` 컴포넌트
 
@@ -416,7 +405,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### `<HTMLRenderer />` 컴포넌트
 
@@ -450,7 +439,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     #### `<HTMLRenderer />` 컴포넌트
 
@@ -481,7 +470,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     #### `<HTMLRenderer />` 컴포넌트
 
@@ -512,7 +501,7 @@ HTML 콘텐츠는 `html` 함수를 사용하거나 단순 문자열로 선언할
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` 서비스
     서비스를 사용하여 HTML 문자열을 렌더링합니다.
 

package/docs/ko/dictionary/markdown.md

@@ -32,48 +32,12 @@ history:
 
 Intlayer는 마크다운 문법을 사용하여 정의된 리치 텍스트 콘텐츠를 지원합니다. 이를 통해 블로그, 기사 등과 같은 리치 포맷의 콘텐츠를 쉽게 작성하고 관리할 수 있습니다.
 
-## 마크다운 작동 방식
-
-Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로 감지합니다. 문자열이 마크다운으로 식별되면 자동으로 마크다운 노드로 변환됩니다.
-
-<Columns>
-  <Column title="v7 동작 (수동 래핑)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    import { md } from "intlayer";
-
-    export default {
-      key: "app",
-      content: {
-        text: md("## My title \n\nLorem Ipsum"),
-      },
-    };
-    ```
-
-  </Column>
-  <Column title="v8 동작 (자동 감지)">
-
-    ```typescript fileName="markdownDictionary.content.ts"
-    export default {
-      key: "app",
-      contentAutoTransformation: true, // 마크다운 콘텐츠 자동 감지 활성화 - intlayer.config.ts에서 전역 설정 가능
-      content: {
-        text: "## My title \n\nLorem Ipsum",
-      },
-    };
-    ```
-
-  </Column>
-</Columns>
-
----
-
 ## 파트 1: 마크다운 콘텐츠 선언
 
 마크다운 콘텐츠는 `md` 함수를 사용하거나 (마크다운 문법을 포함하는 경우) 단순히 문자열로 선언할 수 있습니다.
 
 <Tabs>
-  <Tab label="수동 래핑">
+  <Tab label="수동 래핑" value="manual-wrapping">
     마크다운 콘텐츠를 명시적으로 선언하려면 `md` 함수를 사용하세요. 명백한 문법이 포함되어 있지 않더라도 문자열이 마크다운으로 처리되도록 보장하고 싶을 때 유용합니다.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -90,7 +54,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="자동 감지">
+  <Tab label="자동 감지" value="automatic-detection">
     문자열에 일반적인 마크다운 표시(예: 헤더, 리스트, 링크 등)가 포함되어 있으면 Intlayer가 자동으로 변환합니다.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -104,7 +68,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="외부 파일">
+  <Tab label="외부 파일" value="external-files">
     `file` 함수를 사용하여 `.md` 파일을 직접 가져옵니다.
 
     ```typescript fileName="markdownDictionary.content.ts"
@@ -135,7 +99,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
 `useIntlayer`로 콘텐츠에 접근하면 마크다운 노드는 이미 렌더링 준비가 되어 있습니다.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
     마크다운 노드는 JSX로 직접 렌더링할 수 있습니다.
 
     ```tsx fileName="App.tsx"
@@ -156,7 +120,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
     Vue에서는 마크다운 콘텐츠를 내장된 `component`를 사용하거나 직접 노드로 렌더링할 수 있습니다.
 
     ```vue fileName="App.vue"
@@ -171,7 +135,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
     Svelte는 기본적으로 마크다운을 HTML 문자열로 렌더링합니다. 이를 렌더링하려면 `{@html}`을 사용하세요.
 
     ```svelte
@@ -184,7 +148,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     Preact는 JSX에서 마크다운 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
@@ -197,7 +161,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     Solid는 JSX에서 마크다운 노드를 직접 지원합니다.
 
     ```tsx fileName="App.tsx"
@@ -210,7 +174,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     Angular는 마크다운 콘텐츠를 렌더링하기 위해 `[innerHTML]` 디렉티브를 사용합니다.
 
     ```typescript fileName="app.component.ts"
@@ -242,7 +206,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
 원시 마크다운 문자열을 렌더링하거나 렌더링 프로세스를 더 세밀하게 제어해야 하는 경우, 다음 도구들을 사용하세요.
 
 <Tabs group="framework">
-  <Tab label="React / Next.js">
+  <Tab label="React / Next.js" value="react">
   
     #### `<MarkdownRenderer />` 컴포넌트
 
@@ -281,7 +245,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     #### `<MarkdownRenderer />` 컴포넌트
 
@@ -296,7 +260,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     #### `<MarkdownRenderer />` 컴포넌트
 
@@ -330,7 +294,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
     #### `<MarkdownRenderer />` 컴포넌트
 
     ```tsx
@@ -360,7 +324,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
     #### `<MarkdownRenderer />` 컴포넌트
 
     ```tsx
@@ -390,7 +354,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
     #### `IntlayerMarkdownService` 서비스
     서비스를 사용하여 마크다운 문자열을 렌더링합니다.
 
@@ -416,7 +380,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
 애플리케이션 전체에 대해 마크다운 렌더링을 전역으로 구성할 수 있습니다. 이를 통해 모든 렌더러에 동일한 프롭을 전달하는 번거로움을 피할 수 있습니다.
 
 <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 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Vue">
+  <Tab label="Vue" value="vue">
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
@@ -461,7 +425,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Svelte">
+  <Tab label="Svelte" value="svelte">
 
     ```svelte fileName="App.svelte"
     <script lang="ts">
@@ -481,7 +445,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Preact">
+  <Tab label="Preact" value="preact">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "preact-intlayer";
@@ -500,7 +464,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Solid">
+  <Tab label="Solid" value="solid">
 
     ```tsx fileName="AppProvider.tsx"
     import { MarkdownProvider } from "solid-intlayer";
@@ -519,7 +483,7 @@ Intlayer v8는 콘텐츠 문자열에서 마크다운 문법을 지능적으로
     ```
 
   </Tab>
-  <Tab label="Angular">
+  <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
     import { createIntlayerMarkdownProvider } from "angular-intlayer";

package/docs/ko/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에 오신 것을 환영합니다! 이번 릴리스는 자동 콘텐츠 감지를 통한 developer experience 향상, schema validation으로 데이터 무결성 보장, 그리고 dictionary management에 대한 더 많은 제어 제공에 중점을 둡니다.
 
+<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"
+/>
+
 ## 목차
 
 <TOC levels={[2]} maxDepth={1} />
@@ -1198,8 +1207,8 @@ Svelte에서의 Markdown 및 HTML 콘텐츠는 이제 문자열화될 때 자동
 
 ### 구성 변경사항
 
-- **`live` 속성**: 딕셔너리에서의 `live` 속성은 더 이상 권장되지 않습니다. 대신 `importMode: 'fetch'`를 사용하세요.
-- **통합 리치 콘텐츠 API**: 새로운 `.use()` 메서드는 이제 Markdown 및 HTML 오버라이드 모두에 사용되어 모든 리치 콘텐츠 유형에서 일관된 API를 제공합니다.
+- **`live` 속성**: 딕셔너리에서의 `live` 속성은 제거되었습니다. 대신 `importMode: 'fetch'`를 사용하세요.
+- **importMode**: 설정에서 `build.importMode` 속성은 더 이상 권장되지 않습니다. 대신 `dictionary.importMode`를 사용하세요.
 - **`contentDir` and `codeDir`**: `contentDir`는 이제 콘텐츠 파일 전용입니다. 코드 변환을 위한 새로운 `codeDir` 속성이 추가되었습니다. `codeDir`가 설정되어 있지 않으면 Intlayer는 `contentDir`로 폴백(fallback)하고 경고를 기록합니다.
 - **스키마 검증**: 새로운 `schema` 기능을 사용하려면 프로젝트에 `zod`가 설치되어 있는지 확인하세요.
 

package/docs/pl/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-24
+updatedAt: 2026-01-28
 title: Plik z Treścią
 description: Dowiedz się, jak dostosować rozszerzenia dla plików deklaracji treści. Postępuj zgodnie z tą dokumentacją, aby efektywnie wdrażać warunki w swoim projekcie.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 8.0.0
+    date: 2026-01-28
+    changes: Dodano typ węzła zawartości `html`
   - version: 8.0.0
     date: 2026-01-24
     changes: Rename `live` import mode to `fetch` to better describe the underlying mechanism.
@@ -84,6 +87,7 @@ interface Content {
   quantityContent: string;
   conditionalContent: string;
   markdownContent: never;
+  htmlContent: never;
   externalContent: string;
   insertionContent: string;
   nestedContent: string;
@@ -128,6 +132,7 @@ export default {
     fileContent: file("./path/to/file.txt"),
     externalContent: fetch("https://example.com").then((res) => res.json()),
     markdownContent: md("# Przykład Markdown"),
+    htmlContent: html("<p>Hello <strong>World</strong></p>"),
 
     /*
      * Dostępne tylko przy użyciu `react-intlayer` lub `next-intlayer`
@@ -177,6 +182,7 @@ export default {
       "login.button" // [Opcjonalnie] Ścieżka do zawartości do zagnieżdżenia
     ),
     markdownContent: md("# Przykład 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" // [Opcjonalne] Ścieżka do zawartości do zagnieżdżenia
     ),
     markdownContent: md("# Przykład Markdown"),
+    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": "# Przykład Markdown",
     },
+    "htmlContent": {
+      "nodeType": "html",
+      "html": "<p>Hello <strong>World</strong></p>",
+    },
     "fileContent": {
       "nodeType": "file",
       "file": "./path/to/file.txt",
@@ -321,6 +332,7 @@ Intlayer obsługuje różne typy zawartości poprzez węzły typowane:
 - **Zawartość enumeracji**: Zawartość zmieniająca się w zależności od wartości enumerowanych [zobacz Zawartość enumeracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/enumeration_content.md)
 - **Zawartość wstawiania**: Zawartość, którą można wstawić do innej zawartości [zobacz Zawartość wstawiania](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/insertion_content.md)
 - **Zawartość Markdown**: Zawartość tekstu sformatowanego w formacie Markdown [zobacz Zawartość Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/markdown_content.md)
+- **Zawartość HTML**: Zawartość HTML z opcjonalnymi niestandardowymi komponentami [zobacz Zawartość HTML](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/html.md)
 - **Zagnieżdżona zawartość**: Odwołania do innych słowników [zobacz Zagnieżdżoną zawartość](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/nested_content.md)
 - **Zawartość zależna od płci**: Zawartość zmieniająca się w zależności od płci [zobacz Zawartość zależną od płci](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/gender_content.md)
 - **Zawartość plikowa**: Odwołania do plików zewnętrznych [zobacz Zawartość plikową](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/file_content.md)
@@ -698,6 +710,23 @@ markdownContent: md(
 );
 ```
 
+### Zawartość HTML (`html`)
+
+Zawartość HTML, która może używać standardowych tagów lub niestandardowych komponentów:
+
+```typescript
+import { html, file, t } from "intlayer";
+
+// HTML w linii
+htmlContent: html("<p>Hello <strong>World</strong></p>");
+
+// HTML według lokalizacji z plików zewnętrznych
+localizedHtmlContent: t({
+  en: html(file("./content.en.html")),
+  pl: html(file("./content.pl.html")),
+});
+```
+
 ### Zawartość według płci (`gender`)
 
 Treść zmieniająca się w zależności od płci: