A Markdoc preprocessor for Svelte. Supports SvelteKit.


Create a SvelteKit project:

mkdir my-markdoc-project
cd my-markdoc-project

pnpm init [email protected] 

Install the svelte-markdoc package:

pnpm install -D svelte-markdoc

Create a markdoc.config.js in the root folder to keep all your markdoc config:

export default {
  variables: {
    title: 'My awesome site'

Configure the preprocessor in svelte.config.js:

import preprocessMarkdoc from 'svelte-markdoc'
import markdocConfig from './markdoc.config.js'

const config = {
  extensions: ['.svelte', '.markdoc'],
  preprocess: {
    markup: preprocessMarkdoc(markdocConfig)
  kit: {
    // ...

export default config

Now you can create pages with the .markdoc extension in src/routes:

title: Hello from Markdoc

# {% $title %}

This is *super* cool.


How is this different than MDX?

MDX is great! It’s very flexible, this is a more contrained editing system where docs are treated as data, whereas with mdx, it’s more like code. More info here:




View Github