Tanpa dependensiSiap MDXDibuat untuk SSRLintas framework

Markdown yang dirender 5× lebih cepat.

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

Intlayer hadir dengan mesin Markdown-nya sendiri. Tanpa dependensi, mendukung MDX, diurai di server, dan dirender secara native di React, Next.js, Vue, Svelte, Solid, Preact, dan Angular. Anda tidak perlu lagi memilih renderer.

Baca dokumentasi Lihat angkanya

markdown-file.content.md

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

Saat bidang front-matter locale dihilangkan, Intlayer menggunakan bahasa default yang Anda konfigurasikan. Anda dapat menyimpan seluruh konten dalam satu berkas markdown tanpa prefiks bahasa.

Contoh struktur berkas:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Bidang front-matter locale menentukan bahasa konten. Bersifat opsional. Jika tidak disediakan, Intlayer akan menggunakan bahasa default, yang juga menjadi fallback jika tidak ada terjemahan.

Contoh struktur berkas:

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;

Deklarasikan Markdown langsung di dalam kamus TypeScript, ESM, atau JSON menggunakan fungsi md() dan file(), menggabungkan terjemahan dengan keamanan tipe penuh.

Contoh struktur berkas:

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

Tanpa dependensi

Komponen MDX

Frontmatter bertipe

Dihapus jika tidak dipakai

Throughput 5× dibanding markdown-to-jsx

Parser ditulis ulang di sekitar prioritas aturan yang di-cache dan lookbehind inkremental, sehingga dokumen ditelusuri sekali alih-alih dipindai ulang aturan demi aturan. Markdown yang sama, keluaran yang sama, dengan kerja jauh lebih sedikit.

Intlayer5×

markdown-to-jsx1×

Throughput relatif penguraian dan rendering, semakin tinggi semakin baik.

0 kB

dikirim ketika aplikasi Anda tidak mendeklarasikan node Markdown — renderer dihapus saat build.

~55 kB

potongan parser yang dimuat secara lazy di balik Suspense sehingga tidak pernah memblokir first paint.

dependensi runtime — tidak ada yang perlu diaudit atau disinkronkan.

Satu mesin, bukan daftar belanja

Setiap proyek berakhir dengan tugas yang sama: menimbang markdown-to-jsx dengan marked, remark, dan MDX, memasang pemenangnya, lalu sadar bahwa ia tidak mendukung MDX, tipenya longgar, atau rantai plugin-nya rusak di sisi klien. Intlayer membuat pilihan itu untuk Anda.

Kemampuan

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Komponen MDX

IntlayerKomponen MDXDidukung

markdown-to-jsxKomponen MDXTidak didukung

markedKomponen MDXTidak didukung

remark / rehypeKomponen MDXSebagian, atau lewat paket tambahan

@mdx-jsKomponen MDXDidukung

Node dan override yang aman tipe

IntlayerNode dan override yang aman tipeDidukung

markdown-to-jsxNode dan override yang aman tipeTidak didukung

markedNode dan override yang aman tipeSebagian, atau lewat paket tambahan

remark / rehypeNode dan override yang aman tipeSebagian, atau lewat paket tambahan

@mdx-jsNode dan override yang aman tipeSebagian, atau lewat paket tambahan

Keluaran React dan Next.js

IntlayerKeluaran React dan Next.jsDidukung

markdown-to-jsxKeluaran React dan Next.jsDidukung

markedKeluaran React dan Next.jsTidak didukung

remark / rehypeKeluaran React dan Next.jsSebagian, atau lewat paket tambahan

@mdx-jsKeluaran React dan Next.jsDidukung

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularDidukung

markdown-to-jsxVue, Svelte, Solid, Preact, AngularTidak didukung

markedVue, Svelte, Solid, Preact, AngularSebagian, atau lewat paket tambahan

remark / rehypeVue, Svelte, Solid, Preact, AngularSebagian, atau lewat paket tambahan

@mdx-jsVue, Svelte, Solid, Preact, AngularSebagian, atau lewat paket tambahan

Urai di server, render di klien, tanpa penguraian ulang

IntlayerUrai di server, render di klien, tanpa penguraian ulangDidukung

markdown-to-jsxUrai di server, render di klien, tanpa penguraian ulangTidak didukung

markedUrai di server, render di klien, tanpa penguraian ulangSebagian, atau lewat paket tambahan

remark / rehypeUrai di server, render di klien, tanpa penguraian ulangDidukung

@mdx-jsUrai di server, render di klien, tanpa penguraian ulangSebagian, atau lewat paket tambahan

Dikonfigurasi tanpa rantai plugin

IntlayerDikonfigurasi tanpa rantai pluginDidukung

markdown-to-jsxDikonfigurasi tanpa rantai pluginDidukung

markedDikonfigurasi tanpa rantai pluginSebagian, atau lewat paket tambahan

remark / rehypeDikonfigurasi tanpa rantai pluginTidak didukung

@mdx-jsDikonfigurasi tanpa rantai pluginTidak didukung

Metadata frontmatter bertipe

IntlayerMetadata frontmatter bertipeDidukung

markdown-to-jsxMetadata frontmatter bertipeTidak didukung

markedMetadata frontmatter bertipeTidak didukung

remark / rehypeMetadata frontmatter bertipeSebagian, atau lewat paket tambahan

@mdx-jsMetadata frontmatter bertipeSebagian, atau lewat paket tambahan

Nol dependensi runtime

IntlayerNol dependensi runtimeDidukung

markdown-to-jsxNol dependensi runtimeDidukung

markedNol dependensi runtimeDidukung

remark / rehypeNol dependensi runtimeTidak didukung

@mdx-jsNol dependensi runtimeTidak didukung

Dihapus dari bundel bila tidak dipakai

IntlayerDihapus dari bundel bila tidak dipakaiDidukung

markdown-to-jsxDihapus dari bundel bila tidak dipakaiTidak didukung

markedDihapus dari bundel bila tidak dipakaiTidak didukung

remark / rehypeDihapus dari bundel bila tidak dipakaiTidak didukung

@mdx-jsDihapus dari bundel bila tidak dipakaiTidak didukung

DidukungSebagian, atau lewat paket tambahanTidak didukung

remark dan rehype bisa melakukan sebagian besarnya, tetapi lewat rantai plugin yang Anda rakit sendiri — dan yang tidak selalu berperilaku sama di peramban seperti di server.
markdown-to-jsx hanya merender React, dan marked memberi Anda string HTML. Untuk Vue, Svelte, Solid, atau Angular tidak ada padanan yang bisa dipakai.
Tak satu pun memberi Anda frontmatter bertipe: Anda menumpuk content layer di atasnya, atau mengurai metadatanya sendiri.

Node yang sama, di setiap framework

Node Markdown diubah menjadi keluaran native framework tempatnya berada — JSX, VNode, atau string HTML. Svelte, Solid, dan Angular adalah warga kelas satu, bukan tambahan belakangan.

ReactDirender sebagai JSX

Next.jsDirender sebagai JSX

VueDirender sebagai VNode

NuxtDirender sebagai VNode

SvelteDirender sebagai HTML

SolidDirender sebagai JSX

PreactDirender sebagai JSX

AngularDirender sebagai HTML

Urai di server, render di klien

Penguraian dan rendering adalah dua langkah terpisah. parseMarkdown menghasilkan AST yang dapat diserialisasi di server, peramban menerimanya sebagai JSON, dan setiap renderer menerimanya apa adanya — dokumen tidak pernah ditelusuri dua kali.

Di server

Dokumen diurai sekali menjadi JSON yang bisa Anda cache, stream, atau simpan.

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

Di klien

Renderer menerima string mentah maupun AST, jadi peramban hanya menggambar.

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

Atur sekali, sesuaikan per node

Deklarasikan komponen Anda pada provider dan setiap node Markdown di aplikasi akan memakainya. Saat satu node perlu berbeda, use() hanya menimpa node itu — tanpa rantai plugin, tanpa langkah build terpisah.

Global, untuk seluruh aplikasi

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, untuk satu 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() mengalahkan provider, dan provider mengalahkan renderer bawaan.

Frontmatter bertipe, tanpa content layer

Frontmatter berkas Markdown diurai bersama dokumennya dan tersedia pada node sebagai objek metadata bertipe. Bidang editorial yang dulu menuntut content layer kini ada begitu saja, lengkap dengan autocomplete.

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

Mesin yang sama juga mengurai HTML

Node html() melewati pipeline yang sama: tag dipetakan ke komponen Anda sendiri, dengan pengetikan dan aturan override yang sama.

Lihat konten HTML

i18n berbasis kode

Terjemahan aman tipe yang ada di repo Anda.

Deklarasikan konten bersama komponen Anda dalam TypeScript atau JavaScript. Intlayer menghasilkan tipe secara otomatis, memberi Anda pelengkap otomatis, validasi, dan umpan balik instan. Tidak ada lagi kunci yang hilang.

Mulai Coding

AI CLI Tool

Otomatisasi terjemahan dari terminal Anda.

CLI untuk mengaudit, mengisi, dan menerjemahkan JSON & Markdown dengan AI.

Jalankan `npx intlayer fill` untuk mendeteksi kunci yang hilang dan menghasilkan terjemahan menggunakan OpenAI, Claude, atau model lokal. Jaga riwayat Git tetap bersih.

Coba CLI

Intlayer TMS

Berhenti membayar per kata. Otomatiskan dengan AI.

Alternatif open-source & self-hosted untuk Crowdin & Lokalise. Dibangun untuk alur kerja pengembang modern.

Kelola terjemahan langsung di kode Anda atau melalui editor visual. Manfaatkan AI untuk menerjemahkan secara instan. Berkolaborasi dengan tim Anda tanpa batas kursi.

Lihat TMS

CMS Headless

Hubungkan kode lokal Anda dengan konten jarak jauh.

Kelola konten multibahasa dengan tanpa beban. Intlayer memungkinkan Anda menghubungkan kamus lokal dengan manajemen jarak jauh, mengaktifkan Live Sync untuk pembaruan langsung tanpa membangun ulang. Gunakan webhook untuk CI/CD.

Lihat CMS

Bendera Fitur

Beralih fitur secara instan. Tidak perlu deploy.

Kamus Intlayer lebih dari sekadar teks. Gunakan untuk mendeklarasikan logika, gaya, dan konfigurasi. Dengan Live Sync, Anda dapat mengaktifkan/menonaktifkan fitur, mengubah tema UI, dan memperbarui perilaku aplikasi secara real-time langsung dari CMS.

Coba Fitur

Uji A/B

Area Eksperimen Produk Anda.

Jadilah yang pertama menjelajahi beta baru Intlayer untuk AI-driven A/B Testing, yang dibuat untuk meningkatkan discoverability dan membantu pengambilan keputusan produk yang lebih cerdas. Uji apa saja secara real time, mulai dari teks dan desain hingga fitur lengkap, dan biarkan data menunjukkan apa yang benar-benar berhasil.

Lihat uji A/B

Slide sebelumnya←

Slide berikutnya→