Keine AbhängigkeitenMDX-fähigFür SSR gebautFramework-übergreifend

Markdown, das 5× schneller rendert.

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

Intlayer bringt seine eigene Markdown-Engine mit. Ohne Abhängigkeiten, inklusive MDX, auf dem Server geparst und nativ in React, Next.js, Vue, Svelte, Solid, Preact und Angular gerendert. Sie müssen nie wieder einen Renderer auswählen.

Dokumentation lesen Zahlen ansehen

markdown-file.content.md

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

Wird das Frontmatter-Feld locale weggelassen, verwendet Intlayer Ihr konfiguriertes Standard-Gebietsschema. Sie können alle Inhalte in einer einzigen Markdown-Datei ohne Sprachpräfixe verwalten.

Beispiel für Dateistruktur:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Das Frontmatter-Feld locale definiert das Gebietsschema des Inhalts. Es ist optional. Falls nicht angegeben, verwendet Intlayer das Standard-Gebietsschema, das auch als Fallback dient, falls keine Übersetzung vorhanden ist.

Beispiel für Dateistruktur:

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;

Deklarieren Sie Markdown direkt in einem TypeScript-, ESM- oder JSON-Wörterbuch mit den Funktionen md() und file(), kombiniert mit vollständiger Typsicherheit.

Beispiel für Dateistruktur:

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

Keine Abhängigkeit

MDX-Komponenten

Typisiertes Frontmatter

Entfernt, wenn ungenutzt

Fünffacher Durchsatz gegenüber markdown-to-jsx

Der Parser wurde um eine zwischengespeicherte Regel-Priorität und ein inkrementelles Lookbehind herum neu geschrieben: Ein Dokument wird einmal durchlaufen statt Regel für Regel erneut gescannt. Gleiches Markdown, gleiches Ergebnis, ein Bruchteil der Arbeit.

Intlayer5×

markdown-to-jsx1×

Relativer Parse- und Render-Durchsatz, höher ist besser.

0 kB

werden ausgeliefert, wenn Ihre App keinen Markdown-Node deklariert — der Renderer wird beim Build entfernt.

~55 kB

großer, verzögert geladener Parser-Chunk hinter Suspense, der das erste Rendering nie blockiert.

Laufzeitabhängigkeiten — nichts zu auditieren, nichts synchron zu halten.

Eine Engine statt einer Einkaufsliste

Jedes Projekt endet mit derselben Pflichtübung: markdown-to-jsx gegen marked, remark und MDX abwägen, den Sieger einbinden und dann feststellen, dass er kein MDX kann, seine Typen ungenau sind oder seine Plugin-Kette auf dem Client bricht. Intlayer trifft diese Wahl für Sie.

Fähigkeit

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

MDX-Komponenten

IntlayerMDX-KomponentenUnterstützt

markdown-to-jsxMDX-KomponentenNicht unterstützt

markedMDX-KomponentenNicht unterstützt

remark / rehypeMDX-KomponentenTeilweise oder über zusätzliche Pakete

@mdx-jsMDX-KomponentenUnterstützt

Typsichere Nodes und Overrides

IntlayerTypsichere Nodes und OverridesUnterstützt

markdown-to-jsxTypsichere Nodes und OverridesNicht unterstützt

markedTypsichere Nodes und OverridesTeilweise oder über zusätzliche Pakete

remark / rehypeTypsichere Nodes und OverridesTeilweise oder über zusätzliche Pakete

@mdx-jsTypsichere Nodes und OverridesTeilweise oder über zusätzliche Pakete

Ausgabe für React und Next.js

IntlayerAusgabe für React und Next.jsUnterstützt

markdown-to-jsxAusgabe für React und Next.jsUnterstützt

markedAusgabe für React und Next.jsNicht unterstützt

remark / rehypeAusgabe für React und Next.jsTeilweise oder über zusätzliche Pakete

@mdx-jsAusgabe für React und Next.jsUnterstützt

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularUnterstützt

markdown-to-jsxVue, Svelte, Solid, Preact, AngularNicht unterstützt

markedVue, Svelte, Solid, Preact, AngularTeilweise oder über zusätzliche Pakete

remark / rehypeVue, Svelte, Solid, Preact, AngularTeilweise oder über zusätzliche Pakete

@mdx-jsVue, Svelte, Solid, Preact, AngularTeilweise oder über zusätzliche Pakete

Server parst, Client rendert, kein erneutes Parsen

IntlayerServer parst, Client rendert, kein erneutes ParsenUnterstützt

markdown-to-jsxServer parst, Client rendert, kein erneutes ParsenNicht unterstützt

markedServer parst, Client rendert, kein erneutes ParsenTeilweise oder über zusätzliche Pakete

remark / rehypeServer parst, Client rendert, kein erneutes ParsenUnterstützt

@mdx-jsServer parst, Client rendert, kein erneutes ParsenTeilweise oder über zusätzliche Pakete

Konfiguration ohne Plugin-Kette

IntlayerKonfiguration ohne Plugin-KetteUnterstützt

markdown-to-jsxKonfiguration ohne Plugin-KetteUnterstützt

markedKonfiguration ohne Plugin-KetteTeilweise oder über zusätzliche Pakete

remark / rehypeKonfiguration ohne Plugin-KetteNicht unterstützt

@mdx-jsKonfiguration ohne Plugin-KetteNicht unterstützt

Typisierte Frontmatter-Metadaten

IntlayerTypisierte Frontmatter-MetadatenUnterstützt

markdown-to-jsxTypisierte Frontmatter-MetadatenNicht unterstützt

markedTypisierte Frontmatter-MetadatenNicht unterstützt

remark / rehypeTypisierte Frontmatter-MetadatenTeilweise oder über zusätzliche Pakete

@mdx-jsTypisierte Frontmatter-MetadatenTeilweise oder über zusätzliche Pakete

Keine Laufzeitabhängigkeiten

IntlayerKeine LaufzeitabhängigkeitenUnterstützt

markdown-to-jsxKeine LaufzeitabhängigkeitenUnterstützt

markedKeine LaufzeitabhängigkeitenUnterstützt

remark / rehypeKeine LaufzeitabhängigkeitenNicht unterstützt

@mdx-jsKeine LaufzeitabhängigkeitenNicht unterstützt

Aus dem Bundle entfernt, wenn ungenutzt

IntlayerAus dem Bundle entfernt, wenn ungenutztUnterstützt

markdown-to-jsxAus dem Bundle entfernt, wenn ungenutztNicht unterstützt

markedAus dem Bundle entfernt, wenn ungenutztNicht unterstützt

remark / rehypeAus dem Bundle entfernt, wenn ungenutztNicht unterstützt

@mdx-jsAus dem Bundle entfernt, wenn ungenutztNicht unterstützt

UnterstütztTeilweise oder über zusätzliche PaketeNicht unterstützt

remark und rehype können das meiste davon — aber über eine Plugin-Kette, die Sie selbst zusammenstellen und die sich im Browser nicht immer wie auf dem Server verhält.
markdown-to-jsx rendert nur React, und marked liefert Ihnen einen HTML-String. Für Vue, Svelte, Solid oder Angular gibt es kein Pendant, auf das man zurückgreifen könnte.
Keines davon liefert Ihnen typisiertes Frontmatter: Sie setzen eine Content-Schicht obendrauf oder parsen die Metadaten selbst.

Derselbe Node, in jedem Framework

Ein Markdown-Node wird in die native Ausgabe des jeweiligen Frameworks überführt — JSX, ein VNode oder ein HTML-String. Svelte, Solid und Angular sind vollwertig unterstützt, kein Nachgedanke.

ReactRendert als JSX

Next.jsRendert als JSX

VueRendert als VNode

NuxtRendert als VNode

SvelteRendert als HTML

SolidRendert als JSX

PreactRendert als JSX

AngularRendert als HTML

Auf dem Server parsen, auf dem Client rendern

Parsen und Rendern sind zwei getrennte Schritte. parseMarkdown erzeugt auf dem Server einen serialisierbaren AST, der Browser erhält ihn als JSON, und jeder Renderer nimmt ihn unverändert an — das Dokument wird nie zweimal durchlaufen.

Auf dem Server

Das Dokument wird einmal geparst — in JSON, das Sie cachen, streamen oder speichern können.

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

Auf dem Client

Renderer nehmen einen Rohstring oder einen AST entgegen — der Browser zeichnet nur noch.

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

Einmal setzen, pro Node verfeinern

Deklarieren Sie Ihre Komponenten am Provider, und jeder Markdown-Node der App übernimmt sie. Soll ein Node abweichen, überschreibt use() genau diesen — ohne Plugin-Kette, ohne separaten Build-Schritt.

Global, für die gesamte 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>);

Lokal, für einen Node

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() schlägt den Provider, der Provider schlägt den Standard-Renderer.

Typisiertes Frontmatter, ohne Content-Schicht

Das Frontmatter einer Markdown-Datei wird zusammen mit dem Dokument geparst und am Node als typisiertes Metadaten-Objekt bereitgestellt. Die redaktionellen Felder, für die Sie sonst eine Content-Schicht installiert haben, sind einfach da — mit Autovervollständigung.

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

Dieselbe Engine parst auch HTML

html()-Nodes durchlaufen dieselbe Pipeline: Tags werden auf Ihre eigenen Komponenten abgebildet, mit derselben Typisierung und denselben Override-Regeln.

HTML-Inhalt ansehen

Code-basiertes i18n

Typsichere Übersetzungen, die in Ihrem Repo leben.

Deklarieren Sie Inhalte neben Ihren Komponenten in TypeScript oder JavaScript. Intlayer generiert Typen automatisch und bietet Autovervollständigung, Validierung und sofortiges Feedback. Keine fehlenden Schlüssel oder Kontextwechsel mehr.

Coden starten

AI CLI Tool

Automatisieren Sie Übersetzungen direkt im Terminal.

Die CLI zum Prüfen, Füllen und Übersetzen von JSON & Markdown mit KI.

Führen Sie `npx intlayer fill` aus, um fehlende Schlüssel zu erkennen und Übersetzungen mit OpenAI, Claude oder lokalen Modellen zu erstellen. Sauberer Git-Verlauf, sichere Typen.

CLI ausprobieren

Intlayer TMS

Hören Sie auf, pro Wort zu zahlen. Automatisieren Sie mit KI.

Die Open-Source- und selbstgehostete Alternative zu Crowdin & Lokalise. Gebaut für moderne Entwickler-Workflows.

Verwalten Sie Übersetzungen direkt in Ihrem Code oder über den visuellen Editor. Nutzen Sie KI für sofortige Übersetzungen. Arbeiten Sie ohne Platzbegrenzung im Team.

TMS ansehen

Headless CMS

Verbinden Sie Ihren lokalen Code mit Remote-Inhalten.

Verwalten Sie mehrsprachige Inhalte ohne Overhead. Intlayer verbindet lokale Wörterbücher mit Remote-Management und ermöglicht Live Sync für Hot-Updates ohne Rebuild. Nutzen Sie Webhooks für CI/CD und verwalten Sie Feature Flags.

CMS ansehen

Feature Flags

Schalten Sie Funktionen sofort um. Kein Deployment erforderlich.

Intlayer-Wörterbücher sind mehr als nur Text. Nutzen Sie sie für Logik, Stile und Konfigurationen. Mit Live Sync schalten Sie Funktionen an/aus, ändern UI-Themes und aktualisieren das App-Verhalten in Echtzeit direkt über das CMS.

Funktionen testen

AB-Testing

Ihr Spielplatz für Produktexperimente.

Seien Sie die Ersten, die Intlayers neue KI-gestützte A/B-Testing-Beta erkunden, die entwickelt wurde, um die Auffindbarkeit zu steigern und intelligentere Produktentscheidungen zu leiten. Testen Sie alles in Echtzeit, von Texten und Design bis hin zu ganzen Features, und lassen Sie die Daten zeigen, was wirklich funktioniert.

A/B-Test ansehen

Vorherige Folie←

Nächste Folie→

Von der Community gebaut

Lernen Sie die erstaunlichen Mitwirkenden kennen, die Intlayer möglich machen

Tritt uns bei Alle Mitwirkenden anzeigen

Hören Sie auf, einen Markdown-Renderer auszuwählen

Er steckt schon in Intlayer: ohne Abhängigkeiten, MDX-fähig, SSR-bereit, durchgehend typisiert — und aus Ihrem Bundle verschwunden, wenn Sie ihn nicht nutzen.

Markdown-Leitfaden lesen