Без зависимостейПоддержка MDXСоздан для SSRДля всех фреймворков

    Markdown, который рендерится в 5 раз быстрее.

    Intlayer поставляется с собственным движком Markdown. Без зависимостей, с MDX, разбор на сервере и нативный рендеринг в React, Next.js, Vue, Svelte, Solid, Preact и Angular. Вам больше не нужно выбирать рендерер.

    Читать документациюПосмотреть цифры
    markdown-file.content.md
    ---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

    Если поле frontmatter locale опущено, Intlayer использует настроенную локаль по умолчанию. Вы можете хранить контент в одном файле markdown без языковых префиксов.

    Пример структуры файлов:
    content
└── markdown-file.content.md
    markdown-file.en.content.md
    ---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

    Поле frontmatter locale определяет локаль контента. Оно необязательно. Если оно не указано, Intlayer использует локаль по умолчанию, которая также служит запасной, если перевод отсутствует.

    Пример структуры файлов:
    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;

    Объявляйте Markdown прямо в словаре TypeScript, ESM или JSON с помощью функций md() и file(), сочетая переводы с полной типобезопасностью.

    Пример структуры файлов:
    content
├── article.content.ts
├── article.en.md
└── article.fr.md
    Без зависимостей
    MDX-компоненты
    Типизированный frontmatter
    Удаляется, если не используется

    В 5 раз выше пропускная способность, чем у markdown-to-jsx

    Парсер переписан вокруг кэшированного порядка правил и инкрементального lookbehind: документ обходится один раз вместо повторного сканирования правило за правилом. Тот же Markdown, тот же результат, доля работы.

    Intlayer5×
    markdown-to-jsx1×

    Относительная скорость разбора и рендеринга, больше — лучше.

    0 kB

    отправляется клиенту, если приложение не объявляет ни одного узла Markdown — рендерер удаляется при сборке.

    ~55 kB

    чанк парсера, загружаемый лениво за Suspense и никогда не блокирующий первую отрисовку.

    0

    зависимостей во время выполнения — нечего аудировать и нечего синхронизировать.

    Один движок вместо списка покупок

    Каждый проект заканчивается одной и той же рутиной: взвесить markdown-to-jsx против marked, remark и MDX, подключить победителя и обнаружить, что он не умеет MDX, что его типы неточны или что цепочка плагинов ломается на клиенте. Intlayer делает этот выбор за вас.

    Возможность
    Intlayer
    markdown-to-jsx
    marked
    remark / rehype
    @mdx-js
    MDX-компоненты
    Поддерживается
    Не поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Поддерживается
    Типобезопасные узлы и переопределения
    Поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Частично или через дополнительные пакеты
    Частично или через дополнительные пакеты
    Вывод для React и Next.js
    Поддерживается
    Поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Поддерживается
    Vue, Svelte, Solid, Preact, Angular
    Поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Частично или через дополнительные пакеты
    Частично или через дополнительные пакеты
    Разбор на сервере, рендеринг на клиенте, без повторного разбора
    Поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Поддерживается
    Частично или через дополнительные пакеты
    Настройка без цепочки плагинов
    Поддерживается
    Поддерживается
    Частично или через дополнительные пакеты
    Не поддерживается
    Не поддерживается
    Типизированные метаданные frontmatter
    Поддерживается
    Не поддерживается
    Не поддерживается
    Частично или через дополнительные пакеты
    Частично или через дополнительные пакеты
    Ноль зависимостей во время выполнения
    Поддерживается
    Поддерживается
    Поддерживается
    Не поддерживается
    Не поддерживается
    Удаляется из бандла, если не используется
    Поддерживается
    Не поддерживается
    Не поддерживается
    Не поддерживается
    Не поддерживается
    ПоддерживаетсяЧастично или через дополнительные пакетыНе поддерживается
    • remark и rehype умеют почти всё это, но через цепочку плагинов, которую вы собираете сами и которая в браузере ведёт себя не всегда так же, как на сервере.
    • markdown-to-jsx рендерит только React, а marked отдаёт строку HTML. Для Vue, Svelte, Solid или Angular аналога попросту нет.
    • Ни один из них не даёт типизированный frontmatter: вы надстраиваете слой контента или разбираете метаданные сами.

    Один и тот же узел в каждом фреймворке

    Узел Markdown превращается в нативный вывод того фреймворка, в котором оказался: JSX, VNode или строку HTML. Svelte, Solid и Angular поддержаны полноценно, а не по остаточному принципу.

    ReactРендерится как JSX
    Next.jsРендерится как JSX
    VueРендерится как VNode
    NuxtРендерится как VNode
    SvelteРендерится как HTML
    SolidРендерится как JSX
    PreactРендерится как JSX
    AngularРендерится как HTML

    Разбор на сервере, рендеринг на клиенте

    Разбор и рендеринг — два отдельных шага. parseMarkdown строит на сервере сериализуемый AST, браузер получает его как JSON, и любой рендерер принимает его как есть: документ никогда не обходится дважды.

    На сервере
    Документ разбирается один раз в JSON, который можно кэшировать, стримить или хранить.
    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 });};
    На клиенте
    Рендереры принимают и строку, и AST, поэтому браузер только отрисовывает.
    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} />;}

    Настройте один раз, уточните для узла

    Объявите компоненты в провайдере — их подхватит каждый узел Markdown в приложении. Если один узел должен отличаться, use() переопределит только его: без цепочки плагинов и отдельного шага сборки.

    Глобально — для всего приложения
    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>);
    Локально — для одного узла
    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() важнее провайдера, провайдер важнее рендерера по умолчанию.

    Типизированный frontmatter без слоя контента

    Frontmatter файла Markdown разбирается вместе с документом и доступен на узле как типизированный объект метаданных. Редакционные поля, ради которых вы ставили слой контента, просто есть — с автодополнением.

    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
    Тот же движок разбирает и HTML

    Узлы html() проходят тот же конвейер: теги сопоставляются с вашими компонентами, с той же типизацией и теми же правилами переопределения.

    Посмотреть HTML-контент
    i18n на основе кода

    Типобезопасные переводы, живущие в вашем репозитории.

    Объявляйте контент рядом с компонентами на TypeScript или JavaScript. Intlayer автоматически генерирует типы, обеспечивая автодополнение, валидацию и мгновенную обратную связь. Больше никаких пропущенных ключей.

    Начать кодить
    AI CLI Tool

    Автоматизируйте переводы прямо из терминала.

    CLI для аудита, заполнения и перевода JSON и Markdown с помощью ИИ.

    Запустите `npx intlayer fill`, чтобы найти недостающие ключи и сгенерировать переводы через OpenAI, Claude или локальные модели. Чистый Git и безопасные типы.

    Попробовать CLI
    Intlayer TMS

    Перестаньте платить за слово. Автоматизируйте с помощью ИИ.

    Открытая и self-hosted альтернатива Crowdin и Lokalise. Создана для современных рабочих процессов разработчиков.

    Управляйте переводами прямо в коде или через визуальный редактор. Используйте ИИ для мгновенного перевода. Сотрудничайте с командой без ограничений по местам.

    Смотреть TMS
    Headless CMS

    Объедините локальный код с удаленным контентом.

    Управляйте многоязычным контентом без накладных расходов. Intlayer соединяет локальные словари с удаленным управлением, обеспечивая Live Sync для горячих обновлений. Используйте вебхуки для CI/CD и управляйте флагами функций.

    Смотреть CMS
    Флаги функций

    Переключайте функции мгновенно. Деплой не требуется.

    Словари Intlayer — это больше, чем просто текст. Используйте их для логики, стилей и конфигураций. С Live Sync вы можете включать/выключать функции, менять темы UI и обновлять поведение приложения в реальном времени из CMS.

    Пробовать функции
    A/B тестирование

    Ваша площадка для экспериментов с продуктом.

    Станьте первыми, кто исследует новую бета-версию A/B-тестирования на базе ИИ от Intlayer, созданную для повышения обнаруживаемости и направления более умных решений по продукту. Тестируйте что угодно в реальном времени, от текстов и дизайна до целых функций, и позвольте данным показать вам, что действительно работает.

    Смотреть A/B тест

    Создано сообществом

    Познакомьтесь с удивительными участниками, которые делают Intlayer возможным

    Присоединяйтесь к намПосмотреть всех участников

    Перестаньте выбирать рендерер Markdown

    Он уже в Intlayer: без зависимостей, с MDX, готов к SSR, типизирован от начала до конца и исчезает из бандла, если не используется.

    Читать руководство по Markdown