Zéro dépendanceCompatible MDXConçu pour le SSRMulti-frameworks

Du Markdown rendu 5× plus vite.

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

Intlayer embarque son propre moteur Markdown. Sans dépendance, MDX inclus, analysé côté serveur et rendu nativement dans React, Next.js, Vue, Svelte, Solid, Preact et Angular. Vous n'avez plus jamais à choisir un moteur de rendu.

Lire la documentation Voir les chiffres

markdown-file.content.md

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

Lorsque le champ de front-matter locale est omis, Intlayer utilise votre langue par défaut configurée. Vous pouvez conserver tout votre contenu dans un fichier markdown unique sans préfixe de langue.

Exemple d’arborescence :

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Le champ de front-matter locale définit la langue du contenu. Il est optionnel. S’il n’est pas renseigné, Intlayer utilisera la langue par défaut, également utilisée comme langue de repli si aucune traduction n’est disponible pour une langue spécifique.

Exemple d’arborescence :

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;

Déclarez du Markdown directement dans un dictionnaire TypeScript, ESM ou JSON à l’aide des fonctions md() et file(), pour des traductions typées et flexibles.

Exemple d’arborescence :

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

Aucune dépendance

Composants MDX

Frontmatter typé

Purgé si inutilisé

Un débit 5× supérieur à markdown-to-jsx

L'analyseur a été réécrit autour d'une précédence de règles mise en cache et d'un lookbehind incrémental : un document est parcouru une fois au lieu d'être re-scanné règle par règle. Même Markdown, même résultat, une fraction du travail.

Intlayer5×

markdown-to-jsx1×

Débit relatif d’analyse et de rendu, plus haut est meilleur.

0 kB

livrés si votre application ne déclare aucun nœud Markdown : le moteur de rendu est purgé au build.

~55 kB

de chunk d'analyseur chargé paresseusement, derrière Suspense, sans jamais bloquer le premier rendu.

dépendance d'exécution : rien à auditer, rien à maintenir à jour.

Un seul moteur au lieu d’une liste de courses

Chaque projet finit par la même corvée : peser markdown-to-jsx contre marked, remark et MDX, brancher le gagnant, puis découvrir qu'il ne gère pas MDX, que son typage est approximatif ou que sa chaîne de plugins casse côté client. Intlayer fait ce choix pour vous.

Capacité

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Composants MDX

IntlayerComposants MDXPris en charge

markdown-to-jsxComposants MDXNon pris en charge

markedComposants MDXNon pris en charge

remark / rehypeComposants MDXPartiel, ou via des paquets supplémentaires

@mdx-jsComposants MDXPris en charge

Nœuds et surcharges typés

IntlayerNœuds et surcharges typésPris en charge

markdown-to-jsxNœuds et surcharges typésNon pris en charge

markedNœuds et surcharges typésPartiel, ou via des paquets supplémentaires

remark / rehypeNœuds et surcharges typésPartiel, ou via des paquets supplémentaires

@mdx-jsNœuds et surcharges typésPartiel, ou via des paquets supplémentaires

Sortie React et Next.js

IntlayerSortie React et Next.jsPris en charge

markdown-to-jsxSortie React et Next.jsPris en charge

markedSortie React et Next.jsNon pris en charge

remark / rehypeSortie React et Next.jsPartiel, ou via des paquets supplémentaires

@mdx-jsSortie React et Next.jsPris en charge

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularPris en charge

markdown-to-jsxVue, Svelte, Solid, Preact, AngularNon pris en charge

markedVue, Svelte, Solid, Preact, AngularPartiel, ou via des paquets supplémentaires

remark / rehypeVue, Svelte, Solid, Preact, AngularPartiel, ou via des paquets supplémentaires

@mdx-jsVue, Svelte, Solid, Preact, AngularPartiel, ou via des paquets supplémentaires

Analyse serveur, rendu client, sans ré-analyse

IntlayerAnalyse serveur, rendu client, sans ré-analysePris en charge

markdown-to-jsxAnalyse serveur, rendu client, sans ré-analyseNon pris en charge

markedAnalyse serveur, rendu client, sans ré-analysePartiel, ou via des paquets supplémentaires

remark / rehypeAnalyse serveur, rendu client, sans ré-analysePris en charge

@mdx-jsAnalyse serveur, rendu client, sans ré-analysePartiel, ou via des paquets supplémentaires

Configuré sans chaîne de plugins

IntlayerConfiguré sans chaîne de pluginsPris en charge

markdown-to-jsxConfiguré sans chaîne de pluginsPris en charge

markedConfiguré sans chaîne de pluginsPartiel, ou via des paquets supplémentaires

remark / rehypeConfiguré sans chaîne de pluginsNon pris en charge

@mdx-jsConfiguré sans chaîne de pluginsNon pris en charge

Métadonnées de frontmatter typées

IntlayerMétadonnées de frontmatter typéesPris en charge

markdown-to-jsxMétadonnées de frontmatter typéesNon pris en charge

markedMétadonnées de frontmatter typéesNon pris en charge

remark / rehypeMétadonnées de frontmatter typéesPartiel, ou via des paquets supplémentaires

@mdx-jsMétadonnées de frontmatter typéesPartiel, ou via des paquets supplémentaires

Zéro dépendance d'exécution

IntlayerZéro dépendance d'exécutionPris en charge

markdown-to-jsxZéro dépendance d'exécutionPris en charge

markedZéro dépendance d'exécutionPris en charge

remark / rehypeZéro dépendance d'exécutionNon pris en charge

@mdx-jsZéro dépendance d'exécutionNon pris en charge

Retiré du bundle si inutilisé

IntlayerRetiré du bundle si inutiliséPris en charge

markdown-to-jsxRetiré du bundle si inutiliséNon pris en charge

markedRetiré du bundle si inutiliséNon pris en charge

remark / rehypeRetiré du bundle si inutiliséNon pris en charge

@mdx-jsRetiré du bundle si inutiliséNon pris en charge

Pris en chargePartiel, ou via des paquets supplémentairesNon pris en charge

remark et rehype savent faire l'essentiel, mais via une chaîne de plugins que vous assemblez vous-même, et qui ne se comporte pas toujours pareil dans le navigateur et sur le serveur.
markdown-to-jsx ne rend que du React, et marked vous renvoie une chaîne HTML. Pour Vue, Svelte, Solid ou Angular, il n'existe pas d'équivalent vers lequel se tourner.
Aucun ne vous donne un frontmatter typé : vous empilez une couche de contenu par-dessus, ou vous analysez les métadonnées vous-même.

Le même nœud, dans chaque framework

Un nœud Markdown devient la sortie native du framework qui l'accueille : JSX, VNode ou chaîne HTML. Svelte, Solid et Angular sont traités comme des cibles de premier plan, pas comme des ajouts tardifs.

Analyser sur le serveur, rendre sur le client

L'analyse et le rendu sont deux étapes distinctes. parseMarkdown produit un AST sérialisable sur le serveur, le navigateur le reçoit en JSON et tous les moteurs de rendu l'acceptent tel quel : le document n'est jamais parcouru deux fois.

Côté serveur

Le document est analysé une fois, en JSON que vous pouvez mettre en cache, streamer ou stocker.

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

Côté client

Les moteurs acceptent une chaîne brute ou un AST : le navigateur ne fait que peindre.

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

Défini une fois, affiné par nœud

Déclarez vos composants sur le provider et tous les nœuds Markdown de l'application les reprennent. Quand un nœud doit différer, use() ne surcharge que celui-là : ni chaîne de plugins, ni étape de build supplémentaire.

Global, pour toute l'application

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, pour un seul nœud

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() prime sur le provider, qui prime sur le moteur par défaut.

Frontmatter typé, sans couche de contenu

Le frontmatter d'un fichier Markdown est analysé avec le document et exposé sur le nœud sous forme d'objet de métadonnées typé. Les champs éditoriaux pour lesquels vous installiez une couche de contenu sont simplement là, autocomplétés.

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

Le même moteur analyse aussi le HTML

Les nœuds html() suivent le même pipeline : les balises sont associées à vos propres composants, avec le même typage et les mêmes règles de surcharge.

Voir le contenu HTML

i18n basé sur le code

Des traductions avec sécurité de type qui vivent dans votre dépôt.

Déclarez le contenu aux côtés de vos composants en TypeScript ou JavaScript. Intlayer génère automatiquement les types, vous offrant autocomplétion, validation et retour instantané. Fini les clés manquantes, les changements de contexte ou les implémentations cassées.

Commencer à coder

AI CLI Tool

Automatisez les traductions depuis votre terminal.

La CLI pour auditer, remplir et traduire JSON & Markdown avec l'IA.

Lancez `npx intlayer fill` pour détecter les clés manquantes et générer des traductions via OpenAI, Claude ou des modèles locaux. Gardez un historique Git propre et une sécurité des types garantie.

Essayer la CLI

Intlayer TMS

Arrêtez de payer au mot. Automatisez avec l'IA.

L'alternative open source & auto-hébergée à Crowdin & Lokalise. Conçu pour les workflows de développement modernes.

Gérez les traductions directement dans votre code ou via l'éditeur visuel. Utilisez l'IA pour traduire instantanément. Collaborez avec votre équipe sans limite de sièges.

Voir TMS

CMS Headless

Reliez votre code local au contenu distant.

Gérez le contenu multilingue sans surcharge. Intlayer vous permet d'interconnecter des dictionnaires locaux avec une gestion distante, activant le Live Sync pour des mises à jour à chaud sans reconstruction. Utilisez des webhooks pour le CI/CD, gérez les feature flags et laissez l'IA de traduction automatique (en cours de développement) s'occuper du reste.

Voir CMS

Feature Flags

Activez des fonctionnalités instantanément. Aucun déploiement requis.

Les dictionnaires Intlayer sont plus que du texte. Utilisez-les pour déclarer de la logique, des styles et des configurations. Avec le Live Sync, activez ou désactivez des fonctionnalités, changez de thème et mettez à jour le comportement de l'application en temps réel depuis le CMS.

Essayer les fonctionnalités

Tests A/B

Votre terrain de jeu pour les expérimentations produit.

Soyez les premiers à explorer la nouvelle version bêta d'A/B Testing piloté par IA d'Intlayer, conçue pour améliorer la découvrabilité et guider des décisions produit plus intelligentes. Testez tout en temps réel, du contenu et du design aux fonctionnalités complètes, et laissez les données vous montrer ce qui fonctionne vraiment.

Voir test A/B

Diapositive précédente←

Diapositive suivante→

Construit par la communauté

Rencontrez les contributeurs incroyables qui rendent Intlayer possible. Vous voulez être le prochain ? Rejoignez-nous sur Discord.

Rejoignez-nous Voir tous les contributeurs

Arrêtez de choisir un moteur Markdown

Il est déjà dans Intlayer : sans dépendance, compatible MDX, prêt pour le SSR, typé de bout en bout, et absent de votre bundle si vous ne l'utilisez pas.

Lire le guide Markdown