\n\n \n ```\n\n Usa `.use()` per le sovrascritture:\n ```vue\n \n ```\n\n \n \n Svelte rende i nodi HTML come stringhe. Usa `{@html}` per renderizzarli.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact supporta i nodi HTML direttamente nel JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"preact-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
{myHtmlContent}
;\n };\n ```\n\n \n \n Solid supporta i nodi HTML direttamente nel JSX.\n\n ```tsx fileName=\"App.tsx\"\n import { useIntlayer } from \"solid-intlayer\";\n\n const AppContent = () => {\n const { myHtmlContent } = useIntlayer(\"app\");\n return
{myHtmlContent}
;\n };\n ```\n\n \n \n Angular utilizza la direttiva `[innerHTML]` per renderizzare contenuti HTML.\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 Usa il metodo `.use()` per fornire componenti personalizzati o sovrascrivere i tag:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Configurazione globale con `HTMLProvider`\n\nPuoi 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.\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 Puoi anche utilizzare il tuo motore di rendering HTML:\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 > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\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 Puoi anche utilizzare il tuo motore di rendering HTML:\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 > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n \n \n ```svelte fileName=\"App.svelte\"\n \n\n \n \n \n ```\n\n Puoi anche utilizzare il tuo motore di rendering HTML:\n\n ```svelte fileName=\"App.svelte\"\n \n\n {\n const { renderHTML } = await import('svelte-intlayer/html');\n return renderHTML(html);\n }}\n >\n \n \n ```\n\n > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\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 Puoi anche utilizzare il tuo motore di rendering HTML:\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 > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\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 Puoi anche utilizzare il tuo motore di rendering HTML:\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 > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\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 Puoi anche utilizzare il tuo motore di rendering HTML:\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 > Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.\n\n \n\n\n---\n\n### Rendering manuale e strumenti avanzati\n\nSe hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.\n\n\n \n #### Componente ``\n Esegui il rendering di una stringa HTML con componenti specifici.\n\n ```tsx\n import { HTMLRenderer } from \"react-intlayer/html\";\n\n \n {\"

Hello World

\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n Ottieni una funzione di rendering preconfigurata.\n\n ```tsx\n import { useHTMLRenderer } from \"react-intlayer/html\";\n\n const renderHTML = useHTMLRenderer({\n components: { strong: (props) => }\n });\n\n return renderHTML(\"

Hello World

\");\n ```\n\n #### Utility `renderHTML()`\n\n Utility standalone per il rendering al di fuori dei componenti.\n\n ```tsx\n import { renderHTML } from \"react-intlayer/html\";\n\n const jsx = renderHTML(\"

Hello

\", { components: { p: 'div' } });\n ```\n\n \n \n \n #### Componente ``\n \n ```vue\n \n\n \n ```\n\n \n \n \n #### Componente ``\n \n ```svelte\n \n\n Hello World

\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\"

Hello World

\")}\n ```\n\n #### Utility `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"

Hello World

\")}\n ```\n\n \n \n \n #### Componente ``\n \n ```tsx\n import { HTMLRenderer } from \"preact-intlayer/html\";\n\n \n {\"

Hello World

\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"

Hello World

\")}
;\n ```\n\n #### Utility `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"preact-intlayer/html\";\n\n return
{renderHTML(\"

Hello World

\")}
;\n ```\n\n \n \n \n #### Componente ``\n \n ```tsx\n import { HTMLRenderer } from \"solid-intlayer/html\";\n\n \n {\"

Hello World

\"}\n \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return
{render(\"

Hello World

\")}
;\n ```\n\n #### Utility `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return
{renderHTML(\"

Hello World

\")}
;\n ```\n\n \n \n #### Servizio `IntlayerHTMLService`\n Renderizza una stringa HTML utilizzando il servizio.\n\n ```typescript\n import { IntlayerHTMLService } from \"angular-intlayer\";\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## Riferimento delle opzioni\n\nQueste opzioni possono essere passate a `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, e `renderHTML`.\n\n| Opzione | Tipo | Predefinito | Descrizione |\n| :----------- | :-------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------------- |\n| `components` | `Record` | `{}` | Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti. |\n| `renderHTML` | `Function` | `null` | Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte). |\n\n> Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop `components` solo se si desidera sovrascriverli o aggiungere componenti personalizzati.\n","description":"Scopri come dichiarare e usare contenuti HTML con componenti personalizzati in Intlayer. Segui questa documentazione per incorporare contenuti ricchi in stile HTML con sostituzione dinamica dei componenti nel tuo progetto internazionalizzato.","url":"https://intlayer.org/it/doc/concept/content/html","datePublished":"2026-01-20","dateModified":"2026-03-24","version":"8.5.0","keywords":"HTML, Componenti personalizzati, Contenuto ricco, Intlayer, Next.js, JavaScript, React, Vue, Svelte, Solid, Angular","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Sviluppatori, Manager dei contenuti"}}
    Autore:
    Creazione:2026-01-20Ultimo aggiornamento:2026-03-24

    Contenuto HTML / HTML in Intlayer

    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.

    Dichiarare contenuti HTML

    Puoi dichiarare contenuti HTML usando la funzione html o semplicemente come stringa.

    Usa la funzione html per dichiarare esplicitamente contenuti HTML. Questo garantisce che i tag standard siano mappati correttamente anche se il rilevamento automatico è disabilitato.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";const htmlDictionary = {  key: "app",  contentAutoTransformation: true, // può essere impostato nel file di configurazione  content: {    myHtmlContent:  html("<p>Ciao <strong>Mondo</strong></p>"),  },} satisfies Dictionary;export default htmlDictionary;

    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

    Il rendering può essere gestito automaticamente dal sistema di contenuti di Intlayer o manualmente utilizzando strumenti specializzati.

    Rendering automatico (usando useIntlayer)

    Quando accedi al contenuto tramite useIntlayer, i nodi HTML sono già pronti per il rendering.

    I nodi HTML possono essere renderizzati direttamente come JSX. I tag standard funzionano automaticamente.

    App.tsx
    import { useIntlayer } from "react-intlayer";const AppContent = () => {  const { myHtmlContent } = useIntlayer("app");  return <div>{myHtmlContent}</div>;};

    Usa il metodo .use() per fornire componenti personalizzati o sovrascrivere i tag:

    tsx
    {myHtmlContent.use({  p: (props) => <p className="prose" {...props} />,  CustomLink: ({ children }) => <a href="/details">{children}</a>,})}

    Configurazione globale con HTMLProvider

    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.

    AppProvider.tsx
    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>);

    Puoi anche utilizzare il tuo motore di rendering HTML:

    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>);
    Importare dinamicamente il tuo renderer HTML è un ottimo modo per ridurre le dimensioni del bundle della tua applicazione.

    Rendering manuale e strumenti avanzati

    Se hai bisogno di renderizzare stringhe HTML grezze o di avere un controllo maggiore sulla mappatura dei componenti, usa i seguenti strumenti.

    Componente <HTMLRenderer />

    Esegui il rendering di una stringa HTML con componenti specifici.

    tsx
    import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}>  {"<p>Hello World</p>"}</HTMLRenderer>

    Hook useHTMLRenderer()

    Ottieni una funzione di rendering preconfigurata.

    tsx
    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>");

    Utility renderHTML()

    Utility standalone per il rendering al di fuori dei componenti.

    tsx
    import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    Riferimento delle opzioni

    Queste opzioni possono essere passate a HTMLProvider, HTMLRenderer, useHTMLRenderer, e renderHTML.

    Opzione Tipo Predefinito Descrizione
    components Record<string, any> {} Una mappa che associa tag HTML o nomi di componenti personalizzati ai componenti.
    renderHTML Function null Una funzione di rendering personalizzata per sostituire completamente il parser HTML predefinito (solo per i provider Vue/Svelte).
    Nota: per React e Preact, i tag HTML standard sono forniti automaticamente. È necessario passare la prop components solo se si desidera sovrascriverli o aggiungere componenti personalizzati.
    MarkdownRecupero funzione