Autor:
    Aymeric PINEAU
    Criação:2026-01-20Última atualização:2026-03-24

    Conteúdo HTML / HTML no Intlayer

    O Intlayer suporta conteúdo HTML, permitindo que você incorpore conteúdo rico e estruturado dentro dos seus dicionários. Esse conteúdo pode ser renderizado com tags HTML padrão ou substituído por componentes personalizados em tempo de execução.

    Declarando Conteúdo HTML

    Você pode declarar conteúdo HTML usando la função html ou simplesmente como uma string.

    Use a função html para declarar explicitamente conteúdo HTML. Isso garante que as tags padrão sejam mapeadas corretamente mesmo se a detecção automática estiver desabilitada.

    htmlDictionary.content.ts
    import { html, type Dictionary } from "intlayer";

const htmlDictionary = {
key: "app",
contentAutoTransformation: true, // pode ser definido no arquivo de configuração
content: {
  myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
},
} satisfies Dictionary;

export default htmlDictionary;

    Se a string contiver tags HTML comuns (por exemplo, <p>, <div>, <strong>, etc.), o Intlayer irá transformá-la automaticamente.

    htmlDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // pode ser definido no arquivo de configuração
content: {
  myHtmlContent:  "<p>Olá <strong>Mundo</strong></p>",
},
};

    Importe conteúdo HTML de arquivos. Note que atualmente a função file() retorna uma string, que será detectada automaticamente como HTML se contiver tags.

    htmlDictionary.content.ts
    import { html, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: html(file("./content.en.html")),
    fr: html(file("./content.fr.html")),
    pt: html(file("./content.pt.html")),
  }),
},
};

    O Nó html()

    A função html() é um novo recurso no Intlayer v8 que permite definir explicitamente conteúdo HTML em seus dicionários. Embora o Intlayer possa frequentemente detectar automaticamente o conteúdo HTML, o uso da função html() oferece várias vantagens:

    • Segurança de Tipos: A função html() permite definir as props esperadas para componentes personalizados, proporcionando melhor autocompletar e verificação de tipos em seu editor.
    • Declaração Explícita: Garante que uma string seja sempre tratada como HTML, mesmo que não contenha tags HTML padrão que acionariam a detecção automática.
    • Definição de Componentes Personalizados: Você pode passar um segundo argumento para html() para definir os componentes personalizados e seus tipos de props esperados.
    typescript
    import { html } from "intlayer";

const myContent = html(
  "<MyCustomComponent title='Olá'>Mundo</MyCustomComponent>",
  {
    MyCustomComponent: {
      title: "string",
      children: "node",
    },
  }
);

    Ao usar o método .use() em um nó HTML, os componentes que você fornecer serão verificados em relação à definição fornecida na função html() (se disponível).

    Renderização de HTML

    A renderização pode ser feita automaticamente pelo sistema de conteúdo do Intlayer ou manualmente usando ferramentas especializadas.

    Renderização automática (usando useIntlayer)

    Quando você acessa conteúdo via useIntlayer, os nós HTML já estão preparados para renderização.

    Os nós HTML podem ser renderizados diretamente como JSX. As tags padrão funcionam automaticamente.

    App.tsx
    import { useIntlayer } from "react-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Use o método .use() para fornecer componentes personalizados ou sobrescrever tags:

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

    No Vue, o conteúdo HTML pode ser renderizado usando o built-in component.

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myHtmlContent } = useIntlayer("app");
</script>

<template>
<component :is="myHtmlContent" />
</template>

    Use .use() para sobrescrever:

    vue
    <component :is="myHtmlContent.use({ h1: 'h2' })" />

    O Svelte renderiza nós HTML como strings. Use {@html} para renderizá-los.

    svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
const content = useIntlayer("app");
</script>

{@html $content.myHtmlContent}

    Preact suporta nós HTML diretamente no JSX.

    App.tsx
    import { useIntlayer } from "preact-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Solid suporta nós HTML diretamente no JSX.

    App.tsx
    import { useIntlayer } from "solid-intlayer";

const AppContent = () => {
const { myHtmlContent } = useIntlayer("app");
return <div>{myHtmlContent}</div>;
};

    Angular utiliza a diretiva [innerHTML] para renderizar conteúdo HTML.

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myHtmlContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}

    Use o método .use() para fornecer componentes personalizados ou sobrescrever tags:

    typescript
    content().myHtmlContent.use({
p: { class: "prose" },
CustomLink: { href: "/details" },
})

    Configuração Global com HTMLProvider

    Você pode configurar a renderização de HTML globalmente para toda a sua aplicação. Isso é ideal para definir componentes personalizados que devem estar disponíveis em todo o conteúdo 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>
);

    Você também pode usar o seu próprio renderizador de 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>
);
    Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.
    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
components: {
  p: (props, { slots }) => h("p", { class: "prose", ...props }, slots.default?.()),
  CustomLink: (props, { slots }) => h("a", { href: "/details", ...props }, slots.default?.()),
},
});

app.mount("#app");

    Você também pode usar o seu próprio renderizador de HTML:

    main.ts
    import { createApp, h } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerHTML } from "vue-intlayer/html";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerHTML, {
renderHTML: async (html) => {
  const { renderHTML } = await import('vue-intlayer/html');
  return renderHTML(html);
},
});

app.mount("#app");
    Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.
    App.svelte
    <script lang="ts">
import { HTMLProvider } from "svelte-intlayer/html";
import MyCustomP from "./MyCustomP.svelte";
</script>

<HTMLProvider
components={{
  p: MyCustomP,
}}
>
<slot />
</HTMLProvider>
    Importar seu renderer HTML dinamicamente é uma boa forma de reduzir o tamanho do bundle da sua aplicação.
    AppProvider.tsx
    import { HTMLProvider } from "preact-intlayer/html";

export const AppProvider = ({ children }) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {children}
</HTMLProvider>
);

    Você também pode usar o seu próprio renderizador de HTML:

    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>
);
    Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.
    AppProvider.tsx
    import { HTMLProvider } from "solid-intlayer/html";

export const AppProvider = (props) => (
<HTMLProvider
  components={{
    p: (props) => <p className="prose" {...props} />,
  }}
>
  {props.children}
</HTMLProvider>
);

    Você também pode usar o seu próprio renderizador de HTML:

    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>
);
    Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.
    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    components: {
      p: { class: "prose" },
      CustomLink: { href: "/details" },
    },
  }),
],
};

    Você também pode usar o seu próprio renderizador de HTML:

    app.config.ts
    import { createIntlayerHTMLProvider } from "angular-intlayer/html";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerHTMLProvider({
    renderHTML: async (html) => {
      const { renderHTML } = await import('angular-intlayer/html');
      return renderHTML(html);
    },
  }),
],
};
    Importar dinamicamente o seu renderizador de HTML é uma boa maneira de reduzir o tamanho do bundle da sua aplicação.

    Renderização Manual e Ferramentas Avançadas

    Se precisar renderizar strings HTML brutas ou tiver mais controlo sobre o mapeamento de componentes, use as seguintes ferramentas.

    Componente <HTMLRenderer />

    Renderize uma string HTML con componentes específicos.

    tsx
    import { HTMLRenderer } from "react-intlayer/html";

<HTMLRenderer components={{ p: MyCustomP }}>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

    Obtenha uma função de renderização pré-configurada.

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

    Utilitário renderHTML()

    Utilitário independente para renderização fora de componentes.

    tsx
    import { renderHTML } from "react-intlayer/html";

const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });

    Componente <HTMLRenderer />

    vue
    <script setup>
import { HTMLRenderer } from "vue-intlayer/html";
</script>

<template>
<HTMLRenderer content="<p>Hello World</p>" />
</template>

    Componente <HTMLRenderer />

    svelte
    <script lang="ts">
import { HTMLRenderer } from "svelte-intlayer/html";
</script>

<HTMLRenderer value="<p>Hello World</p>" />

    Hook useHTMLRenderer()

    svelte
    <script lang="ts">
import { useHTMLRenderer } from "svelte-intlayer/html";
const render = useHTMLRenderer();
</script>

{@html render("<p>Hello World</p>")}

    Utilitário renderHTML()

    svelte
    <script lang="ts">
import { renderHTML } from "svelte-intlayer/html";
</script>

{@html renderHTML("<p>Hello World</p>")}

    Componente <HTMLRenderer />

    tsx
    import { HTMLRenderer } from "preact-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

    tsx
    import { useHTMLRenderer } from "preact-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Utilitário renderHTML()

    tsx
    import { renderHTML } from "preact-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    Componente <HTMLRenderer />

    tsx
    import { HTMLRenderer } from "solid-intlayer/html";

<HTMLRenderer>
{"<p>Hello World</p>"}
</HTMLRenderer>

    Hook useHTMLRenderer()

    tsx
    import { useHTMLRenderer } from "solid-intlayer/html";

const render = useHTMLRenderer();

return <div>{render("<p>Hello World</p>")}</div>;

    Utilitário renderHTML()

    tsx
    import { renderHTML } from "solid-intlayer/html";

return <div>{renderHTML("<p>Hello World</p>")}</div>;

    Serviço IntlayerHTMLService

    Renderize uma string HTML utilizando o serviço.

    typescript
    import { IntlayerHTMLService } from "angular-intlayer/html";

export class MyComponent {
constructor(private markdownService: IntlayerHTMLService) {}

renderHTML(html: string) {
  return this.markdownService.renderHTML(html);
}
}

    Referência de Opções

    Essas opções podem ser passadas para HTMLProvider, HTMLRenderer, useHTMLRenderer e renderHTML.

    Opção Tipo Padrão Descrição
    components Record<string, any> {} Um mapa que associa tags HTML ou nomes de componentes personalizados aos componentes.
    renderHTML Function null Uma função de renderização personalizada para substituir completamente o parser HTML padrão (Apenas para providers Vue/Svelte).
    Nota: Para React e Preact, as tags HTML padrão são fornecidas automaticamente. Você só precisa passar a prop components se quiser sobrescrevê-las ou adicionar componentes personalizados.
    MarkdownBusca de função