\n\n \n \n Svelte renders HTML nodes as strings. Use `{@html}` to render it.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact supports HTML nodes directly in the JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Solid supports HTML nodes directly in the JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return \n \n Angular uses the `[innerHTML]` directive to render HTML content.\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { useIntlayer } from \"angular-intlayer\";\n\n @Component({\n selector: \"app-root\",\n template: ``,\n })\n export class AppComponent {\n content = useIntlayer(\"app\");\n }\n ```\n\n Use the `.use()` method to provide custom components or override tags:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Global Configuration with `HTMLProvider`\n\nYou can configure HTML rendering globally for your entire application. This is ideal for defining custom components that should be available in all HTML content.\n\n\n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n CustomLink: ({ children }) => {children},\n }}\n >\n {children}\n \n );\n ```\n\n You can also use your own HTML renderer:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"react-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('react-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.\n\n \n \n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n components: {\n p: (props, { slots }) => h(\"p\", { class: \"prose\", ...props }, slots.default?.()),\n CustomLink: (props, { slots }) => h(\"a\", { href: \"/details\", ...props }, slots.default?.()),\n },\n });\n\n app.mount(\"#app\");\n ```\n\n You can also use your own HTML renderer:\n\n ```typescript fileName=\"main.ts\"\n import { createApp, h } from \"vue\";\n import { intlayer } from \"vue-intlayer\";\n import { intlayerHTML } from \"vue-intlayer/html\";\n import App from \"./App.vue\";\n\n const app = createApp(App);\n\n app.use(intlayer);\n app.use(intlayerHTML, {\n renderHTML: async (html) => {\n const { renderHTML } = await import('vue-intlayer/html');\n return renderHTML(html);\n },\n });\n\n app.mount(\"#app\");\n ```\n\n > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n ,\n }}\n >\n {children}\n \n );\n ```\n\n You can also use your own HTML renderer:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"preact-intlayer/html\";\n\n export const AppProvider = ({ children }) => (\n {\n const { renderHTML } = await import('preact-intlayer/html');\n return renderHTML(html);\n }}\n >\n {children}\n \n );\n ```\n\n > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.\n\n \n \n \n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n ,\n }}\n >\n {props.children}\n \n );\n ```\n\n You can also use your own HTML renderer:\n\n ```tsx fileName=\"AppProvider.tsx\"\n import { HTMLProvider } from \"solid-intlayer/html\";\n\n export const AppProvider = (props) => (\n {\n const { renderHTML } = await import('solid-intlayer/html');\n return renderHTML(html);\n }}\n >\n {props.children}\n \n );\n ```\n\n > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.\n\n \n \n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n components: {\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n },\n }),\n ],\n };\n ```\n\n You can also use your own HTML renderer:\n\n ```typescript fileName=\"app.config.ts\"\n import { createIntlayerHTMLProvider } from \"angular-intlayer/html\";\n\n export const appConfig: ApplicationConfig = {\n providers: [\n createIntlayerHTMLProvider({\n renderMarkdown: async (html) => {\n const { renderMarkdown } = await import('angular-intlayer/html');\n return renderMarkdown(html);\n },\n }),\n ],\n };\n ```\n\n > Importing your HTML renderer dynamically is a good way to reduce the bundle size of your application.\n\n \n \n\n---\n\n### Manual Rendering & Advanced Tools\n\nIf you need to render raw HTML strings or have more control over the component mapping, use the following tools.\n\n\n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n Get a pre-configured renderer function.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\" \n \n \n #### `Hello World\" />\n \n ```\n\n \n \n \n #### `Hello World\" />\n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### `\n {\" \n ```\n\n #### `useHTMLRenderer()` Hook\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### `IntlayerHTMLService` Service\n Render an HTML string using the service.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer/html\";\n\n export class MyComponent {\n constructor(private markdownService: IntlayerHTMLService) {}\n\n renderHTML(html: string) {\n return this.markdownService.renderMarkdown(html);\n }\n }\n ```\n\n \n \n\n---\n\n## Options Reference\n\nThese options can be passed to `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, and `renderHTML`.\n\n| Option | Type | Default | Description |\n| :----------- | :-------------------- | :------ | :--------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | A map of HTML tags or custom component names to components. |\n| `renderHTML` | `Function` | `null` | A custom rendering function to completely replace the default HTML parser (Only for Vue/Svelte providers). |\n\n> Note: For React and Preact, standard HTML tags are automatically provided. You only need to pass the `components` prop if you want to override them or add custom components.\n","about":"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.","url":"https://intlayer.org/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Custom Components, Rich Content, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}The
Automatic Rendering (using
Global Configuration with
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### `renderHTML()` Utility\n\n Standalone utility for rendering outside of components.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"Hello
\", { components: { p: 'div' } });\n ```\n\nHello World
\")}\n ```\n\n #### `renderHTML()` Utility\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### `renderHTML()` Utility\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Hello World
\"}\n{render(\"
;\n ```\n\n #### `renderHTML()` Utility\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Creation:2026-01-20Last update:2026-03-24
Reference this doc to your favorite AI assistantChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Ask your question and get a summary of the document by referencing this page and the AI provider of your choice
Version History
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.03/24/2026
- "move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/html`"v8.5.03/24/2026
- "Add HTMLRenderer / useHTMLRenderer / renderHTML utility"v8.0.01/22/2026
- "Add HTML parsing support"v8.0.01/20/2026
Edit this doc
If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy
Copy doc Markdown to clipboard
HTML Content / HTML in Intlayer
Intlayer supports HTML content, allowing you to embed rich, structured content within your dictionaries. This content can be rendered with standard HTML tags or replaced with custom components at runtime.
Declaring HTML Content
You can declare HTML content using the html function or simply as a string.
Use the html function to explicitly declare HTML content. This ensures standard tags are mapped correctly even if automatic detection is disabled.
htmlDictionary.content.ts
Copy code
Copy the code to the clipboard
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // can be set in config file content: { myHtmlContent: html("<p>Hello <strong>World</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;The html() Node
The html() function is a new feature in Intlayer v8 that allows you to explicitly define HTML content in your dictionaries. While Intlayer can often auto-detect HTML content, using the html() function provides several advantages:
- Type Safety: The
html()function allows you to define the expected props for custom components, providing better autocompletion and type checking in your editor. - Explicit Declaration: It ensures that a string is always treated as HTML, even if it doesn't contain standard HTML tags that would trigger auto-detection.
- Custom Component Definition: You can pass a second argument to
html()to define the custom components and their expected prop types.
typescript
Copy code
Copy the code to the clipboard
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Hello'>World</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });When using the .use() method on an HTML node, the components you provide will be checked against the definition provided in the html() function (if available).
Rendering HTML
Rendering can be handled automatically by Intlayer's content system or manually using specialized tools.
Automatic Rendering (using useIntlayer)
When you access content via useIntlayer, HTML nodes are already prepared for rendering.
HTML nodes can be rendered directly as JSX. Standard tags work automatically.
App.tsx
Copy code
Copy the code to the clipboard
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Use the .use() method to provide custom components or override tags:
tsx
Copy code
Copy the code to the clipboard
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Global Configuration with HTMLProvider
You can configure HTML rendering globally for your entire application. This is ideal for defining custom components that should be available in all HTML content.
AppProvider.tsx
Copy code
Copy the code to the clipboard
import { HTMLProvider } from "react-intlayer/html";export const AppProvider = ({ children }) => ( <HTMLProvider components={{ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>, }} > {children} </HTMLProvider>);You can also use your own HTML renderer:
AppProvider.tsx
Copy code
Copy the code to the clipboard
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.
Manual Rendering & Advanced Tools
If you need to render raw HTML strings or have more control over the component mapping, use the following tools.
<HTMLRenderer /> Component
Render an HTML string with specific components.
tsx
Copy code
Copy the code to the clipboard
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>useHTMLRenderer() Hook
Get a pre-configured renderer function.
tsx
Copy code
Copy the code to the clipboard
import { useHTMLRenderer } from "react-intlayer/html";const renderHTML = useHTMLRenderer({ components: { strong: (props) => <strong {...props} className="text-red-500" /> }});return renderHTML("<p>Hello <strong>World</strong></p>");renderHTML() Utility
Standalone utility for rendering outside of components.
tsx
Copy code
Copy the code to the clipboard
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Options Reference
These options can be passed to HTMLProvider, HTMLRenderer, useHTMLRenderer, and renderHTML.
Show all table content
Open the table in a modal to view all data content clearly
| Option | Type | Default | Description |
|---|---|---|---|
components | Record<string, any> | {} | A map of HTML tags or custom component names to components. |
renderHTML | Function | null | A custom rendering function to completely replace the default HTML parser (Only for Vue/Svelte providers). |
Note: For React and Preact, standard HTML tags are automatically provided. You only need to pass the components prop if you want to override them or add custom components.