svelte-markdoc-preprocess
Guide
Guide

Layouts

You can define layouts in the markdoc options.

svelte.config.js
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

markdoc({
    layouts: {
        default: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/Layout.svelte',
        ),
    },
});

Layout files are basically Svelte components that render the children snippet. It is used for all files by default.

./src/lib/Layout.svelte
<script>
    let { children } = $props();
</script>

<nav>...</nav>

{@render children?.()}

Named

If you want to use a named layout for a specific file, you can specify it in the frontmatter.

svelte.config.js
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';

markdoc({
    layouts: {
        default: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/Layout.svelte',
        ),
        some_other_layout: join(
            dirname(fileURLToPath(import.meta.url)),
            './src/lib/SomeOtherLayout.svelte',
        ),
    },
});
+page.markdoc
---
layout: some_other_layout
---

# some other content

Props

Layouts will be passed the frontmatter as props from the Markdoc file.

./src/lib/Layout.svelte
<script>
    let { title, description } = $props();
</script>

<svelte:head>
    <title>{title}</title>
    <meta name="description" content="{description}" />
</svelte:head>
+page.markdoc
---
title: Lorem ipsum
description: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---
ON THIS PAGE