MDSveX: The bridge between Markdown and Svelte

A few days ago, I was looking around for tools to write my blog. I knew about MDX, but I wasn't really good at React and friends, which seemed to be the only frameworks supporting MDX painlessly (correct me if I'm wrong!)

But after a bit of research, I found...

Enter MDSveX

MDSveX is MDX in svelte. It allows you to write code similar to MDX but in svelte. It integrates perfectly with SvelteKit, too!

The coolest thing is that MDSveX hooks into remark and rehype, which provides a whole ecosystem of plugins to choose from.

This makes for the perfect combo of the comfort of MDX, the efficiency of Svelte, and the ecosystem of remark.

Your usual MDSveX component looks like this:

---
title: "My blog post"
date: 2020-01-01
summary: This is my first blog post

---

<script>
    import PieChart from '$lib/Pie-Chart.svelte'
</script>

## {title}

Here's a cool Pie Chart:

<PieChart
    data={[
        { label: 'give you up', value: 10 },
        { label: 'let you down', value: 10 },
        { label: 'run around and desert you', value: 8 },
        { label: 'make you cry', value: 5 },
    ]}
/>

Pretty cool, eh? Notice how we can reference the {title} in the content. MDSveX automatically parses your frontmatter and makes it available in the content.

Layouts

If you put this markdown file at src/routes/blog/my-blog-post.svx, the content would be rendered at /blog/my-blog-post, just like the Svelte compiler renders pages. However, it only renders the content markdown by default. Usually, you would like to have some sort of metadata, navigation, and stuff on a blog page.

Enter layouts. Layouts are just regular Svelte components. They can be used to change the way a .svx file is shown. Here's what a sample MDSveX layout would look like:

<script>
    export let title;
    export let date;
</script>

<h1>{title}</h1>
<p>{date}</p>

<slot> <!-- content goes here -->
</slot>

You can even set up different layouts for different files! To learn all the details, check out the docs

Quickstart

You can install MDSveX by using the svelte-add package to easily set up MDSveX:

$ npx svelte-add mdsvex

This will create a mdsvex.config.js file in your project root, which you can use to configure your site.

The end

MDSveX helped me find a siiimple way to convert my Svelte app into a full-blown CMS-like website, all without the overhead of an actual CMS. For basic blog sites, it's perfect!

In my next post, I'll show you how to make a simple blog using MDSveX. Stay tuned!