מחבר:
    נוצר:2025-02-07עדכון אחרון:2026-09-27

    Markdown / Rich Text Content

    Intlayer supports rich text content defined using Markdown syntax. This allows you to easily write and maintain content with rich formatting, such as blogs, articles, and more.

    Declaring Markdown Content

    You can declare Markdown content using the md function or simply as a string (if it contains Markdown syntax).

    Since version 8.10.0, you can declare Markdown content directly in .content.md files. Intlayer will automatically detect and parse the Markdown content.

    markdown-file.en.content.md
    ---
key: my-markdown-content
description: My content
locale: en
---

# My content

Here an example of markdown content

    The locale front-matter field is the field that define the locale of the content. It is optional. If not provided, Intlayer will use the default locale, which is also used as fallback locale if no translation is available for a specific locale.

    Example of file structure:

    text
    content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md

    You can add in front-matter any properties defined in the Dictionary definition

    Use the md function to explicitly declare Markdown content. This is useful if you want to ensure a string is treated as Markdown even if it doesn't contain obvious syntax.

    markdownDictionary.content.ts
    import { md, type Dictionary } from "intlayer";

const markdownDictionary = {
key: "app",
content: {
  myMarkdownContent: md("## My title \n\nLorem Ipsum"),
},
} satisfies Dictionary;

export default markdownDictionary;

    Import .md files directly using the file function.

    markdownDictionary.content.ts
    import { md, file, t } from "intlayer";

export default {
key: "app",
content: {
  content: t({
    en: md(file("./myMarkdown.en.md")),
    fr: md(file("./myMarkdown.fr.md")),
  }),
},
};

    If the string contains common Markdown indicators (like headers, lists, links, etc.), Intlayer will automatically transform it.

    markdownDictionary.content.ts
    export default {
key: "app",
contentAutoTransformation: true, // Enable automatic detection of Markdown content - Can be set globally in intlayer.config.ts
content: {
  myMarkdownContent: "## My title \n\nLorem Ipsum",
},
};

    Rendering Markdown

    Intlayer provides two independent ways to render Markdown:

    1. Via useIntlayer Intlayer automatically transforms the md node into the framework's native output (JSX, VNode, HTML string).

      • Frontmatter is parsed and exposed as .metadata. You can override rendering at two levels, globally with MarkdownProvider (or the framework equivalent) and locally per-node with .use(). Both can be combined; .use() takes priority over MarkdownProvider, which takes priority over the default.

    2. Helper utilities: <MarkdownRenderer />, useMarkdownRenderer(), and renderMarkdown() are standalone tools that accept raw Markdown strings only. They are independent of useIntlayer and do not work with the decorated nodes it returns.

    Markdown rendering supports MDX. Use any JSX/framework component by name directly in your Markdown.

    1. Automatic Rendering (via useIntlayer)

    Markdown nodes can be rendered directly as JSX.

    App.tsx
    import { useIntlayer } from "react-intlayer";
import { MarkdownProvider } from "react-intlayer/markdown";

const AppContent = () => {
const { myMarkdownContent } = useIntlayer("app");

return <div>{myMarkdownContent}</div>;
};

const App = () => (
<MarkdownProvider
  components={{
    h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
    MyButton: (props) => <button {...props} />, // MDX component
  }}
>
  <AppContent />
</MarkdownProvider>
);
    If MarkdownProvider not present, intlayer will render the markdown using the default Markdown to JSX parser.

    You can also provide local overrides for specific nodes using the .use() method:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    You can retrieve the Markdown as string:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    And you can access your markdown metadata like :

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Markdown nodes can be rendered directly as JSX.

    App.tsx
    import { useIntlayer } from "next-intlayer";
import { MarkdownProvider } from "next-intlayer/markdown";

const AppContent = () => {
const { myMarkdownContent } = useIntlayer("app");

return <div>{myMarkdownContent}</div>;
};

const App = () => (
<MarkdownProvider
  components={{
    h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
    MyButton: (props) => <button {...props} />, // MDX component
  }}
>
  <AppContent />
</MarkdownProvider>
);
    If MarkdownProvider not present, intlayer will render the markdown using the default Markdown to JSX parser.

    You can also provide local overrides for specific nodes using the .use() method:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    You can retrieve the Markdown as string:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    And you can access your markdown metadata like :

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    In Vue, Markdown content can be rendered using the component built-in or directly as a node.

    App.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";
const { myMarkdownContent } = useIntlayer("app");
</script>

<template>
<component :is="myMarkdownContent" />
</template>

    Configure globally via the intlayerMarkdown plugin (supports MDX custom components):

    main.ts
    import { intlayerMarkdown } from "vue-intlayer/markdown";

app.use(intlayerMarkdown, {
components: {
  h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
  MyButton: (props) => h('button', props), // MDX component
},
});
    If the intlayerMarkdown plugin is not installed, Intlayer will render using the default compiler.

    You can also provide local overrides for specific nodes using the .use() method:

    vue
    <component :is="myMarkdownContent.use({
h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
})" />

    You can retrieve the Markdown as string:

    vue
    {{ myMarkdownContent.value }}
{{ String(myMarkdownContent) }}
{{ myMarkdownContent.toString() }}

    And you can access your markdown metadata like :

    vue
    <component :is="myMarkdownContent.metadata" />
<component :is="myMarkdownContent.metadata.title" />

    Svelte renders Markdown as an HTML string by default. Use {@html} to render it.

    App.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";
import { MarkdownProvider } from "svelte-intlayer/markdown";
import MyHeading from "./MyHeading.svelte";

const content = useIntlayer("app");
</script>

<MarkdownProvider components={{ h1: MyHeading }}>
{@html $content.myMarkdownContent}
</MarkdownProvider>
    If MarkdownProvider is not present, Intlayer will render the markdown using the default compiler.

    You can also provide local overrides for specific nodes using the .use() method:

    svelte
    {@html $content.myMarkdownContent.use({ ... })}

    You can retrieve the Markdown as string:

    svelte
    {$content.myMarkdownContent.value}
{String($content.myMarkdownContent)}
{$content.myMarkdownContent.toString()}

    And you can access your markdown metadata like :

    svelte
    {$content.myMarkdownContent.metadata}
{$content.myMarkdownContent.metadata.title}

    Preact supports Markdown nodes directly in JSX.

    App.tsx
    import { useIntlayer } from "preact-intlayer";
import { MarkdownProvider } from "preact-intlayer/markdown";

const AppContent = () => {
const { myMarkdownContent } = useIntlayer("app");
return <div>{myMarkdownContent}</div>;
};

const App = () => (
<MarkdownProvider
  components={{
    h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
    MyButton: (props) => <button {...props} />, // MDX component
  }}
>
  <AppContent />
</MarkdownProvider>
);
    If MarkdownProvider not present, intlayer will render the markdown using the default Markdown to JSX parser.

    You can also provide local overrides for specific nodes using the .use() method:

    tsx
    {myMarkdownContent.use({
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
})}

    You can retrieve the Markdown as string:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    And you can access your markdown metadata like :

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Solid supports Markdown nodes directly in JSX.

    App.tsx
    import { useIntlayer } from "solid-intlayer";
import { MarkdownProvider } from "solid-intlayer/markdown";

const AppContent = () => {
const { myMarkdownContent } = useIntlayer("app");
return <div>{myMarkdownContent}</div>;
};

const App = () => (
<MarkdownProvider
  components={{
    h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
    MyButton: (props) => <button {...props} />, // MDX component
  }}
>
  <AppContent />
</MarkdownProvider>
);
    If MarkdownProvider not present, intlayer will render the markdown using the default Markdown to JSX parser.

    You can also provide local overrides for specific nodes using the .use() method:

    tsx
    {myMarkdownContent.use({
h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
})}

    You can retrieve the Markdown as string:

    tsx
    {myMarkdownContent.value}
{String(myMarkdownContent)}
{myMarkdownContent.toString()}

    And you can access your markdown metadata like :

    tsx
    {myMarkdownContent.metadata}
{myMarkdownContent.metadata.title}

    Angular uses the [innerHTML] directive to render Markdown content.

    app.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
selector: "app-root",
template: `<div [innerHTML]="content().myMarkdownContent"></div>`,
})
export class AppComponent {
content = useIntlayer("app");
}
    If the IntlayerMarkdown provider is not configured, Intlayer will render using the default compiler.

    You can also provide local overrides for specific nodes using the .use() method:

    typescript
    content().myMarkdownContent.use({
h1: { class: "text-3xl font-bold" },
})

    You can retrieve the Markdown as string:

    typescript
    content().myMarkdownContent.value
String(content().myMarkdownContent)
content().myMarkdownContent.toString()

    And you can access your markdown metadata like :

    typescript
    content().myMarkdownContent.metadata
content().myMarkdownContent.metadata.title

    In Remix 3, Markdown nodes are rendered on the server into an HTML string. Inject it with the innerHTML prop of Remix JSX, or with html.raw in an html-template view.

    src/views/home.tsx
    import { useIntlayer } from "remix-intlayer";

export const HomePage = () => () => {
const { myMarkdownContent } = useIntlayer("app");

return <div innerHTML={myMarkdownContent.value} />;
};
    src/views/home.ts
    import { html } from "remix/html-template";
import { useIntlayer } from "remix-intlayer";

export const renderHomePage = () => {
const { myMarkdownContent } = useIntlayer("app");

return html.raw`<div>${myMarkdownContent.value}</div>`;
};
    Remix escapes interpolated values by default. innerHTML and html.raw are the two opt-outs, which is what a rendered Markdown string needs.

    You can also provide local overrides for specific tags using the .use() method. Overrides are functions returning an HTML string:

    tsx
    <div
innerHTML={myMarkdownContent.use({
  h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
})}
/>

    .value is the rendered HTML string, while String() / .toString() give back the raw Markdown source:

    tsx
    myMarkdownContent.value // "<h1>…</h1>"
String(myMarkdownContent) // "# …"
myMarkdownContent.toString() // "# …"

    And you can access your markdown metadata like :

    tsx
    myMarkdownContent.metadata
myMarkdownContent.metadata.title

    In Astro, Markdown nodes are rendered into an HTML string. Inject it with the set:html directive in the template, or with innerHTML in a client <script>.

    src/pages/index.astro
    ---
import { useIntlayer } from "astro-intlayer";

const { myMarkdownContent } = useIntlayer("app");
---

<div set:html={myMarkdownContent.value} />
    src/components/Content.astro
    <div id="content"></div>

<script>
import { useIntlayer } from "astro-intlayer";

const { myMarkdownContent } = useIntlayer("app");

document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
</script>
    Astro escapes {expressions} by default. set:html is the opt-out, which is what a rendered Markdown string needs.

    You can also provide local overrides for specific tags using the .use() method. Overrides are functions returning an HTML string:

    astro
    <div
set:html={myMarkdownContent.use({
  h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
})}
/>

    .value is the rendered HTML string, while String() / .toString() give back the raw Markdown source:

    astro
    myMarkdownContent.value // "<h1>…</h1>"
String(myMarkdownContent) // "# …"
myMarkdownContent.toString() // "# …"

    And you can access your markdown metadata like :

    astro
    myMarkdownContent.metadata
myMarkdownContent.metadata.title

    2. Helper Utilities (Markdown Strings Only)

    These utilities render raw Markdown strings and are independent of useIntlayer. Use them when you need to render Markdown from sources other than your dictionaries.

    <MarkdownRenderer /> Component

    Render a Markdown string with specific options.

    tsx
    import { MarkdownRenderer } from "react-intlayer/markdown";

<MarkdownRenderer forceBlock={true} tagfilter={true}>
{"# My Title"}
</MarkdownRenderer>

    useMarkdownRenderer() Hook

    Get a pre-configured renderer function.

    tsx
    import { useMarkdownRenderer } from "react-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
forceBlock: true,
components: { h1: (props) => <h1 {...props} className="custom" /> }
});

return renderMarkdown("# My Title");

    renderMarkdown() Utility

    Standalone utility for rendering outside of components.

    tsx
    import { renderMarkdown } from "react-intlayer/markdown";

const jsx = renderMarkdown("# My Title", { forceBlock: true });

    <MarkdownRenderer /> Component

    Render a Markdown string with specific options.

    tsx
    import { MarkdownRenderer } from "next-intlayer/markdown";

<MarkdownRenderer forceBlock={true} tagfilter={true}>
{"# My Title"}
</MarkdownRenderer>

    useMarkdownRenderer() Hook

    Get a pre-configured renderer function.

    tsx
    import { useMarkdownRenderer } from "next-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({
forceBlock: true,
components: { h1: (props) => <h1 {...props} className="custom" /> }
});

return renderMarkdown("# My Title");

    renderMarkdown() Utility

    Standalone utility for rendering outside of components.

    tsx
    import { renderMarkdown } from "next-intlayer/markdown";

const jsx = renderMarkdown("# My Title", { forceBlock: true });

    <MarkdownRenderer /> Component

    vue
    <script setup>
import { MarkdownRenderer } from "vue-intlayer/markdown";
</script>

<template>
<MarkdownRenderer :forceBlock="true" content="# My Title" />
</template>

    <MarkdownRenderer /> Component

    svelte
    <script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
</script>

<MarkdownRenderer forceBlock={true} value="# My Title" />

    useMarkdownRenderer() Hook

    svelte
    <script lang="ts">
import { useMarkdownRenderer } from "svelte-intlayer/markdown";
const render = useMarkdownRenderer();
</script>

{@html render("# My Title")}

    renderMarkdown() Utility

    svelte
    <script lang="ts">
import { renderMarkdown } from "svelte-intlayer/markdown";
</script>

{@html renderMarkdown("# My Title")}

    <MarkdownRenderer /> Component

    tsx
    import { MarkdownRenderer } from "preact-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# My Title"}
</MarkdownRenderer>

    useMarkdownRenderer() Hook

    tsx
    import { useMarkdownRenderer } from "preact-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# My Title")}</div>;

    renderMarkdown() Utility

    tsx
    import { renderMarkdown } from "preact-intlayer/markdown";

return <div>{renderMarkdown("# My Title")}</div>;

    <MarkdownRenderer /> Component

    tsx
    import { MarkdownRenderer } from "solid-intlayer/markdown";

<MarkdownRenderer forceBlock={true}>
{"# My Title"}
</MarkdownRenderer>

    useMarkdownRenderer() Hook

    tsx
    import { useMarkdownRenderer } from "solid-intlayer/markdown";

const render = useMarkdownRenderer();

return <div>{render("# My Title")}</div>;

    renderMarkdown() Utility

    tsx
    import { renderMarkdown } from "solid-intlayer/markdown";

return <div>{renderMarkdown("# My Title")}</div>;

    IntlayerMarkdownService Service

    Render a Markdown string using the service.

    typescript
    import { IntlayerMarkdownService } from "angular-intlayer/markdown";

export class MyComponent {
constructor(private markdownService: IntlayerMarkdownService) {}

renderMarkdown(markdown: string) {
  return this.markdownService.renderMarkdown(markdown);
}
}

    useMarkdownRenderer() Hook

    Get a renderer function pre-configured by installIntlayerMarkdown(). It returns an HTML string.

    tsx
    import { useMarkdownRenderer } from "remix-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({ forceBlock: true });

return <div innerHTML={renderMarkdown("# My Title")} />;

    renderMarkdown() Utility

    Standalone utility that ignores the global configuration.

    tsx
    import { renderMarkdown } from "remix-intlayer/markdown";

const html = renderMarkdown("# My Title", { forceBlock: true });

    useMarkdownRenderer() Hook

    Get a renderer function pre-configured by installIntlayerMarkdown(). It returns an HTML string.

    astro
    ---
import { useMarkdownRenderer } from "astro-intlayer/markdown";

const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
---

<div set:html={renderMarkdown("# My Title")} />

    renderMarkdown() Utility

    Standalone utility that ignores the global configuration.

    astro
    ---
import { renderMarkdown } from "astro-intlayer/markdown";

const html = renderMarkdown("# My Title", { forceBlock: true });
---

<div set:html={html} />

    Global Configuration with MarkdownProvider

    MarkdownProvider (or its framework equivalent) configures the Markdown rendering pipeline for your entire application. It applies to both the automatic useIntlayer rendering and the helper utilities. Options set here are the defaults, .use() overrides them at the node level.

    AppProvider.tsx
    import { MarkdownProvider } from "react-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    h1: (props) => <h1 style={{color: 'green'}} {...props} />,
    a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
    MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
  }}
>
  {children}
</MarkdownProvider>
);
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    AppProvider.tsx
    import { MarkdownProvider } from "react-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  renderMarkdown={async (md) => {
    // Use dynamic import to reduce the bundle size of your application
    const { renderMarkdown } = await import('react-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {children}
</MarkdownProvider>
);
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    AppProvider.tsx
    import { MarkdownProvider } from "next-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    h1: (props) => <h1 style={{color: 'green'}} {...props} />,
    a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
    MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
  }}
>
  {children}
</MarkdownProvider>
);
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    AppProvider.tsx
    import { MarkdownProvider } from "next-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  renderMarkdown={async (md) => {
    // Use dynamic import to reduce the bundle size of your application
    const { renderMarkdown } = await import('next-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {children}
</MarkdownProvider>
);
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    main.ts
    import { createApp } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerMarkdown } from "vue-intlayer/markdown";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerMarkdown, {
components: {
  h1: (props) =>
  h('h1', { style: { color: 'orange' }, ...props }, props.children),
  ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
  bold: (props) => h('strong', props),
  code: (props) => h('code', props),
},
});

app.mount("#app");
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    main.ts
    import { createApp } from "vue";
import { intlayer } from "vue-intlayer";
import { intlayerMarkdown } from "vue-intlayer/markdown";
import App from "./App.vue";

const app = createApp(App);

app.use(intlayer);
app.use(intlayerMarkdown, {
renderMarkdown: async (md) => {
  const { renderMarkdown } = await import('vue-intlayer/markdown');
  return renderMarkdown(md);
},
});

app.mount("#app");
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    App.svelte
    <script lang="ts">
import { MarkdownProvider } from "svelte-intlayer/markdown";
import MyHeading from "./MyHeading.svelte";
</script>

<MarkdownProvider
components={{
  h1: MyHeading,
}}
>
<slot />
</MarkdownProvider>
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    App.svelte
    <script lang="ts">
import { MarkdownProvider } from "svelte-intlayer/markdown";
</script>

<MarkdownProvider
renderMarkdown={async (md) => {
  const { renderMarkdown } = await import('svelte-intlayer/markdown');
  return renderMarkdown(md);
}}
>
<slot />
</MarkdownProvider>
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    AppProvider.tsx
    import { MarkdownProvider } from "preact-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  components={{
    h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
  }}
>
  {children}
</MarkdownProvider>
);
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    AppProvider.tsx
    import { MarkdownProvider } from "preact-intlayer/markdown";

export const AppProvider = ({ children }) => (
<MarkdownProvider
  renderMarkdown={async (md) => {
    const { renderMarkdown } = await import('preact-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {children}
</MarkdownProvider>
);
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    AppProvider.tsx
    import { MarkdownProvider } from "solid-intlayer/markdown";

export const AppProvider = (props) => (
<MarkdownProvider
  components={{
    h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
  }}
>
  {props.children}
</MarkdownProvider>
);
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    AppProvider.tsx
    import { MarkdownProvider } from "solid-intlayer/markdown";

export const AppProvider = (props) => (
<MarkdownProvider
  renderMarkdown={async (md) => {
    const { renderMarkdown } = await import('solid-intlayer/markdown');
    return renderMarkdown(md);
  }}
>
  {props.children}
</MarkdownProvider>
);
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.
    app.config.ts
    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    components: {
      h1: { class: "text-2xl font-bold" },
    },
  }),
],
};
    MDX is supported, any component name used inside your Markdown (e.g. <MyCustomJSXComponent />) is resolved against the components map.

    You can also use your own markdown renderer:

    app.config.ts
    import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";

export const appConfig: ApplicationConfig = {
providers: [
  createIntlayerMarkdownProvider({
    renderMarkdown: async (md) => {
      const { renderMarkdown } = await import('angular-intlayer/markdown');
      return renderMarkdown(md);
    },
  }),
],
};
    Importing your Markdown renderer dynamically is a good way to reduce the bundle size of your application.

    Remix has no component tree to hold a provider, so the configuration is installed once, as a singleton, at server start. It configures the renderer returned by useMarkdownRenderer(). The md nodes returned by useIntlayer are rendered with the default compiler; override their tags per node with .use().

    src/router.ts
    import { installIntlayerMarkdown } from "remix-intlayer/markdown";

installIntlayerMarkdown({
forceBlock: true,
components: {
  h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
},
});

    You can also use your own markdown renderer:

    src/router.ts
    import { installIntlayerMarkdown } from "remix-intlayer/markdown";

installIntlayerMarkdown({
renderMarkdown: async (md) => {
  const { marked } = await import("marked");
  return marked(md) as string;
},
});
    Use installIntlayerMarkdownDynamic(async () => …) to load the renderer itself lazily; the loader runs on the first call only.

    Astro has no component tree to hold a provider, so the configuration is installed once, as a singleton, in the middleware (server) and in a client <script> (browser). It configures the renderer returned by useMarkdownRenderer(). The md nodes returned by useIntlayer are rendered with the default compiler; override their tags per node with .use().

    src/middleware.ts
    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
import { defineMiddleware } from "astro:middleware";

// Runs once when the server starts; the Intlayer middleware itself is
// registered by the integration, ahead of this file.
installIntlayerMarkdown({
forceBlock: true,
components: {
  h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
},
});

export const onRequest = defineMiddleware((_context, next) => next());

    You can also use your own markdown renderer:

    src/middleware.ts
    import { installIntlayerMarkdown } from "astro-intlayer/markdown";

installIntlayerMarkdown({
renderMarkdown: async (md) => {
  const { marked } = await import("marked");
  return marked(md) as string;
},
});
    Use installIntlayerMarkdownDynamic(async () => …) to load the renderer itself lazily; the loader runs on the first call only.

    Suspense

    The Intlayer Markdown renderer is dynamically loaded. Although optimized, the underlying parser chunk is approximately 55kb. Loading this synchronously delays the initial page rendering and degrades First Contentful Paint (FCP).

    To prevent blocking the UI, Intlayer integrates with React's Suspense API. It fetches the parser in the background and throws a Promise during the download.

    Wrap any component rendering Intlayer Markdown in a <Suspense> boundary. This displays a localized fallback state while the chunk downloads, allowing the rest of your DOM to render immediately.

    Warning: If you do not provide a <Suspense> boundary, React will suspend at the root level or block the entire component tree from rendering until the 55kb chunk is fully loaded.

    In Next.js App Router, you can use either React Suspense for client components or a loading.tsx file for server components.

    Client Component:

    components/MyComponent.tsx
    "use client";
import { useIntlayer } from "next-intlayer";
import { Suspense } from "react";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Server Component with loading.tsx:

    app/loading.tsx
    export default function Loading() {
  return <div>Loading...</div>;
}
    app/page.tsx
    import { useIntlayer } from "next-intlayer/server";

const MyPage = () => {
  const markdownContent = useIntlayer("my-markdown");
  return <div>{markdownContent}</div>;
};

export default MyPage;
    tsx
    import { useIntlayer } from "react-intlayer";
import { Suspense } from "react";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Vue has a built-in <Suspense> component. Wrap the component rendering Markdown content in a <Suspense> boundary.

    MyComponent.vue
    <script setup>
import { useIntlayer } from "vue-intlayer";

const { markdownContent } = useIntlayer("my-markdown");
</script>

<template>
  <Suspense>
    <component :is="markdownContent" />
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

    Svelte does not have a Suspense API equivalent. Use an {#await} block to handle async rendering of Markdown content.

    MyComponent.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("my-markdown");
</script>

{#await $content.markdownContent}
  <div>Loading...</div>
{:then rendered}
  {@html rendered}
{/await}

    Preact supports React's Suspense API via preact/compat.

    MyComponent.tsx
    import { useIntlayer } from "preact-intlayer";
import { Suspense } from "preact/compat";

const MyComponent = () => {
  const markdownContent = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Solid has its own <Suspense> component from solid-js.

    MyComponent.tsx
    import { useIntlayer } from "solid-intlayer";
import { Suspense } from "solid-js";

const MyComponent = () => {
  const { markdownContent } = useIntlayer("my-markdown");

  return (
    <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>
  );
};

    Angular does not have a Suspense API. Use Angular's deferrable views (@defer) to handle lazy-loaded Markdown content (requires Angular 17+).

    my.component.ts
    import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";

@Component({
  selector: "app-my",
  template: `
    @defer {
      <div [innerHTML]="content().markdownContent"></div>
    } @loading {
      <div>Loading...</div>
    }
  `,
})
export class MyComponent {
  content = useIntlayer("my-markdown");
}

    Server-Side Rendering (SSR) and Hydration

    In comparison of other Markdown parser such as remark / rehype, the Intlayer Markdown is dependency free and run on client as server side.

    But Intlayer optimized the parsing for Server-Side Rendering (SSR) frameworks (such as Next.js App Router, React Router, Nuxt, SvelteKit, etc.).

    Instead of sending raw Markdown strings to the client and parsing them on the browser (which incurs a performance penalty), Intlayer allows you to pre-parse the Markdown into an Abstract Syntax Tree (AST) on the server.

    You can use the parseMarkdown function from your framework's Intlayer package on the server side to generate a serializable AST (ParsedMarkdown object), and pass it directly to the frontend. All Intlayer rendering utilities (like <MarkdownRenderer>, useMarkdownRenderer, etc.) automatically accept this AST object and render it seamlessly.

    Example in a Server/Client Architecture

    server.ts
    import { parseMarkdown } from "react-intlayer/markdown";

// 1. On the server: Parse the markdown into a serializable AST
export const loader = async () => {
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// Return the AST as JSON to the client
return Response.json({ content: ast });
};
    client.tsx
    import { useLoaderData } from "react-router";
import { MarkdownRenderer } from "react-intlayer/markdown";

// 2. On the client: Render the AST directly without re-parsing
export default function Page() {
const { content } = useLoaderData();

// The renderer accepts either a raw string or the parsed AST
return <MarkdownRenderer content={content} />;
}
    app/page.tsx
    import { parseMarkdown } from "next-intlayer/markdown";
import { MarkdownRenderer } from "next-intlayer/markdown";

export default async function Page() {
// 1. Parse the markdown into a serializable AST on the server
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// 2. Render the AST directly
// In a Server Component, this works seamlessly and passes the AST
// directly to the underlying client components if needed.
return <MarkdownRenderer content={ast} />;
}
    pages/index.vue
    <script setup lang="ts">
import { parseMarkdown } from "vue-intlayer/markdown";
import { MarkdownRenderer } from "vue-intlayer/markdown";

// 1. Fetch and parse the markdown into an AST on the server
const { data: ast } = await useAsyncData('markdown', () => {
const markdownString = "## My title \n\nLorem Ipsum";
return parseMarkdown(markdownString);
});
</script>

<template>
<!-- 2. On the client: Render the AST directly without re-parsing -->
<MarkdownRenderer :content="ast" />
</template>
    +page.server.ts
    import { parseMarkdown } from "svelte-intlayer/markdown";

// 1. On the server: Parse the markdown into a serializable AST
export const load = async () => {
const markdownString = "## My title \n\nLorem Ipsum";
const ast = parseMarkdown(markdownString);

// Return the AST to the client
return { content: ast };
};
    +page.svelte
    <script lang="ts">
import { MarkdownRenderer } from "svelte-intlayer/markdown";
export let data;
</script>

<!-- 2. On the client: Render the AST directly without re-parsing -->
<MarkdownRenderer value={data.content} />

    Angular SSR typically resolves the data on the server during the initial load and hydrates on the client. You can use resolvers to pass the AST.

    app.resolver.ts
    import { Injectable } from "@angular/core";
import { Resolve } from "@angular/router";
import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";

@Injectable({ providedIn: "root" })
export class MarkdownResolver implements Resolve<ParsedMarkdown> {
resolve(): ParsedMarkdown {
  const markdownString = "## My title \n\nLorem Ipsum";
  // 1. On the server: Parse the markdown into a serializable AST
  return parseMarkdown(markdownString);
}
}
    app.component.ts
    import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";

@Component({
selector: "app-root",
template: `<div [innerHTML]="renderedMarkdown"></div>`,
})
export class AppComponent {
renderedMarkdown: string = "";

constructor(
  private route: ActivatedRoute,
  private markdownService: IntlayerMarkdownService
) {
  // 2. On the client: Render the AST directly without re-parsing
  this.route.data.subscribe((data) => {
    this.renderedMarkdown = this.markdownService.renderMarkdown(
      data.markdownAst
    ) as string;
  });
}
}

    Remix 3 renders on the server and streams HTML, so no AST needs to cross to the client. Parse once, and render the AST wherever the page is built:

    src/views/article.tsx
    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";

// 1. Parse the markdown into a serializable AST (e.g. once, at module load)
const ast = parseMarkdown("## My title \n\nLorem Ipsum");

export const ArticlePage = () => () => (
// 2. Render the AST: the renderer accepts a raw string or the parsed AST
<article innerHTML={renderMarkdown(ast)} />
);

    Astro pages are rendered on the server, so no AST needs to cross to the client. Parse the Markdown in the frontmatter and render it with set:html:

    src/pages/article.astro
    ---
import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";

// 1. Parse the markdown into a serializable AST
const ast = parseMarkdown("## My title \n\nLorem Ipsum");
---

<!-- 2. Render the AST: the renderer accepts a raw string or the parsed AST -->
<article set:html={renderMarkdown(ast)} />

    This pattern ensures that the Markdown parsing logic is executed entirely on the server, significantly reducing the client-side execution time and improving the initial hydration speed.

    Options Reference

    These options can be passed to MarkdownProvider, MarkdownRenderer, useMarkdownRenderer, and renderMarkdown.

    OptionTypeDefaultDescription
    forceBlockbooleanfalseForces the output to be wrapped in a block-level element (e.g., <div>).
    forceInlinebooleanfalseForces the output to be wrapped in an inline element (e.g., <span>).
    tagfilterbooleantrueEnables the GitHub Tag Filter for improved security by stripping dangerous HTML tags.
    preserveFrontmatterbooleanfalseIf true, frontmatter at the beginning of the Markdown string will not be stripped.
    componentsOverrides{}A map of HTML tags to custom components (e.g., { h1: MyHeading }).
    wrapperComponentnullA custom component to wrap the rendered Markdown.
    renderMarkdownFunctionnullA custom rendering function to completely replace the default Markdown compiler.
    קינוןHTML