Zero dipendenzePronto per MDXPensato per SSRMulti-framework

Markdown che renderizza 5× più veloce.

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

Intlayer include il proprio motore Markdown. Nessuna dipendenza, MDX incluso, analizzato sul server e renderizzato nativamente in React, Next.js, Vue, Svelte, Solid, Preact e Angular. Non dovrai più scegliere un renderer.

Leggi la documentazione Vedi i numeri

markdown-file.content.md

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

Quando il campo frontmatter locale viene omesso, Intlayer usa la lingua predefinita configurata. Puoi mantenere tutti i contenuti in un unico file markdown senza prefissi di lingua.

Esempio di struttura file:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Il campo frontmatter locale definisce la lingua del contenuto. È opzionale. Se non fornito, Intlayer userà la lingua predefinita, usata anche come fallback se non è disponibile una traduzione.

Esempio di struttura file:

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;

Dichiara Markdown direttamente in un dizionario TypeScript, ESM o JSON tramite le funzioni md() e file(), associando le traduzioni con completa type-safety.

Esempio di struttura file:

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

Nessuna dipendenza

Componenti MDX

Frontmatter tipizzato

Rimosso se non usato

Throughput 5× rispetto a markdown-to-jsx

Il parser è stato riscritto attorno a una precedenza delle regole in cache e a un lookbehind incrementale: un documento viene percorso una volta invece di essere riesaminato regola per regola. Stesso Markdown, stesso output, una frazione del lavoro.

Intlayer5×

markdown-to-jsx1×

Throughput relativo di parsing e rendering: più alto è meglio.

0 kB

inviati se la tua app non dichiara alcun nodo Markdown: il renderer viene rimosso in fase di build.

~55 kB

di chunk del parser caricato in modo lazy dietro Suspense, senza mai bloccare il primo rendering.

dipendenze a runtime: niente da controllare, niente da tenere allineato.

Un solo motore invece di una lista della spesa

Ogni progetto finisce con la stessa incombenza: soppesare markdown-to-jsx contro marked, remark e MDX, integrare il vincitore e scoprire che non supporta MDX, che i tipi sono approssimativi o che la catena di plugin si rompe sul client. Intlayer sceglie al posto tuo.

Capacità

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Componenti MDX

IntlayerComponenti MDXSupportato

markdown-to-jsxComponenti MDXNon supportato

markedComponenti MDXNon supportato

remark / rehypeComponenti MDXParziale, o tramite pacchetti aggiuntivi

@mdx-jsComponenti MDXSupportato

Nodi e override type-safe

IntlayerNodi e override type-safeSupportato

markdown-to-jsxNodi e override type-safeNon supportato

markedNodi e override type-safeParziale, o tramite pacchetti aggiuntivi

remark / rehypeNodi e override type-safeParziale, o tramite pacchetti aggiuntivi

@mdx-jsNodi e override type-safeParziale, o tramite pacchetti aggiuntivi

Output per React e Next.js

IntlayerOutput per React e Next.jsSupportato

markdown-to-jsxOutput per React e Next.jsSupportato

markedOutput per React e Next.jsNon supportato

remark / rehypeOutput per React e Next.jsParziale, o tramite pacchetti aggiuntivi

@mdx-jsOutput per React e Next.jsSupportato

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularSupportato

markdown-to-jsxVue, Svelte, Solid, Preact, AngularNon supportato

markedVue, Svelte, Solid, Preact, AngularParziale, o tramite pacchetti aggiuntivi

remark / rehypeVue, Svelte, Solid, Preact, AngularParziale, o tramite pacchetti aggiuntivi

@mdx-jsVue, Svelte, Solid, Preact, AngularParziale, o tramite pacchetti aggiuntivi

Parsing sul server, rendering sul client, senza ri-parsing

IntlayerParsing sul server, rendering sul client, senza ri-parsingSupportato

markdown-to-jsxParsing sul server, rendering sul client, senza ri-parsingNon supportato

markedParsing sul server, rendering sul client, senza ri-parsingParziale, o tramite pacchetti aggiuntivi

remark / rehypeParsing sul server, rendering sul client, senza ri-parsingSupportato

@mdx-jsParsing sul server, rendering sul client, senza ri-parsingParziale, o tramite pacchetti aggiuntivi

Configurabile senza catena di plugin

IntlayerConfigurabile senza catena di pluginSupportato

markdown-to-jsxConfigurabile senza catena di pluginSupportato

markedConfigurabile senza catena di pluginParziale, o tramite pacchetti aggiuntivi

remark / rehypeConfigurabile senza catena di pluginNon supportato

@mdx-jsConfigurabile senza catena di pluginNon supportato

Metadati frontmatter tipizzati

IntlayerMetadati frontmatter tipizzatiSupportato

markdown-to-jsxMetadati frontmatter tipizzatiNon supportato

markedMetadati frontmatter tipizzatiNon supportato

remark / rehypeMetadati frontmatter tipizzatiParziale, o tramite pacchetti aggiuntivi

@mdx-jsMetadati frontmatter tipizzatiParziale, o tramite pacchetti aggiuntivi

Zero dipendenze a runtime

IntlayerZero dipendenze a runtimeSupportato

markdown-to-jsxZero dipendenze a runtimeSupportato

markedZero dipendenze a runtimeSupportato

remark / rehypeZero dipendenze a runtimeNon supportato

@mdx-jsZero dipendenze a runtimeNon supportato

Rimosso dal bundle se non usato

IntlayerRimosso dal bundle se non usatoSupportato

markdown-to-jsxRimosso dal bundle se non usatoNon supportato

markedRimosso dal bundle se non usatoNon supportato

remark / rehypeRimosso dal bundle se non usatoNon supportato

@mdx-jsRimosso dal bundle se non usatoNon supportato

SupportatoParziale, o tramite pacchetti aggiuntiviNon supportato

remark e rehype sanno fare quasi tutto, ma attraverso una catena di plugin che assembli tu e che non si comporta sempre allo stesso modo nel browser e sul server.
markdown-to-jsx renderizza solo React e marked ti restituisce una stringa HTML. Per Vue, Svelte, Solid o Angular non esiste un equivalente a cui rivolgersi.
Nessuno di essi ti dà un frontmatter tipizzato: o impili un content layer sopra, o analizzi i metadati da solo.

Lo stesso nodo, in ogni framework

Un nodo Markdown diventa l’output nativo del framework in cui si trova: JSX, un VNode o una stringa HTML. Svelte, Solid e Angular sono di prima classe, non ripensamenti.

ReactRenderizza come JSX

Next.jsRenderizza come JSX

VueRenderizza come VNode

NuxtRenderizza come VNode

SvelteRenderizza come HTML

SolidRenderizza come JSX

PreactRenderizza come JSX

AngularRenderizza come HTML

Analizza sul server, renderizza sul client

Parsing e rendering sono due passi distinti. parseMarkdown produce un AST serializzabile sul server, il browser lo riceve come JSON e ogni renderer lo accetta così com’è: il documento non viene mai percorso due volte.

Sul server

Il documento viene analizzato una sola volta, in JSON che puoi mettere in cache, trasmettere o salvare.

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

Sul client

I renderer accettano una stringa grezza o un AST, quindi il browser si limita a disegnare.

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

Impostalo una volta, rifiniscilo per nodo

Dichiara i tuoi componenti sul provider e ogni nodo Markdown dell’app li adotta. Quando un nodo deve differire, use() sovrascrive solo quello: nessuna catena di plugin, nessuno step di build separato.

Globale, per tutta l’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>);

Locale, per un singolo 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() prevale sul provider, che prevale sul renderer predefinito.

Frontmatter tipizzato, senza content layer

Il frontmatter di un file Markdown viene analizzato insieme al documento ed esposto sul nodo come oggetto di metadati tipizzato. I campi editoriali per cui installavi un content layer sono semplicemente lì, con autocompletamento.

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

Lo stesso motore analizza anche l’HTML

I nodi html() attraversano la stessa pipeline: i tag vengono mappati sui tuoi componenti, con la stessa tipizzazione e le stesse regole di override.

Vedi il contenuto HTML

i18n basato sul codice

Traduzioni type-safe che vivono nel tuo repository.

Dichiara i contenuti accanto ai tuoi componenti in TypeScript o JavaScript. Intlayer genera automaticamente i tipi, offrendoti autocompletamento, validazione e feedback istantaneo. Basta chiavi mancanti o cambi di contesto.

Inizia a programmare

AI CLI Tool

Automatizza le traduzioni dal tuo terminale.

La CLI per controllare, riempire e tradurre JSON e Markdown con l'IA.

Esegui `npx intlayer fill` per rilevare chiavi mancanti e generare traduzioni usando OpenAI, Claude o modelli locali. Mantieni pulita la cronologia Git e i tipi sicuri.

Prova la CLI

Intlayer TMS

Smetti di pagare per parola. Automatizza con l'IA.

L'alternativa open-source e self-hosted a Crowdin e Lokalise. Costruita per flussi di lavoro moderni per sviluppatori.

Gestisci le traduzioni direttamente nel tuo codice o tramite l'editor visivo. Sfrutta l'IA per tradurre istantaneamente. Collabora con il tuo team senza limiti di posti.

Vedi TMS

CMS Headless

Collega il tuo codice locale con contenuti remoti.

Gestisci contenuti multilingue senza sovraccarico. Intlayer interconnette dizionari locali con gestione remota, abilitando Live Sync per aggiornamenti rapidi senza rebuild. Usa webhook per CI/CD e gestisci feature flags.

Vedi CMS

Feature Flags

Attiva le funzionalità istantaneamente. Nessun deploy richiesto.

I dizionari Intlayer sono più che testo. Usali per dichiarare logica, stili e configurazioni. Con Live Sync, attiva o disattiva funzionalità, cambia temi UI e aggiorna il comportamento dell’app in tempo reale dal CMS.

Prova le funzionalità

Test A/B

Il tuo parco giochi per esperimenti di prodotto.

Sii il primo a esplorare la nuova beta di A/B Testing guidato dall'IA di Intlayer, costruita per aumentare la scopribilità e guidare decisioni di prodotto più intelligenti. Testa qualsiasi cosa in tempo reale, dai copy e design alle funzionalità complete, e lascia che i dati ti mostrino cosa funziona davvero.

Vedi test A/B

Diapositiva precedente←

Diapositiva successiva→