Zero dependênciasPronto para MDXFeito para SSRMultiframework

Markdown que renderiza 5× mais rápido.

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

O Intlayer traz o seu próprio motor Markdown. Sem dependências, com MDX, analisado no servidor e renderizado nativamente em React, Next.js, Vue, Svelte, Solid, Preact e Angular. Você nunca mais precisa escolher um renderizador.

Ler a documentação Ver os números

markdown-file.content.md

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

Quando o campo de frontmatter locale é omitido, o Intlayer usa o idioma padrão configurado. Você pode manter todo o seu conteúdo em um único arquivo markdown sem prefixos de idioma.

Exemplo 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

O campo de frontmatter locale define o idioma do conteúdo. É opcional. Se não for fornecido, o Intlayer usará o idioma padrão, que também é usado como reserva caso não haja tradução disponível.

Exemplo de estrutura de arquivos:

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;

Declare Markdown diretamente em um dicionário TypeScript, ESM ou JSON usando as funções md() e file(), combinando traduções com total segurança de tipos.

Exemplo de estructura de archivos:

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

Sem dependências

Componentes MDX

Frontmatter tipado

Removido se não usado

5× a taxa de processamento do markdown-to-jsx

O parser foi reescrito em torno de uma precedência de regras em cache e de um lookbehind incremental, então um documento é percorrido uma vez em vez de ser reanalisado regra a regra. O mesmo Markdown, o mesmo resultado, uma fração do trabalho.

Intlayer5×

markdown-to-jsx1×

Taxa relativa de análise e renderização; quanto maior, melhor.

0 kB

enviados quando o seu app não declara nenhum nó Markdown — o renderizador é removido no build.

~55 kB

de chunk do parser carregado de forma preguiçosa atrás de Suspense, sem bloquear a primeira pintura.

dependências de runtime — nada para auditar, nada para manter sincronizado.

Um motor em vez de uma lista de compras

Todo projeto termina com a mesma tarefa: pesar markdown-to-jsx contra marked, remark e MDX, integrar o vencedor e descobrir que ele não faz MDX, que os tipos são frouxos ou que a cadeia de plugins quebra no cliente. O Intlayer faz essa escolha por você.

Capacidade

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Componentes MDX

IntlayerComponentes MDXSuportado

markdown-to-jsxComponentes MDXSem suporte

markedComponentes MDXSem suporte

remark / rehypeComponentes MDXParcial, ou por meio de pacotes extras

@mdx-jsComponentes MDXSuportado

Nós e sobrescritas com tipos seguros

IntlayerNós e sobrescritas com tipos segurosSuportado

markdown-to-jsxNós e sobrescritas com tipos segurosSem suporte

markedNós e sobrescritas com tipos segurosParcial, ou por meio de pacotes extras

remark / rehypeNós e sobrescritas com tipos segurosParcial, ou por meio de pacotes extras

@mdx-jsNós e sobrescritas com tipos segurosParcial, ou por meio de pacotes extras

Saída para React e Next.js

IntlayerSaída para React e Next.jsSuportado

markdown-to-jsxSaída para React e Next.jsSuportado

markedSaída para React e Next.jsSem suporte

remark / rehypeSaída para React e Next.jsParcial, ou por meio de pacotes extras

@mdx-jsSaída para React e Next.jsSuportado

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularSuportado

markdown-to-jsxVue, Svelte, Solid, Preact, AngularSem suporte

markedVue, Svelte, Solid, Preact, AngularParcial, ou por meio de pacotes extras

remark / rehypeVue, Svelte, Solid, Preact, AngularParcial, ou por meio de pacotes extras

@mdx-jsVue, Svelte, Solid, Preact, AngularParcial, ou por meio de pacotes extras

Análise no servidor, render no cliente, sem reanálise

IntlayerAnálise no servidor, render no cliente, sem reanáliseSuportado

markdown-to-jsxAnálise no servidor, render no cliente, sem reanáliseSem suporte

markedAnálise no servidor, render no cliente, sem reanáliseParcial, ou por meio de pacotes extras

remark / rehypeAnálise no servidor, render no cliente, sem reanáliseSuportado

@mdx-jsAnálise no servidor, render no cliente, sem reanáliseParcial, ou por meio de pacotes extras

Configurado sem cadeia de plugins

IntlayerConfigurado sem cadeia de pluginsSuportado

markdown-to-jsxConfigurado sem cadeia de pluginsSuportado

markedConfigurado sem cadeia de pluginsParcial, ou por meio de pacotes extras

remark / rehypeConfigurado sem cadeia de pluginsSem suporte

@mdx-jsConfigurado sem cadeia de pluginsSem suporte

Metadados de frontmatter tipados

IntlayerMetadados de frontmatter tipadosSuportado

markdown-to-jsxMetadados de frontmatter tipadosSem suporte

markedMetadados de frontmatter tipadosSem suporte

remark / rehypeMetadados de frontmatter tipadosParcial, ou por meio de pacotes extras

@mdx-jsMetadados de frontmatter tipadosParcial, ou por meio de pacotes extras

Zero dependências de runtime

IntlayerZero dependências de runtimeSuportado

markdown-to-jsxZero dependências de runtimeSuportado

markedZero dependências de runtimeSuportado

remark / rehypeZero dependências de runtimeSem suporte

@mdx-jsZero dependências de runtimeSem suporte

Removido do bundle quando não usado

IntlayerRemovido do bundle quando não usadoSuportado

markdown-to-jsxRemovido do bundle quando não usadoSem suporte

markedRemovido do bundle quando não usadoSem suporte

remark / rehypeRemovido do bundle quando não usadoSem suporte

@mdx-jsRemovido do bundle quando não usadoSem suporte

SuportadoParcial, ou por meio de pacotes extrasSem suporte

remark e rehype dão conta da maior parte, mas por meio de uma cadeia de plugins que você mesmo monta — e que nem sempre se comporta igual no navegador e no servidor.
markdown-to-jsx só renderiza React e o marked devolve uma string HTML. Para Vue, Svelte, Solid ou Angular não há equivalente a que recorrer.
Nenhum deles entrega um frontmatter tipado: você empilha uma camada de conteúdo por cima ou analisa os metadados por conta própria.

O mesmo nó, em todos os frameworks

Um nó Markdown vira a saída nativa do framework em que está — JSX, um VNode ou uma string HTML. Svelte, Solid e Angular são de primeira classe, não remendos.

ReactRenderiza como JSX

Next.jsRenderiza como JSX

VueRenderiza como VNode

NuxtRenderiza como VNode

SvelteRenderiza como HTML

SolidRenderiza como JSX

PreactRenderiza como JSX

AngularRenderiza como HTML

Analise no servidor, renderize no cliente

Analisar e renderizar são dois passos separados. parseMarkdown produz um AST serializável no servidor, o navegador o recebe como JSON e todo renderizador o aceita como está — o documento nunca é percorrido duas vezes.

No servidor

O documento é analisado uma vez, virando JSON que você pode cachear, transmitir ou armazenar.

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

No cliente

Os renderizadores aceitam uma string bruta ou um AST, então o navegador só 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} />;}

Configure uma vez, refine por nó

Declare seus componentes no provider e todo nó Markdown do app passa a usá-los. Quando um nó precisa ser diferente, use() sobrescreve apenas aquele — sem cadeia de plugins, sem etapa de build separada.

Global, para todo o 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 um nó

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() vence o provider, que vence o renderizador padrão.

Frontmatter tipado, sem camada de conteúdo

O frontmatter de um arquivo Markdown é analisado junto com o documento e exposto no nó como um objeto de metadados tipado. Os campos editoriais pelos quais você instalava uma camada de conteúdo estão simplesmente lá, com autocompletar.

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

O mesmo motor também analisa HTML

Os nós html() passam pelo mesmo pipeline: as tags são mapeadas para os seus componentes, com a mesma tipagem e as mesmas regras de sobrescrita.

Ver conteúdo HTML

i18n baseado em código

Traduções com segurança de tipo que vivem no seu repositório.

Declare conteúdo ao lado de seus componentes em TypeScript ou JavaScript. Intlayer gera tipos automaticamente, oferecendo autocompletar, validação e feedback instantâneo. Sem mais chaves ausentes ou trocas de contexto.

Começar a codar

AI CLI Tool

Automatize traduções a partir do seu terminal.

A CLI para auditar, preencher e traduzir JSON e Markdown com IA.

Execute `npx intlayer fill` para detectar chaves ausentes e gerar traduções usando OpenAI, Claude ou modelos locais. Mantenha seu histórico Git limpo e tipos seguros.

Experimente a CLI

Intlayer TMS

Pare de pagar por palavra. Automatize com IA.

A alternativa open-source e de auto-hospedagem ao Crowdin e Lokalise. Construído para fluxos de trabalho modernos de desenvolvedores.

Gerencie traduções diretamente no seu código ou via editor visual. Aproveite a IA para traduzir instantaneamente. Colabore com sua equipe sem limites de assentos.

Ver TMS

CMS Headless

Conecte seu código local com conteúdo remoto.

Gerencie conteúdo multilíngue sem sobrecarga. Intlayer interconecta dicionários locais com gestão remota, permitindo Live Sync para atualizações rápidas sem reconstrução. Use webhooks para CI/CD e gerencie feature flags.

Ver CMS

Feature Flags

Alterne recursos instantaneamente. Sem deploy.

Dicionários Intlayer são mais que texto. Use-os para declarar lógica, estilos e configurações. Com Live Sync, alterne recursos, mude temas de UI e atualize o comportamento do app em tempo real direto do CMS.

Testar recursos

Testes A/B

Seu playground para experimentos de produto.

Seja o primeiro a explorar a nova beta de A/B Testing orientado por IA da Intlayer, construída para aumentar a descoberta e orientar decisões de produto mais inteligentes. Teste qualquer coisa em tempo real, desde copy e design até recursos completos, e deixe os dados mostrarem o que realmente funciona.

Ver teste A/B

Diapositiva anterior←

Diapositiva seguinte→