Cero dependenciasCompatible con MDXDiseñado para SSRMultiframework

Markdown que se renderiza 5× más rápido.

Name: Intlayer Markdown
Rating: 4.92 (64 reviews)
Author: Intlayer

Intlayer incluye su propio motor Markdown. Sin dependencias, con MDX, analizado en el servidor y renderizado de forma nativa en React, Next.js, Vue, Svelte, Solid, Preact y Angular. Nunca más tendrás que elegir un renderizador.

Leer la documentación Ver las cifras

markdown-file.content.md

---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

Cuando se omite el campo locale de frontmatter, Intlayer usa el idioma predeterminado configurado. Puedes mantener todo tu contenido en un solo archivo markdown sin prefijos de idioma.

Ejemplo de estructura de archivos:

content
└── markdown-file.content.md

markdown-file.en.content.md

---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

El campo de frontmatter locale define el idioma del contenido. Es opcional. Si no se proporciona, Intlayer usará el idioma predeterminado, que también se usa como idioma de reserva si no hay traducción disponible para un idioma específico.

Ejemplo de estructura de archivos:

content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md

article.content.ts

import { md, file, t, type Dictionary } from 'intlayer';export default {  key: 'article',  content: {    body: t({      en: md(file('./article.en.md')),      fr: md(file('./article.fr.md')),    }),  },} satisfies Dictionary;

Declara Markdown directamente en un diccionario TypeScript, ESM o JSON usando las funciones md() y file(), combinando traducciones con seguridad de tipos.

Ejemplo de estructura de archivos:

content
├── article.content.ts
├── article.en.md
└── article.fr.md

Sin dependencias

Componentes MDX

Frontmatter tipado

Eliminado si no se usa

5× el rendimiento de markdown-to-jsx

El analizador se reescribió sobre una precedencia de reglas cacheada y un lookbehind incremental, de modo que un documento se recorre una vez en lugar de reanalizarse regla por regla. El mismo Markdown, el mismo resultado, una fracción del trabajo.

Intlayer5×

markdown-to-jsx1×

Rendimiento relativo de análisis y renderizado; más alto es mejor.

0 kB

enviados si tu aplicación no declara ningún nodo Markdown: el renderizador se elimina en el build.

~55 kB

de chunk del analizador cargado de forma diferida tras Suspense, sin bloquear el primer pintado.

dependencias en tiempo de ejecución: nada que auditar, nada que mantener sincronizado.

Un solo motor en lugar de una lista de la compra

Todo proyecto acaba con la misma tarea: comparar markdown-to-jsx con marked, remark y MDX, integrar al ganador y descubrir que no soporta MDX, que sus tipos son laxos o que su cadena de plugins se rompe en el cliente. Intlayer toma esa decisión por ti.

Capacidad

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Componentes MDX

IntlayerComponentes MDXCompatible

markdown-to-jsxComponentes MDXNo compatible

markedComponentes MDXNo compatible

remark / rehypeComponentes MDXParcial, o mediante paquetes adicionales

@mdx-jsComponentes MDXCompatible

Nodos y sobrescrituras tipados

IntlayerNodos y sobrescrituras tipadosCompatible

markdown-to-jsxNodos y sobrescrituras tipadosNo compatible

markedNodos y sobrescrituras tipadosParcial, o mediante paquetes adicionales

remark / rehypeNodos y sobrescrituras tipadosParcial, o mediante paquetes adicionales

@mdx-jsNodos y sobrescrituras tipadosParcial, o mediante paquetes adicionales

Salida para React y Next.js

IntlayerSalida para React y Next.jsCompatible

markdown-to-jsxSalida para React y Next.jsCompatible

markedSalida para React y Next.jsNo compatible

remark / rehypeSalida para React y Next.jsParcial, o mediante paquetes adicionales

@mdx-jsSalida para React y Next.jsCompatible

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularCompatible

markdown-to-jsxVue, Svelte, Solid, Preact, AngularNo compatible

markedVue, Svelte, Solid, Preact, AngularParcial, o mediante paquetes adicionales

remark / rehypeVue, Svelte, Solid, Preact, AngularParcial, o mediante paquetes adicionales

@mdx-jsVue, Svelte, Solid, Preact, AngularParcial, o mediante paquetes adicionales

Análisis en servidor, render en cliente, sin reanálisis

IntlayerAnálisis en servidor, render en cliente, sin reanálisisCompatible

markdown-to-jsxAnálisis en servidor, render en cliente, sin reanálisisNo compatible

markedAnálisis en servidor, render en cliente, sin reanálisisParcial, o mediante paquetes adicionales

remark / rehypeAnálisis en servidor, render en cliente, sin reanálisisCompatible

@mdx-jsAnálisis en servidor, render en cliente, sin reanálisisParcial, o mediante paquetes adicionales

Configurable sin cadena de plugins

IntlayerConfigurable sin cadena de pluginsCompatible

markdown-to-jsxConfigurable sin cadena de pluginsCompatible

markedConfigurable sin cadena de pluginsParcial, o mediante paquetes adicionales

remark / rehypeConfigurable sin cadena de pluginsNo compatible

@mdx-jsConfigurable sin cadena de pluginsNo compatible

Metadatos de frontmatter tipados

IntlayerMetadatos de frontmatter tipadosCompatible

markdown-to-jsxMetadatos de frontmatter tipadosNo compatible

markedMetadatos de frontmatter tipadosNo compatible

remark / rehypeMetadatos de frontmatter tipadosParcial, o mediante paquetes adicionales

@mdx-jsMetadatos de frontmatter tipadosParcial, o mediante paquetes adicionales

Cero dependencias en tiempo de ejecución

IntlayerCero dependencias en tiempo de ejecuciónCompatible

markdown-to-jsxCero dependencias en tiempo de ejecuciónCompatible

markedCero dependencias en tiempo de ejecuciónCompatible

remark / rehypeCero dependencias en tiempo de ejecuciónNo compatible

@mdx-jsCero dependencias en tiempo de ejecuciónNo compatible

Eliminado del bundle si no se usa

IntlayerEliminado del bundle si no se usaCompatible

markdown-to-jsxEliminado del bundle si no se usaNo compatible

markedEliminado del bundle si no se usaNo compatible

remark / rehypeEliminado del bundle si no se usaNo compatible

@mdx-jsEliminado del bundle si no se usaNo compatible

CompatibleParcial, o mediante paquetes adicionalesNo compatible

remark y rehype pueden hacer casi todo, pero mediante una cadena de plugins que tú mismo ensamblas y que no siempre se comporta igual en el navegador que en el servidor.
markdown-to-jsx solo renderiza React y marked te devuelve una cadena HTML. Para Vue, Svelte, Solid o Angular no hay un equivalente al que recurrir.
Ninguno te da un frontmatter tipado: apilas una capa de contenido encima o analizas los metadatos tú mismo.

El mismo nodo, en todos los frameworks

Un nodo Markdown se convierte en la salida nativa del framework en el que aterriza: JSX, un VNode o una cadena HTML. Svelte, Solid y Angular son ciudadanos de primera clase, no añadidos tardíos.

ReactSe renderiza como JSX

Next.jsSe renderiza como JSX

VueSe renderiza como VNode

NuxtSe renderiza como VNode

SvelteSe renderiza como HTML

SolidSe renderiza como JSX

PreactSe renderiza como JSX

AngularSe renderiza como HTML

Analiza en el servidor, renderiza en el cliente

Analizar y renderizar son dos pasos distintos. parseMarkdown produce un AST serializable en el servidor, el navegador lo recibe como JSON y cualquier renderizador lo acepta tal cual: el documento nunca se recorre dos veces.

En el servidor

El documento se analiza una vez, en un JSON que puedes cachear, transmitir o almacenar.

route.server.ts

import { parseMarkdown } from 'react-intlayer/markdown';export const loader = async () => {  // Walked once, on the server  const ast = parseMarkdown('## My title\n\nLorem Ipsum');  return Response.json({ content: ast });};

En el cliente

Los renderizadores aceptan una cadena o un AST, así que el navegador solo pinta.

Page.tsx

import { useLoaderData } from 'react-router';import { MarkdownRenderer } from 'react-intlayer/markdown';export default function Page() {  const { content } = useLoaderData();  // No re-parsing in the browser  return <MarkdownRenderer content={content} />;}

Defínelo una vez, refínalo por nodo

Declara tus componentes en el provider y todos los nodos Markdown de la app los adoptan. Cuando un nodo necesita ser distinto, use() solo sobrescribe ese nodo: sin cadena de plugins ni paso de build aparte.

Global, para toda la app

AppProvider.tsx

import { MarkdownProvider } from 'react-intlayer/markdown';export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX component    }}  >    {children}  </MarkdownProvider>);

Local, para un solo nodo

Article.tsx

import { useIntlayer } from 'react-intlayer';const Article = () => {  const { body } = useIntlayer('article');  // Overrides the provider, for this node only  return body.use({    h1: ({ children }) => <h1 className="text-primary">{children}</h1>,  });};

use() prevalece sobre el provider, que prevalece sobre el renderizador por defecto.

Frontmatter tipado, sin capa de contenido

El frontmatter de un archivo Markdown se analiza junto con el documento y se expone en el nodo como un objeto de metadatos tipado. Los campos editoriales por los que instalabas una capa de contenido están ahí sin más, con autocompletado.

article.en.content.md

---key: articlelocale: entitle: Shipping i18n Markdownauthor: aymericzip---# Shipping i18n MarkdownHere an example of markdown content.

Article.tsx

const { body } = useIntlayer('article');body.metadata.title; // 'Shipping i18n Markdown'body.metadata.author; // 'aymericzip'body.value; // the raw Markdown string

El mismo motor también analiza HTML

Los nodos html() pasan por el mismo pipeline: las etiquetas se asignan a tus propios componentes, con el mismo tipado y las mismas reglas de sobrescritura.

Ver contenido HTML

i18n basado en código

Traducciones con seguridad de tipos en tu repositorio.

Declara contenido junto a tus componentes en TypeScript o JavaScript. Intlayer genera tipos automáticamente, dándote autocompletado, validación y feedback instantáneo. Adiós a las claves faltantes y cambios de contexto.

Empezar a programar

AI CLI Tool

Automatiza las traducciones desde tu terminal.

La CLI para auditar, completar y traducir JSON y Markdown con IA.

Ejecuta `npx intlayer fill` para detectar claves faltantes y generar traducciones con OpenAI, Claude o modelos locales. Mantén tu historial Git limpio y un tipado seguro.

Probar la CLI

Intlayer TMS

Deja de pagar por palabra. Automatiza con IA.

La alternativa de código abierto y auto-hospedada a Crowdin y Lokalise. Creado para flujos de trabajo modernos.

Gestiona traducciones directamente en tu código o vía editor visual. Usa IA para traducir al instante. Colabora con tu equipo sin límites de usuarios.

Ver TMS

CMS Headless

Conecta tu código local con contenido remoto.

Gestiona contenido multilingüe sin complicaciones. Intlayer interconecta diccionarios locales con gestión remota, permitiendo Live Sync para actualizaciones en caliente sin reconstruir. Usa webhooks para CI/CD, gestiona feature flags y deja que la IA de traducción automática (WIP) haga el resto.

Ver CMS

Feature Flags

Alterna funciones al instante. Sin despliegues.

Los diccionarios de Intlayer son más que texto. Úsalos para declarar lógica, estilos y configuraciones. Con Live Sync, alterna funciones, cambia temas de UI y actualiza el comportamiento de la app en tiempo real desde el CMS.

Probar funciones

AB testing

Tu campo de juego para experimentos de producto.

Sé el primero en explorar la nueva beta de A/B Testing impulsado por IA de Intlayer, diseñada para impulsar la descubribilidad y guiar decisiones de producto más inteligentes. Prueba cualquier cosa en tiempo real, desde copy y diseño hasta funciones completas, y deja que los datos te muestren lo que realmente funciona.

Ver prueba A/B

Diapositiva anterior←

Diapositiva siguiente→