MDSvex with pngwn

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

yarn add mdsvex

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()]
};

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;

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 />

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

• Watch on YouTube: MDSvex with pngwn Full Video (plus Subscribe to CodingCat.dev)
• Show Pick: Hugging Face (picked by pngwn)
• Show Pick: Open Assitant (picked by pngwn)
• Show Pick: Xata (picked by Alex Patterson)
• pngwn Guest Profile & Episodes on CodingCat.dev
• pngwn on GitHub
• Episode Sponsor: Storyblok
• Svelte & SvelteKit Documentation: Runes, compiler internals, and full-stack SvelteKit routing
• MDN JavaScript Reference: ECMAScript specifications, Web APIs, and runtime fundamentals

Related CodingCat.dev Tutorials & Podcast Episodes

• SvelteLab a supercharged REPL for Svelte: SvelteLab is a powerful development environment for Svelte, a modern JavaScript framework for building user interfaces.
• Open Sourcing Your Database with Appwrite: Brandon Roberts shows us all about Appwrite by showing off a cool codingcat.dev application!
• Linking your Microservices with Workflows: Swyx walks us through how to use http://temporal.io/ to link all of your microservice workflows.

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.