Skip to content
MDX Svelte

Install

Terminal window
pnpm add -D mdx-svelte

IMPORTANT

This library is built to be used in SvelteKit projects only!

Setup

Section titled “Setup”

Import the package and modify the svelte.config.js file:

import { EXTENSIONS, mdxPreprocess } from "mdx-svelte"


const config = {
    extensions: EXTENSIONS,
    preprocess: [mdxPreprocess(), vitePreprocess()],
}

IMPORTANT

Place mdxPreprocess() before vitePreprocess(), Otherwise you may encounter unexpected behavior!

All done! Create src/routes/+page.md and add your content in:

---
title: Hello, World!
---


# {frontmatter.title}


Getting the title "{frontmatter.title}" is easy!

Output:

<h1>Hello, World!</h1>
<p>Getting the title "Hello, World!" is easy!</p>