Creation:2026-01-20Last update:2026-03-24

Referência esta documentação ao seu assistente AI favorito

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Faça sua pergunta e obtenha um resumo do documento referenciando esta página e o provedor AI de sua escolha

Histórico de versões

"Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"
v8.5.024/03/2026
"mover a importação de {{framework}}-intlayer para {{framework}}-intlayer/html"
v8.5.024/03/2026
"Adicionar HTMLRenderer / useHTMLRenderer / utilitário renderHTML"
v8.0.022/01/2026
"Adicionar suporte ao parsing de HTML"
v8.0.020/01/2026

O conteúdo desta página foi traduzido com uma IA.

Veja a última versão do conteúdo original em inglês

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 documentation

Copy

Copy doc Markdown to clipboard

Conteúdo HTML / HTML no Intlayer

Name: Intlayer
Author: 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

Copiar código

Copiar o código para a área de transferência

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;

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

{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

Copiar código

Copiar o código para a área de transferência

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { myHtmlContent } = useIntlayer("app");</script><template>  <component :is="myHtmlContent" /></template>

Use .use() para sobrescrever:

vue

Copiar código

Copiar o código para a área de transferência

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

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

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

svelte

Copiar código

Copiar o código para a área de transferência

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

<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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

 <script lang="ts">   import { HTMLProvider } from "svelte-intlayer/html";   import MyCustomP from "./MyCustomP.svelte"; </script> <HTMLProvider   components={{     p: MyCustomP,   }} >   <slot /> </HTMLProvider>

AppProvider.tsx

Copiar código

Copiar o código para a área de transferência

 import { HTMLProvider } from "preact-intlayer/html"; export const AppProvider = ({ children }) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {children}   </HTMLProvider> );

 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

Copiar código

Copiar o código para a área de transferência

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

 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

Copiar código

Copiar o código para a área de transferência

 import { HTMLProvider } from "solid-intlayer/html"; export const AppProvider = (props) => (   <HTMLProvider     components={{       p: (props) => <p className="prose" {...props} />,     }}   >     {props.children}   </HTMLProvider> );

 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

Copiar código

Copiar o código para a área de transferência

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

 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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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);      },    }),  ],};

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);      },    }),  ],};

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

Copiar código

Copiar o código para a área de transferência

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

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

#### Componente

<HTMLRenderer />

vue

Copiar código

Copiar o código para a área de transferência

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

 <script setup> import { HTMLRenderer } from "vue-intlayer/html"; </script> <template>   <HTMLRenderer content="<p>Hello World</p>" /> </template>

Componente `<HTMLRenderer />`

svelte

Copiar código

Copiar o código para a área de transferência

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

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

Hook `useHTMLRenderer()`

svelte

Copiar código

Copiar o código para a área de transferência

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

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

Utilitário `renderHTML()`

svelte

Copiar código

Copiar o código para a área de transferência

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

<script lang="ts">import { renderHTML } from "svelte-intlayer/html";</script>{@html renderHTML("<p>Hello World</p>")}

#### Componente

<HTMLRenderer />

tsx

Copiar código

Copiar o código para a área de transferência

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "preact-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Copiar código

Copiar o código para a área de transferência

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "preact-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Utilitário

renderHTML()

tsx

Copiar código

Copiar o código para a área de transferência

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 import { renderHTML } from "preact-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

#### Componente

<HTMLRenderer />

tsx

Copiar código

Copiar o código para a área de transferência

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

 import { HTMLRenderer } from "solid-intlayer/html"; <HTMLRenderer>   {"<p>Hello World</p>"} </HTMLRenderer>

#### Hook

useHTMLRenderer()

tsx

Copiar código

Copiar o código para a área de transferência

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

 import { useHTMLRenderer } from "solid-intlayer/html"; const render = useHTMLRenderer(); return <div>{render("<p>Hello World</p>")}</div>;

#### Utilitário

renderHTML()

tsx

Copiar código

Copiar o código para a área de transferência

 import { renderHTML } from "solid-intlayer/html"; return <div>{renderHTML("<p>Hello World</p>")}</div>;

 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

Copiar código

Copiar o código para a área de transferência

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

import { IntlayerHTMLService } from "angular-intlayer";export class MyComponent {  constructor(private markdownService: IntlayerHTMLService) {}  renderHTML(html: string) {    return this.markdownService.renderMarkdown(html);  }}

Referência de Opções

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

Mostrar todo o conteúdo da tabela

Abrir a tabela em um modal para ver todo o conteúdo claramente

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.

Markdown

Busca de função

Histórico de versões

Conteúdo HTML / HTML no Intlayer

Declarando Conteúdo HTML

O Nó html()

Renderização de HTML

Renderização automática (usando useIntlayer)

Configuração Global com HTMLProvider

Renderização Manual e Ferramentas Avançadas

Componente <HTMLRenderer />

Hook useHTMLRenderer()

Utilitário renderHTML()

Referência de Opções

O Nó `html()`

Renderização automática (usando `useIntlayer`)

Configuração Global com `HTMLProvider`

Componente `<HTMLRenderer />`

Hook `useHTMLRenderer()`

Utilitário `renderHTML()`