@intlayer/docs 8.4.10 → 8.5.0

package/docs/de/intlayer_with_vite+vue.md

@@ -643,7 +643,7 @@ import {
   localeFlatMap,
   type Locale,
 } from 'intlayer';
-import { createIntlayerClient } from 'vue-intlayer';
+import { createIntlayerClient } from "vue-intlayer";
 import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from './views/home/HomeView.vue';
 import RootView from './views/root/Root.vue';
@@ -731,7 +731,11 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    vue(),
+    intlayer(),
+  ],
 });
 ```
 
@@ -742,7 +746,11 @@ import { intlayer, intlayerProxy } from "vite-intlayer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    vue(),
+    intlayer(),
+  ],
 });
 ```
 
@@ -753,7 +761,11 @@ const { intlayer, intlayerProxy } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    vue(),
+    intlayer(),
+  ],
 });
 const { defineConfig } = require("vite");
 const vue = require("@vitejs/plugin-vue");
@@ -761,7 +773,11 @@ const { intlayer, intlayerProxy } = require("vite-intlayer");
 
 // https://vitejs.dev/config/
 module.exports = defineConfig({
-  plugins: [vue(), intlayer(), intlayerProxy()],
+  plugins: [
+    intlayerProxy(), // should be placed first
+    vue(),
+    intlayer(),
+  ],
 });
 ```
 

package/docs/de/packages/react-intlayer/MarkdownRenderer.md

@@ -28,7 +28,7 @@ Die `MarkdownRenderer`-Komponente rendert Markdown-Inhalte mit benutzerdefiniert
 ## Verwendung
 
 ```tsx
-import { MarkdownRenderer } from "react-intlayer";
+import { MarkdownRenderer } from "react-intlayer/markdown";
 
 const MyComponent = () => (
   <MarkdownRenderer># My Title My content</MarkdownRenderer>

package/docs/de/packages/svelte-intlayer/useRewriteURL.md

@@ -29,7 +29,7 @@ Rufe den Hook innerhalb einer Svelte-Komponente auf.
 
 ```svelte
 <script>
-  import { useRewriteURL } from 'svelte-intlayer';
+  import { useRewriteURL } from "svelte-intlayer";
 
   // Korrigiert automatisch /fr/tests zu /fr/essais in der Adressleiste, falls eine Rewrite-Regel existiert
   useRewriteURL();

package/docs/de/releases/v8.md

@@ -69,7 +69,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { MarkdownRenderer } from "react-intlayer";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
 
     <MarkdownRenderer
       forceBlock={true}
@@ -84,7 +84,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useMarkdownRenderer } from "react-intlayer";
+    import { useMarkdownRenderer } from "react-intlayer/markdown";
 
     const renderMarkdown = useMarkdownRenderer({
       components: {
@@ -98,7 +98,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderMarkdown } from "react-intlayer";
+    import { renderMarkdown } from "react-intlayer/markdown";
 
     const html = renderMarkdown("# Mein Titel", {
       forceBlock: true
@@ -112,7 +112,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```vue
     <script setup>
-    import { MarkdownRenderer } from "vue-intlayer";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
     </script>
 
     <template>
@@ -127,7 +127,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { MarkdownRenderer } from "svelte-intlayer";
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
     </script>
 
     <MarkdownRenderer forceBlock={true} value="# Mein Titel" />
@@ -137,7 +137,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { useMarkdownRenderer } from "svelte-intlayer";
+      import { useMarkdownRenderer } from "svelte-intlayer/markdown";
       const render = useMarkdownRenderer();
     </script>
 
@@ -148,7 +148,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { renderMarkdown } from "svelte-intlayer";
+      import { renderMarkdown } from "svelte-intlayer/markdown";
     </script>
 
     {@html renderMarkdown("# Mein Titel")}
@@ -179,7 +179,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { MarkdownRenderer } from "solid-intlayer";
+    import { MarkdownRenderer } from "solid-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# Mein Titel"}
@@ -189,7 +189,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useMarkdownRenderer } from "solid-intlayer";
+    import { useMarkdownRenderer } from "solid-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -199,7 +199,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderMarkdown } from "solid-intlayer";
+    import { renderMarkdown } from "solid-intlayer/markdown";
 
     return <div>{renderMarkdown("# Mein Titel")}</div>;
     ```
@@ -210,7 +210,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { MarkdownRenderer } from "preact-intlayer";
+    import { MarkdownRenderer } from "preact-intlayer/markdown";
 
     <MarkdownRenderer forceBlock={true}>
       {"# Mein Titel"}
@@ -220,7 +220,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useMarkdownRenderer } from "preact-intlayer";
+    import { useMarkdownRenderer } from "preact-intlayer/markdown";
 
     const render = useMarkdownRenderer();
 
@@ -230,7 +230,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderMarkdown } from "preact-intlayer";
+    import { renderMarkdown } from "preact-intlayer/markdown";
 
     return <div>{renderMarkdown("# Mein Titel")}</div>;
     ```
@@ -246,7 +246,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { HTMLRenderer } from "react-intlayer";
+    import { HTMLRenderer } from "react-intlayer/html";
 
     <HTMLRenderer
       components={{
@@ -260,7 +260,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useHTMLRenderer } from "react-intlayer";
+    import { useHTMLRenderer } from "react-intlayer/html";
 
     const renderHTML = useHTMLRenderer({
       components: {
@@ -274,7 +274,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderHTML } from "react-intlayer";
+    import { renderHTML } from "react-intlayer/html";
 
     const html = renderHTML("<p>Hallo Welt</p>");
     ```
@@ -286,7 +286,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```vue
     <script setup>
-    import { HTMLRenderer } from "vue-intlayer";
+    import { HTMLRenderer } from "vue-intlayer/html";
     </script>
 
     <template>
@@ -301,7 +301,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { HTMLRenderer } from "svelte-intlayer";
+      import { HTMLRenderer } from "svelte-intlayer/html";
     </script>
 
     <HTMLRenderer value="<p>Hallo Welt</p>" />
@@ -311,7 +311,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { useHTMLRenderer } from "svelte-intlayer";
+      import { useHTMLRenderer } from "svelte-intlayer/html";
       const render = useHTMLRenderer();
     </script>
 
@@ -322,7 +322,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
 
     ```svelte
     <script>
-      import { renderHTML } from "svelte-intlayer";
+      import { renderHTML } from "svelte-intlayer/html";
     </script>
 
     {@html renderHTML("<p>Hallo Welt</p>")}
@@ -345,7 +345,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { HTMLRenderer } from "solid-intlayer";
+    import { HTMLRenderer } from "solid-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hallo Welt</p>"}
@@ -355,7 +355,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useHTMLRenderer } from "solid-intlayer";
+    import { useHTMLRenderer } from "solid-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -365,7 +365,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderHTML } from "solid-intlayer";
+    import { renderHTML } from "solid-intlayer/html";
 
     return <div>{renderHTML("<p>Hallo Welt</p>")}</div>;
     ```
@@ -376,7 +376,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **1. Verwendung der Komponente:**
 
     ```tsx
-    import { HTMLRenderer } from "preact-intlayer";
+    import { HTMLRenderer } from "preact-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hallo Welt</p>"}
@@ -386,7 +386,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **2. Verwendung des Hooks:**
 
     ```tsx
-    import { useHTMLRenderer } from "preact-intlayer";
+    import { useHTMLRenderer } from "preact-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -396,7 +396,7 @@ Wir haben neue eigenständige Renderer-Funktionen und Komponenten eingeführt, u
     **3. Verwendung der Utility-Funktion:**
 
     ```tsx
-    import { renderHTML } from "preact-intlayer";
+    import { renderHTML } from "preact-intlayer/html";
 
     return <div>{renderHTML("<p>Hallo Welt</p>")}</div>;
     ```
@@ -1033,7 +1033,7 @@ Intlayer v8 enthält eine neue Caching-Schicht für den Markdown- und HTML-Compi
    
     ```typescript fileName="vite.config.js"
     import { defineConfig } from 'vite';
-    import {intlayer, intlayerCompiler} from 'vite-intlayer';
+    import { intlayer, intlayerCompiler } from "vite-intlayer";
 
     export default defineConfig({
       plugins: [intlayer(), intlayerCompiler()],

package/docs/en/compiler.md

@@ -214,7 +214,10 @@ const config: IntlayerConfig = {
 
     /**
      * Indicates if the components should be saved after being transformed.
-     * That way, the compiler can be run only once to transform the app, and then it can be removed.
+     *
+     * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
+     *
+     * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
      */
     saveComponents: false,
 

package/docs/en/configuration.md

@@ -518,7 +518,10 @@ const config: IntlayerConfig = {
 
     /**
      * Indicates if the components should be saved after being transformed.
-     * That way, the compiler can be run only once to transform the app, and then it can be removed.
+     *
+     * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
+     *
+     * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
      */
     saveComponents: false,
 

package/docs/en/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-03-24
 title: HTML Content
 description: Learn how to declare and use HTML content with custom components in Intlayer. Follow this documentation to embed rich HTML-like content with dynamic component replacement in your internationalized project.
 keywords:
@@ -19,6 +19,9 @@ slugs:
   - content
   - html
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"
   - version: 8.0.0
     date: 2026-01-22
     changes: "Add HTMLRenderer / useHTMLRenderer / renderHTML utility"
@@ -240,7 +243,7 @@ You can configure HTML rendering globally for your entire application. This is i
   <Tab label="React / Next.js" value="react">
   
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "react-intlayer";
+    import { HTMLProvider } from "react-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -254,12 +257,32 @@ You can configure HTML rendering globally for your entire application. This is i
     );
     ```
 
+    You can also use your own HTML renderer:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "react-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('react-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
   <Tab label="Vue" value="vue">
   
     ```typescript fileName="main.ts"
     import { createApp, h } from "vue";
-    import { installIntlayer, installIntlayerHTML } from "vue-intlayer";
+    import { installIntlayer } from "vue-intlayer";
+    import { installIntlayerHTML } from "vue-intlayer/html";
     import App from "./App.vue";
 
     const app = createApp(App);
@@ -275,12 +298,35 @@ You can configure HTML rendering globally for your entire application. This is i
     app.mount("#app");
     ```
 
+    You can also use your own HTML renderer:
+
+    ```typescript fileName="main.ts"
+    import { createApp, h } from "vue";
+    import { installIntlayer } from "vue-intlayer";
+    import { installIntlayerHTML } from "vue-intlayer/html";
+    import App from "./App.vue";
+
+    const app = createApp(App);
+
+    app.use(installIntlayer);
+    app.use(installIntlayerHTML, {
+      renderHTML: async (html) => {
+        const { renderHTML } = await import('vue-intlayer/html');
+        return renderHTML(html);
+      },
+    });
+
+    app.mount("#app");
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
   <Tab label="Svelte" value="svelte">
    
     ```svelte fileName="App.svelte"
     <script lang="ts">
-      import { HTMLProvider } from "svelte-intlayer";
+      import { HTMLProvider } from "svelte-intlayer/html";
       import MyCustomP from "./MyCustomP.svelte";
     </script>
 
@@ -293,11 +339,30 @@ You can configure HTML rendering globally for your entire application. This is i
     </HTMLProvider>
     ```
 
+    You can also use your own HTML renderer:
+
+    ```svelte fileName="App.svelte"
+    <script lang="ts">
+      import { HTMLProvider } from "svelte-intlayer/html";
+    </script>
+
+    <HTMLProvider
+      renderHTML={async (html) => {
+        const { renderHTML } = await import('svelte-intlayer/html');
+        return renderHTML(html);
+      }}
+    >
+      <slot />
+    </HTMLProvider>
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
   <Tab label="Preact" value="preact">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "preact-intlayer";
+    import { HTMLProvider } from "preact-intlayer/html";
 
     export const AppProvider = ({ children }) => (
       <HTMLProvider
@@ -310,11 +375,30 @@ You can configure HTML rendering globally for your entire application. This is i
     );
     ```
 
+    You can also use your own HTML renderer:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "preact-intlayer/html";
+
+    export const AppProvider = ({ children }) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('preact-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
   <Tab label="Solid" value="solid">
    
     ```tsx fileName="AppProvider.tsx"
-    import { HTMLProvider } from "solid-intlayer";
+    import { HTMLProvider } from "solid-intlayer/html";
 
     export const AppProvider = (props) => (
       <HTMLProvider
@@ -327,15 +411,34 @@ You can configure HTML rendering globally for your entire application. This is i
     );
     ```
 
+    You can also use your own HTML renderer:
+
+    ```tsx fileName="AppProvider.tsx"
+    import { HTMLProvider } from "solid-intlayer/html";
+
+    export const AppProvider = (props) => (
+      <HTMLProvider
+        renderHTML={async (html) => {
+          const { renderHTML } = await import('solid-intlayer/html');
+          return renderHTML(html);
+        }}
+      >
+        {props.children}
+      </HTMLProvider>
+    );
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
   <Tab label="Angular" value="angular">
 
     ```typescript fileName="app.config.ts"
-    import { createIntlayerMarkdownProvider } from "angular-intlayer";
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
 
     export const appConfig: ApplicationConfig = {
       providers: [
-        createIntlayerMarkdownProvider({
+        createIntlayerHTMLProvider({
           components: {
             p: { class: "prose" },
             CustomLink: { href: "/details" },
@@ -345,6 +448,25 @@ You can configure HTML rendering globally for your entire application. This is i
     };
     ```
 
+    You can also use your own HTML renderer:
+
+    ```typescript fileName="app.config.ts"
+    import { createIntlayerHTMLProvider } from "angular-intlayer/html";
+
+    export const appConfig: ApplicationConfig = {
+      providers: [
+        createIntlayerHTMLProvider({
+          renderMarkdown: async (html) => {
+            const { renderMarkdown } = await import('angular-intlayer/html');
+            return renderMarkdown(html);
+          },
+        }),
+      ],
+    };
+    ```
+
+    > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.
+
   </Tab>
 </Tabs>
 
@@ -360,7 +482,7 @@ If you need to render raw HTML strings or have more control over the component m
     Render an HTML string with specific components.
 
     ```tsx
-    import { HTMLRenderer } from "react-intlayer";
+    import { HTMLRenderer } from "react-intlayer/html";
 
     <HTMLRenderer components={{ p: MyCustomP }}>
       {"<p>Hello World</p>"}
@@ -372,7 +494,7 @@ If you need to render raw HTML strings or have more control over the component m
     Get a pre-configured renderer function.
 
     ```tsx
-    import { useHTMLRenderer } from "react-intlayer";
+    import { useHTMLRenderer } from "react-intlayer/html";
 
     const renderHTML = useHTMLRenderer({
       components: { strong: (props) => <strong {...props} className="text-red-500" /> }
@@ -386,7 +508,7 @@ If you need to render raw HTML strings or have more control over the component m
     Standalone utility for rendering outside of components.
 
     ```tsx
-    import { renderHTML } from "react-intlayer";
+    import { renderHTML } from "react-intlayer/html";
 
     const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });
     ```
@@ -398,7 +520,7 @@ If you need to render raw HTML strings or have more control over the component m
    
     ```vue
     <script setup>
-    import { HTMLRenderer } from "vue-intlayer";
+    import { HTMLRenderer } from "vue-intlayer/html";
     </script>
 
     <template>
@@ -413,7 +535,7 @@ If you need to render raw HTML strings or have more control over the component m
    
     ```svelte
     <script lang="ts">
-    import { HTMLRenderer } from "svelte-intlayer";
+    import { HTMLRenderer } from "svelte-intlayer/html";
     </script>
 
     <HTMLRenderer value="<p>Hello World</p>" />
@@ -423,7 +545,7 @@ If you need to render raw HTML strings or have more control over the component m
 
     ```svelte
     <script lang="ts">
-    import { useHTMLRenderer } from "svelte-intlayer";
+    import { useHTMLRenderer } from "svelte-intlayer/html";
     const render = useHTMLRenderer();
     </script>
 
@@ -434,7 +556,7 @@ If you need to render raw HTML strings or have more control over the component m
 
     ```svelte
     <script lang="ts">
-    import { renderHTML } from "svelte-intlayer";
+    import { renderHTML } from "svelte-intlayer/html";
     </script>
 
     {@html renderHTML("<p>Hello World</p>")}
@@ -446,7 +568,7 @@ If you need to render raw HTML strings or have more control over the component m
     #### `<HTMLRenderer />` Component
    
     ```tsx
-    import { HTMLRenderer } from "preact-intlayer";
+    import { HTMLRenderer } from "preact-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -456,7 +578,7 @@ If you need to render raw HTML strings or have more control over the component m
     #### `useHTMLRenderer()` Hook
 
     ```tsx
-    import { useHTMLRenderer } from "preact-intlayer";
+    import { useHTMLRenderer } from "preact-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -466,7 +588,7 @@ If you need to render raw HTML strings or have more control over the component m
     #### `renderHTML()` Utility
 
     ```tsx
-    import { renderHTML } from "preact-intlayer";
+    import { renderHTML } from "preact-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
@@ -477,7 +599,7 @@ If you need to render raw HTML strings or have more control over the component m
     #### `<HTMLRenderer />` Component
    
     ```tsx
-    import { HTMLRenderer } from "solid-intlayer";
+    import { HTMLRenderer } from "solid-intlayer/html";
 
     <HTMLRenderer>
       {"<p>Hello World</p>"}
@@ -487,7 +609,7 @@ If you need to render raw HTML strings or have more control over the component m
     #### `useHTMLRenderer()` Hook
 
     ```tsx
-    import { useHTMLRenderer } from "solid-intlayer";
+    import { useHTMLRenderer } from "solid-intlayer/html";
 
     const render = useHTMLRenderer();
 
@@ -497,21 +619,21 @@ If you need to render raw HTML strings or have more control over the component m
     #### `renderHTML()` Utility
 
     ```tsx
-    import { renderHTML } from "solid-intlayer";
+    import { renderHTML } from "solid-intlayer/html";
 
     return <div>{renderHTML("<p>Hello World</p>")}</div>;
     ```
 
   </Tab>
   <Tab label="Angular" value="angular">
-    #### `IntlayerMarkdownService` Service
+    #### `IntlayerHTMLService` Service
     Render an HTML string using the service.
 
     ```typescript
-    import { IntlayerMarkdownService } from "angular-intlayer";
+    import { IntlayerHTMLService } from "angular-intlayer/html";
 
     export class MyComponent {
-      constructor(private markdownService: IntlayerMarkdownService) {}
+      constructor(private markdownService: IntlayerHTMLService) {}
 
       renderHTML(html: string) {
         return this.markdownService.renderMarkdown(html);