DEV Community

Cover image for MDSvex with pngwn
CodingCatDev profile image Alex Patterson
Alex Patterson for CodingCatDev

Posted on Edited on Originally published at codingcat.dev

MDSvex with pngwn

#svelte #javascript #sveltekit #podcast

Original: https://codingcat.dev/podcast/3-16-MDSvex-with-pngwn

▶ Watch on YouTube & Subscribe to CodingCat.dev

**MDSvex with pngwn **is a CodingCat.dev podcast episode featuring pngwn alongside Alex Patterson focused on Svelte, JavaScript. Pngwn joins Alex to show discuss his program MDSvex and to walk Alex through how to use it on his own Coding Cat site. Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

<script lang="ts"> import Button from '$lib/components/content/Button.svelte' </script>

What is mdsvex

mdsvex is a file format that combines the best of Markdown and Svelte. It allows you to write content in Markdown, but also includes the ability to embed Svelte components into your posts. This can be useful for adding interactive elements to your blog, such as polls, quizzes, and code editors.

Benefits of using mdsvex

There are several benefits to using mdsvex:

  • Simplicity: mdsvex files are just regular Markdown files, with the addition of the .svx extension. This means that you can use any Markdown editor to write your posts, and you don't need to learn any new syntax.
  • Power: Svelte is a powerful JavaScript framework that allows you to create interactive web components. With mdsvex, you can embed these components directly into your Markdown posts. This opens up a whole new range of possibilities for your blog.
  • Flexibility: mdsvex is compatible with any SvelteKit project. This means that you can use it to create a blog from scratch, or to add interactive elements to an existing blog.

How to use mdsvex

To use mdsvex, you first need to install the mdsvex package. You can do this with npm or yarn:

npm install mdsvex
Enter fullscreen mode Exit fullscreen mode 
yarn add mdsvex
Enter fullscreen mode Exit fullscreen mode

Once you have installed the package, you need to add it to your SvelteKit project's svelte.config.js file:

import mdsvex from 'mdsvex';

export default {
    plugins: [mdsvex()]
};
Enter fullscreen mode Exit fullscreen mode

CodingCat.dev's svelte.config.js

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';
import { mdsvex } from 'mdsvex';

// TODO: remove .svx and .md from production builds

/** @type {import('@sveltejs/kit').Config} */
console.log(`Using ${process.env.NODE_ENV} config`);
const config = {
    kit: {
        adapter: adapter(),
        prerender: {
            handleMissingId: 'warn',
            handleHttpError: ({ path, referrer, message }) => {
                // if nothing refers to it we don't care
                // most likely this is a draft in production
                // TODO: can we make this better?
                if (referrer === null) {
                    console.debug('SKIPPING 404 ISSUE', path);
                    return;
                }

                // otherwise fail the build
                throw new Error(message);
            }
        }
    },
    extensions: ['.svelte', '.svx', '.md'],
    preprocess: [
        mdsvex({ extensions: ['.svx', '.md'] }),
        preprocess({
            postcss: true
        })
    ]
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Now, you can start writing mdsvex files! To do this, simply create a new file with the .svx or .md extension. You can then write Markdown in the file, and embed Svelte components using the <script> and <style> tags.

For example, in this actual post we have the below (appreviated), where in our .md file we import the Button.

---
type: podcast
---

<script lang="ts">
    import Button from '$lib/components/content/Button.svelte'
</script>

<Button />
Enter fullscreen mode Exit fullscreen mode

Which allows for this very button below to be used directly from our markdown. Go ahead click away on it!

<Button />

When you build your SvelteKit project, mdsvex will compile the Svelte components in your mdsvex files to JavaScript. This JavaScript will then be included in the HTML of your blog posts.

Conclusion

mdsvex is a powerful tool that allows you to create interactive and engaging blog posts. It is easy to use, and it is compatible with any SvelteKit project. If you are looking for a way to add more dynamism to your blog, I highly recommend using mdsvex.

Video Chapters & Timestamps

Jump directly to any segment of MDSvex with pngwn on YouTube using the timestamped chapters below:

  • 00:00: PM (EDT)
  • 00:00: Welcome pngwn and Intro to MDSvex
  • 00:00: Walkthrough of the Basics
  • 00:00: Sponsor: Storyblock
  • 00:00: Using MDSvex with Coding Cat
  • 00:00: Tradeoffs
  • 00:00: Simplicity of MDSvex
  • 00:00: Creating First Component and Live Coding
  • 00:00: How to Approach MDSvex
  • 00:00: Perfect Picks

Resources, Links & Official Documentation

Related CodingCat.dev Tutorials & Podcast Episodes

Frequently Asked Questions (FAQ)

What are the main takeaways from MDSvex with pngwn?

Pngwn joins Alex to show discuss his program MDSvex and to walk Alex through how to use it on his own Coding Cat site. MDSvex with pngwn: Pngwn joins Alex to show discuss his program MDSvex and to walk Alex through how to use it on his own Coding Cat site. https://codingcat.dev/podcast/3-16-MDSvex-with-pngwn Recorded: May 4, 2023 3:30 PM (EDT) 00:00 Welcome pngwn and Intro to MDSvex

03:27 Walkthrough of the Basics

08:20 Sponsor: Throughout this podcast, pngwn breaks down real-world implementation details for Svelte, JavaScript so developers can apply these patterns directly in production.

How do you implement Svelte best practices in production?

When adopting Svelte and JavaScript in a production stack, start by validating your configuration against the Svelte & SvelteKit Documentation (Runes, compiler internals, and full-stack SvelteKit routing). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

Where can I watch the full MDSvex with pngwn walkthrough and find related code resources?

You can watch the complete video session for MDSvex with pngwn on the CodingCat.dev YouTube channel. For a deeper dive into Svelte, check out our related guide: SvelteLab a supercharged REPL for Svelte.

Top comments (0)