\n\n \n \n Svelte renderiza los nodos HTML como cadenas de texto. Utiliza `{@html}` para renderizarlo.\n\n ```svelte\n \n\n {@html $content.myHtmlContent}\n ```\n\n \n \n Preact admite nodos HTML directamente en el 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 admite nodos HTML directamente en el 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 utiliza la directiva `[innerHTML]` para renderizar contenido 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 Utiliza el método `.use()` para proporcionar componentes personalizados o sobrescribir etiquetas:\n\n ```typescript\n content().myHtmlContent.use({\n p: { class: \"prose\" },\n CustomLink: { href: \"/details\" },\n })\n ```\n\n \n\n\n## Configuración Global con `HTMLProvider`\n\nPuedes configurar el renderizado de HTML de forma global para toda tu aplicación. Esto es ideal para definir componentes personalizados que deben estar disponibles en todo el contenido 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 También puede utilizar su propio motor de renderizado 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 > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.\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 También puede utilizar su propio motor de renderizado 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 > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.\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 También puede utilizar su propio motor de renderizado 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 > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.\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 También puede utilizar su propio motor de renderizado 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 > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.\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 También puede utilizar su propio motor de renderizado 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 > Importar dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.\n\n \n \n\n---\n\n### Renderizado Manual y Herramientas Avanzadas\n\nSi necesitas renderizar cadenas de HTML sin procesar o tener más control sobre el mapeo de componentes, utiliza las siguientes herramientas.\n\n\n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n Obtén una función de renderizado preconfigurada.\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 #### Componente `Hello World\" />\n \n ```\n\n \n \n \n #### Componente `Hello World\" />\n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```svelte\n \n\n {@html render(\" \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"preact-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n \n #### Componente `\n {\" \n ```\n\n #### Hook `useHTMLRenderer()`\n\n ```tsx\n import { useHTMLRenderer } from \"solid-intlayer/html\";\n\n const render = useHTMLRenderer();\n\n return \n \n #### Servicio `IntlayerHTMLService`\n Renderiza una cadena HTML utilizando el servicio.\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.renderHTML(html);\n }\n }\n ```\n\n \n \n\n---\n\n## Referencia de Opciones\n\nEstas opciones se pueden pasar a `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer` y `renderHTML`.\n\n| Opción | Tipo | Por Defecto | Descripción |\n| :----------- | :-------------------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------ |\n| `components` | `Record` | `{}` | Un mapa de etiquetas HTML o nombres de componentes personalizados a componentes. |\n| `renderHTML` | `Function` | `null` | Una función de renderizado personalizada para reemplazar completamente el parser HTML predeterminado (Solo para proveedores de Vue/Svelte). |\n\n> Nota: Para React y Preact, las etiquetas HTML estándar se proporcionan automáticamente. Solo necesitas pasar la prop `components` si deseas sobrescribirlas o agregar componentes personalizados.\n","about":"Aprende a declarar y utilizar contenido HTML con componentes personalizados en Intlayer. Sigue esta documentación para incrustar contenido enriquecido tipo HTML con reemplazo dinámico de componentes en tu proyecto internacionalizado.","url":"https://intlayer.org/es/doc/concept/content/html","datePublished":"20-01-2026","dateModified":"24-03-2026","keywords":"HTML, Componentes Personalizados, Contenido Enriquecido, Intlayer, Next.js, JavaScript, React, Vue, Svelte","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Desarrolladores, Gestores de Contenido"}}El nodo
Renderizado Automático (usando
Configuración Global con
Componente
Hook
Utilidad
{myHtmlContent}
;\n };\n ```\n\n {myHtmlContent}
;\n };\n ```\n\n Hello World
\"}\nHello World
\");\n ```\n\n #### Utilidad `renderHTML()`\n\n Utilidad independiente para renderizar fuera de los componentes.\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 #### Utilidad `renderHTML()`\n\n ```svelte\n \n\n {@html renderHTML(\"Hello World
\")}\n ```\n\nHello World
\"}\n{render(\"
;\n ```\n\n #### Utilidad `renderHTML()`\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 #### Utilidad `renderHTML()`\n\n ```tsx\n import { renderHTML } from \"solid-intlayer/html\";\n\n return Hello World
\")}{renderHTML(\"
;\n ```\n\n Hello World
\")}Creación:2026-01-20Última actualización:2026-03-24
Referencia esta doc a tu asistente AI favoritoChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección
Historial de versiones
- "Add `intlayerHTML` plugin object; use `app.use(intlayerHTML)` instead of `app.use(installIntlayerHTML)`"v8.5.024/3/2026
- "mover la importación de {{framework}}-intlayer a {{framework}}-intlayer/html"v8.5.024/3/2026
- "Agregar HTMLRenderer / useHTMLRenderer / utilidad renderHTML"v8.0.022/1/2026
- "Agregar soporte para parsing HTML"v8.0.020/1/2026
El contenido de esta página ha sido traducido con una IA.
Ver la última versión del contenido original en inglésEditar esta documentación
Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.
Enlace de GitHub a la documentaciónCopiar
Copiar el Markdown del documento a la portapapeles
Contenido HTML / HTML en Intlayer
Intlayer admite contenido HTML, lo que permite incrustar contenido enriquecido y estructurado dentro de los diccionarios. Este contenido se puede renderizar con etiquetas HTML estándar o reemplazarse por componentes personalizados en tiempo de ejecución.
Declarar contenido HTML
Puedes declarar contenido HTML mediante la función html o simplemente como una cadena de texto.
Utiliza la función html para declarar explícitamente contenido HTML. Esto garantiza que las etiquetas estándar se mapeen correctamente incluso si la detección automática está desactivada.
htmlDictionary.content.ts
Copiar código
Copiar el código al portapapeles
import { html, type Dictionary } from "intlayer";const htmlDictionary = { key: "app", contentAutoTransformation: true, // puede configurarse en el archivo de configuración content: { myHtmlContent: html("<p>Hello <strong>World</strong></p>"), },} satisfies Dictionary;export default htmlDictionary;El nodo html()
La función html() es una nueva característica en Intlayer v8 que le permite definir explícitamente contenido HTML en sus diccionarios. Aunque Intlayer a menudo puede detectar automáticamente el contenido HTML, el uso de la función html() ofrece varias ventajas:
- Seguridad de Tipos: La función
html()le permite definir las props esperadas para los componentes personalizados, lo que proporciona un mejor autocompletado y comprobación de tipos en su editor. - Declaración Explícita: Garantiza que una cadena siempre se trate como HTML, incluso si no contiene etiquetas HTML estándar que activarían la detección automática.
- Definición de Componentes Personalizados: Puede pasar un segundo argumento a
html()para definir los componentes personalizados y sus tipos de props esperados.
typescript
Copiar código
Copiar el código al portapapeles
import { html } from "intlayer";const myContent = html( "<MyCustomComponent title='Hola'>Mundo</MyCustomComponent>", { MyCustomComponent: { title: "string", children: "node", }, });Al utilizar el método .use() en un nodo HTML, los componentes que proporcione se cotejarán con la definición proporcionada en la función html() (si está disponible).
Renderizado de HTML
El renderizado puede ser gestionado automáticamente por el sistema de contenido de Intlayer o manualmente mediante herramientas especializadas.
Renderizado Automático (usando useIntlayer)
Cuando accedes al contenido a través de useIntlayer, los nodos HTML ya están preparados para el renderizado.
Los nodos HTML se pueden renderizar directamente como JSX. Las etiquetas estándar funcionan automáticamente.
App.tsx
Copiar código
Copiar el código al portapapeles
import { useIntlayer } from "react-intlayer";const AppContent = () => { const { myHtmlContent } = useIntlayer("app"); return <div>{myHtmlContent}</div>;};Utiliza el método .use() para proporcionar componentes personalizados o sobrescribir etiquetas:
tsx
Copiar código
Copiar el código al portapapeles
{myHtmlContent.use({ p: (props) => <p className="prose" {...props} />, CustomLink: ({ children }) => <a href="/details">{children}</a>,})}Configuración Global con HTMLProvider
Puedes configurar el renderizado de HTML de forma global para toda tu aplicación. Esto es ideal para definir componentes personalizados que deben estar disponibles en todo el contenido HTML.
AppProvider.tsx
Copiar código
Copiar el código al portapapeles
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>);También puede utilizar su propio motor de renderizado HTML:
AppProvider.tsx
Copiar código
Copiar el código al portapapeles
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 dinámicamente su renderizador de HTML es una buena manera de reducir el tamaño del paquete de su aplicación.
Renderizado Manual y Herramientas Avanzadas
Si necesitas renderizar cadenas de HTML sin procesar o tener más control sobre el mapeo de componentes, utiliza las siguientes herramientas.
Componente <HTMLRenderer />
Renderiza una cadena HTML con componentes específicos.
tsx
Copiar código
Copiar el código al portapapeles
import { HTMLRenderer } from "react-intlayer/html";<HTMLRenderer components={{ p: MyCustomP }}> {"<p>Hello World</p>"}</HTMLRenderer>Hook useHTMLRenderer()
Obtén una función de renderizado preconfigurada.
tsx
Copiar código
Copiar el código al portapapeles
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>");Utilidad renderHTML()
Utilidad independiente para renderizar fuera de los componentes.
tsx
Copiar código
Copiar el código al portapapeles
import { renderHTML } from "react-intlayer/html";const jsx = renderHTML("<p>Hello</p>", { components: { p: 'div' } });Referencia de Opciones
Estas opciones se pueden pasar a HTMLProvider, HTMLRenderer, useHTMLRenderer y renderHTML.
Mostrar todo el contenido de la tabla
Abrir la tabla en una ventana flotante para ver todo el contenido claramente
| Opción | Tipo | Por Defecto | Descripción |
|---|---|---|---|
components | Record<string, any> | {} | Un mapa de etiquetas HTML o nombres de componentes personalizados a componentes. |
renderHTML | Function | null | Una función de renderizado personalizada para reemplazar completamente el parser HTML predeterminado (Solo para proveedores de Vue/Svelte). |
Nota: Para React y Preact, las etiquetas HTML estándar se proporcionan automáticamente. Solo necesitas pasar la prop components si deseas sobrescribirlas o agregar componentes personalizados.