}>{markdownContent}\n );\n};\n```\n\n \n \n\nAngular does not have a Suspense API. Use Angular's deferrable views (`@defer`) to handle lazy-loaded Markdown content (requires Angular 17+).\n\n```typescript fileName=\"my.component.ts\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my\",\n template: `\n @defer {\n

\n }\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"my-markdown\");\n}\n```\n\n \n\n\n---\n\n## Server-Side Rendering (SSR) and Hydration\n\nIn comparison of other Markdown parser such as remark / rehype, the Intlayer Markdown is dependency free and run on client as server side.\n\nBut Intlayer optimized the parsing for Server-Side Rendering (SSR) frameworks (such as Next.js App Router, React Router, Nuxt, SvelteKit, etc.).\n\nInstead 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.\n\nYou 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 ``, `useMarkdownRenderer`, etc.) automatically accept this AST object and render it seamlessly.\n\n### Example in a Server/Client Architecture\n\n\n \n\n ```tsx fileName=\"server.ts\"\n import { parseMarkdown } from \"react-intlayer/markdown\";\n\n // 1. On the server: Parse the markdown into a serializable AST\n export const loader = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Return the AST as JSON to the client\n return Response.json({ content: ast });\n };\n ```\n\n ```tsx fileName=\"client.tsx\"\n import { useLoaderData } from \"react-router\";\n import { MarkdownRenderer } from \"react-intlayer/markdown\";\n\n // 2. On the client: Render the AST directly without re-parsing\n export default function Page() {\n const { content } = useLoaderData();\n\n // The renderer accepts either a raw string or the parsed AST\n return ;\n }\n ```\n\n \n \n\n ```tsx fileName=\"app/page.tsx\"\n import { parseMarkdown } from \"next-intlayer/markdown\";\n import { MarkdownRenderer } from \"next-intlayer/markdown\";\n\n export default async function Page() {\n // 1. Parse the markdown into a serializable AST on the server\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // 2. Render the AST directly\n // In a Server Component, this works seamlessly and passes the AST\n // directly to the underlying client components if needed.\n return ;\n }\n ```\n\n \n \n\n ```vue fileName=\"pages/index.vue\"\n \n\n \n ```\n\n \n \n\n ```typescript fileName=\"+page.server.ts\"\n import { parseMarkdown } from \"svelte-intlayer/markdown\";\n\n // 1. On the server: Parse the markdown into a serializable AST\n export const load = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Return the AST to the client\n return { content: ast };\n };\n ```\n\n ```svelte fileName=\"+page.svelte\"\n \n\n \n \n ```\n\n \n \n\n 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.\n\n ```typescript fileName=\"app.resolver.ts\"\n import { Injectable } from \"@angular/core\";\n import { Resolve } from \"@angular/router\";\n import { parseMarkdown, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Injectable({ providedIn: \"root\" })\n export class MarkdownResolver implements Resolve {\n resolve(): ParsedMarkdown {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n // 1. On the server: Parse the markdown into a serializable AST\n return parseMarkdown(markdownString);\n }\n }\n ```\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { ActivatedRoute } from \"@angular/router\";\n import { IntlayerMarkdownService, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Component({\n selector: \"app-root\",\n template: `

`,\n })\n export class AppComponent {\n renderedMarkdown: string = \"\";\n\n constructor(\n private route: ActivatedRoute,\n private markdownService: IntlayerMarkdownService\n ) {\n // 2. On the client: Render the AST directly without re-parsing\n this.route.data.subscribe((data) => {\n this.renderedMarkdown = this.markdownService.renderMarkdown(\n data.markdownAst\n ) as string;\n });\n }\n }\n ```\n\n \n\n\nThis 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.\n\n## Options Reference\n\nThese options can be passed to `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer`, and `renderMarkdown`.\n\n| Option | Type | Default | Description |\n| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------ |\n| `forceBlock` | `boolean` | `false` | Forces the output to be wrapped in a block-level element (e.g., `

`). |\n| `forceInline` | `boolean` | `false` | Forces the output to be wrapped in an inline element (e.g., ``). |\n| `tagfilter` | `boolean` | `true` | Enables the GitHub Tag Filter for improved security by stripping dangerous HTML tags. |\n| `preserveFrontmatter` | `boolean` | `false` | If `true`, frontmatter at the beginning of the Markdown string will not be stripped. |\n| `components` | `Overrides` | `{}` | A map of HTML tags to custom components (e.g., `{ h1: MyHeading }`). |\n| `wrapper` | `Component` | `null` | A custom component to wrap the rendered Markdown. |\n| `renderMarkdown` | `Function` | `null` | A custom rendering function to completely replace the default Markdown compiler. |\n","about":"Learn how to declare and use Markdown content in your multilingual website with Intlayer. Follow the steps in this online documentation to integrate Markdown seamlessly into your project.","url":"https://intlayer.org/doc/concept/content/markdown","datePublished":"07-02-2025","dateModified":"19-05-2026","keywords":"Markdown, Internationalization, Documentation, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Developers, Content Managers"}}

Creation:2025-02-07Last update:2026-05-19

Reference this doc to your favorite AI assistant

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Ask your question and get a summary of the document by referencing this page and the AI provider of your choice

Version History

"Automatic decoration of markdown content, MDX and SSR support"
v8.11.05/28/2026
"Add `.content.md` files support"
v8.10.05/19/2026
"Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
v8.5.03/24/2026
"move import from `{{framework}}-intlayer` to `{{framework}}-intlayer/markdown`"
v8.5.03/24/2026
"Add MarkdownRenderer / useMarkdownRenderer / renderMarkdown utility and forceInline option"
v8.0.01/22/2026
"Automatic decoration of markdown content, MDX and SSR support"
v8.0.01/18/2026
"Init history"
v5.5.106/29/2025

Edit this doc

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Copy

Copy doc Markdown to clipboard

Markdown / Rich Text Content

Name: Intlayer
Author: Intlayer

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

Copy code

Copy the code to the clipboard

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

---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere 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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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, 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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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",  },};

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:

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.
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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

tsx

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

tsx

Copy code

Copy the code to the clipboard

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

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

Markdown nodes can be rendered directly as JSX.

App.tsx

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

tsx

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

tsx

Copy code

Copy the code to the clipboard

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

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

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

App.vue

Copy code

Copy the code to the clipboard

<script setup>import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("app");</script><template>  <component :is="myMarkdownContent" /></template>

<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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

vue

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

vue

Copy code

Copy the code to the clipboard

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

<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

Copy code

Copy the code to the clipboard

<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>

<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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

svelte

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

svelte

Copy code

Copy the code to the clipboard

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

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

Preact supports Markdown nodes directly in JSX.

App.tsx

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

tsx

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

tsx

Copy code

Copy the code to the clipboard

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

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

Solid supports Markdown nodes directly in JSX.

App.tsx

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

tsx

Copy code

Copy the code to the clipboard

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

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

And you can access your markdown metadata like :

tsx

Copy code

Copy the code to the clipboard

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

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

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

app.component.ts

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

You can retrieve the Markdown as string:

typescript

Copy code

Copy the code to the clipboard

content().myMarkdownContent.valueString(content().myMarkdownContent)content().myMarkdownContent.toString()

content().myMarkdownContent.valueString(content().myMarkdownContent)content().myMarkdownContent.toString()

And you can access your markdown metadata like :

typescript

Copy code

Copy the code to the clipboard

content().myMarkdownContent.metadatacontent().myMarkdownContent.metadata.title

content().myMarkdownContent.metadatacontent().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

Copy code

Copy the code to the clipboard

import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# My Title"}</MarkdownRenderer>

import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# My Title"}</MarkdownRenderer>

`useMarkdownRenderer()` Hook

Get a pre-configured renderer function.

tsx

Copy code

Copy the code to the clipboard

import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# My Title");

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

Copy code

Copy the code to the clipboard

import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# My Title", { forceBlock: true });

import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# My Title", { forceBlock: true });

`<MarkdownRenderer />` Component

Render a Markdown string with specific options.

tsx

Copy code

Copy the code to the clipboard

import { MarkdownRenderer } from "next-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# My Title"}</MarkdownRenderer>

import { MarkdownRenderer } from "next-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# My Title"}</MarkdownRenderer>

`useMarkdownRenderer()` Hook

Get a pre-configured renderer function.

tsx

Copy code

Copy the code to the clipboard

import { useMarkdownRenderer } from "next-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# My Title");

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

Copy code

Copy the code to the clipboard

import { renderMarkdown } from "next-intlayer/markdown";const jsx = renderMarkdown("# My Title", { forceBlock: true });

import { renderMarkdown } from "next-intlayer/markdown";const jsx = renderMarkdown("# My Title", { forceBlock: true });

`<MarkdownRenderer />` Component

vue

Copy code

Copy the code to the clipboard

<script setup>import { MarkdownRenderer } from "vue-intlayer/markdown";</script><template>  <MarkdownRenderer :forceBlock="true" content="# My Title" /></template>

<script setup>import { MarkdownRenderer } from "vue-intlayer/markdown";</script><template>  <MarkdownRenderer :forceBlock="true" content="# My Title" /></template>

`<MarkdownRenderer />` Component

svelte

Copy code

Copy the code to the clipboard

<script lang="ts">import { MarkdownRenderer } from "svelte-intlayer/markdown";</script><MarkdownRenderer forceBlock={true} value="# My Title" />

<script lang="ts">import { MarkdownRenderer } from "svelte-intlayer/markdown";</script><MarkdownRenderer forceBlock={true} value="# My Title" />

`useMarkdownRenderer()` Hook

svelte

Copy code

Copy the code to the clipboard

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

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

`renderMarkdown()` Utility

svelte

Copy code

Copy the code to the clipboard

<script lang="ts">import { renderMarkdown } from "svelte-intlayer/markdown";</script>{@html renderMarkdown("# My Title")}

<script lang="ts">import { renderMarkdown } from "svelte-intlayer/markdown";</script>{@html renderMarkdown("# My Title")}

`<MarkdownRenderer />` Component

tsx

Copy code

Copy the code to the clipboard

import { MarkdownRenderer } from "preact-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# My Title"}</MarkdownRenderer>

import { MarkdownRenderer } from "preact-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# My Title"}</MarkdownRenderer>

`useMarkdownRenderer()` Hook

tsx

Copy code

Copy the code to the clipboard

import { useMarkdownRenderer } from "preact-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# My Title")}</div>;

import { useMarkdownRenderer } from "preact-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# My Title")}</div>;

`renderMarkdown()` Utility

tsx

Copy code

Copy the code to the clipboard

import { renderMarkdown } from "preact-intlayer/markdown";return <div>{renderMarkdown("# My Title")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";return <div>{renderMarkdown("# My Title")}</div>;

`<MarkdownRenderer />` Component

tsx

Copy code

Copy the code to the clipboard

import { MarkdownRenderer } from "solid-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# My Title"}</MarkdownRenderer>

import { MarkdownRenderer } from "solid-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# My Title"}</MarkdownRenderer>

`useMarkdownRenderer()` Hook

tsx

Copy code

Copy the code to the clipboard

import { useMarkdownRenderer } from "solid-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# My Title")}</div>;

import { useMarkdownRenderer } from "solid-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# My Title")}</div>;

`renderMarkdown()` Utility

tsx

Copy code

Copy the code to the clipboard

import { renderMarkdown } from "solid-intlayer/markdown";return <div>{renderMarkdown("# My Title")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";return <div>{renderMarkdown("# My Title")}</div>;

`IntlayerMarkdownService` Service

Render a Markdown string using the service.

typescript

Copy code

Copy the code to the clipboard

import { IntlayerMarkdownService } from "angular-intlayer/markdown";export class MyComponent {  constructor(private markdownService: IntlayerMarkdownService) {}  renderMarkdown(markdown: string) {    return this.markdownService.renderMarkdown(markdown);  }}

import { IntlayerMarkdownService } from "angular-intlayer/markdown";export class MyComponent {  constructor(private markdownService: IntlayerMarkdownService) {}  renderMarkdown(markdown: string) {    return this.markdownService.renderMarkdown(markdown);  }}

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";  import MyHeading from "./MyHeading.svelte";</script><MarkdownProvider  components={{    h1: MyHeading,  }}>  <slot /></MarkdownProvider>

<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

Copy code

Copy the code to the clipboard

<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>

<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

Copy code

Copy the code to the clipboard

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,    }}  >    {children}  </MarkdownProvider>);

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";export const appConfig: ApplicationConfig = {  providers: [    createIntlayerMarkdownProvider({      components: {        h1: { class: "text-2xl font-bold" },      },    }),  ],};

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

Copy code

Copy the code to the clipboard

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

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.

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

Copy code

Copy the code to the clipboard

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

"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

Copy code

Copy the code to the clipboard

export default function Loading() {return <div>Loading...</div>;}

export default function Loading() {return <div>Loading...</div>;}

app/page.tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "next-intlayer/server";const MyPage = () => {const markdownContent = useIntlayer("my-markdown");return <div>{markdownContent}</div>;};export default MyPage;

import { useIntlayer } from "next-intlayer/server";const MyPage = () => {const markdownContent = useIntlayer("my-markdown");return <div>{markdownContent}</div>;};export default MyPage;

tsx

Copy code

Copy the code to the clipboard

import { useIntlayer } from "react-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

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

Copy code

Copy the code to the clipboard

<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>

<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

Copy code

Copy the code to the clipboard

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

<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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

import { parseMarkdown } from "react-intlayer/markdown";// 1. On the server: Parse the markdown into a serializable ASTexport 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 });};

import { parseMarkdown } from "react-intlayer/markdown";// 1. On the server: Parse the markdown into a serializable ASTexport 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

Copy code

Copy the code to the clipboard

import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. On the client: Render the AST directly without re-parsingexport default function Page() {  const { content } = useLoaderData();  // The renderer accepts either a raw string or the parsed AST  return <MarkdownRenderer content={content} />;}

import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. On the client: Render the AST directly without re-parsingexport default function Page() {  const { content } = useLoaderData();  // The renderer accepts either a raw string or the parsed AST  return <MarkdownRenderer content={content} />;}

app/page.tsx

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

<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 serverconst { 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>

<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 serverconst { 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

Copy code

Copy the code to the clipboard

import { parseMarkdown } from "svelte-intlayer/markdown";// 1. On the server: Parse the markdown into a serializable ASTexport const load = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Return the AST to the client  return { content: ast };};

import { parseMarkdown } from "svelte-intlayer/markdown";// 1. On the server: Parse the markdown into a serializable ASTexport 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

Copy code

Copy the code to the clipboard

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

<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

Copy code

Copy the code to the clipboard

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

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

Copy code

Copy the code to the clipboard

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

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

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.

Show all table content

Open the table in a modal to view all data content clearly

Option	Type	Default	Description
`forceBlock`	`boolean`	`false`	Forces the output to be wrapped in a block-level element (e.g., `<div>`).
`forceInline`	`boolean`	`false`	Forces the output to be wrapped in an inline element (e.g., `<span>`).
`tagfilter`	`boolean`	`true`	Enables the GitHub Tag Filter for improved security by stripping dangerous HTML tags.
`preserveFrontmatter`	`boolean`	`false`	If `true`, frontmatter at the beginning of the Markdown string will not be stripped.
`components`	`Overrides`	`{}`	A map of HTML tags to custom components (e.g., `{ h1: MyHeading }`).
`wrapper`	`Component`	`null`	A custom component to wrap the rendered Markdown.
`renderMarkdown`	`Function`	`null`	A custom rendering function to completely replace the default Markdown compiler.

Nesting

HTML

{children}

{children}

{props.children}

{props.children}

{children}

{props.children}

Version History

Markdown / Rich Text Content

Declaring Markdown Content

Rendering Markdown

1. Automatic Rendering (via useIntlayer)

2. Helper Utilities (Markdown Strings Only)

<MarkdownRenderer /> Component

useMarkdownRenderer() Hook

renderMarkdown() Utility

Global Configuration with MarkdownProvider

Suspense

Server-Side Rendering (SSR) and Hydration

Example in a Server/Client Architecture

Options Reference

1. Automatic Rendering (via `useIntlayer`)

`<MarkdownRenderer />` Component

`useMarkdownRenderer()` Hook

`renderMarkdown()` Utility

Global Configuration with `MarkdownProvider`