> Canonical URL: https://codingcat.dev/podcast/3-16-MDSvex-with-pngwn
# MDSvex with pngwn
🎧 Podcast Episode · S3E16June 14, 2023
# MDSvex with pngwn
[Alex Patterson](/author/alex-patterson)[pngwn](/guest/pngwn)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/2dkxDnNqCPvsOwBTUhu0bD)[Apple](https://podcasts.apple.com/us/podcast/3-16-mdsvex-with-pngwn/id1491655542?i=1000616938705)[YouTube](https://youtu.be/0ukXs_xUbJ8)[Pocket Casts](https://pca.st/episode/64d84abc-9f6b-4fa3-a29b-2c1c09f8ac1f)[Castbox](https://castbox.fm/episode/id2508485-id603834669)[Castro](https://castro.fm/episode/U80ayp)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)
## Episode Sponsors.
[Partner & Sponsor
### Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)✏️ Visual Architecture Diagram
## how this episode connects together.
Follow AJ from first principles to production-ready architecture.
Let’s build it!✏️ Visual Diagram: MDSvex with pngwn✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for MDSvex with pngwn: start with pngwn, implement Architecture & Patterns, and ship to production.AAA Contrast Verified
**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**](https://www.youtube.com/watch?v=0ukXs_xUbJ8) or explore the architectural notes, chapters, and official documentation links below.
## What is mdsvex
[mdsvex](https://mdsvex.pngwn.io/) 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:
Copied! 🐾
```
npm install mdsvex
```
Copied! 🐾
```
yarn add mdsvex
```
Once you have installed the package, you need to add it to your SvelteKit project's `svelte.config.js` file:
Copied! 🐾
```
import mdsvex from 'mdsvex';
export default {
plugins: [mdsvex()]
};
```
CodingCat.dev's `svelte.config.js`
Copied! 🐾
```
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 `` and `` tags.
For example, in this actual post we have the below (appreviated), where in our `.md` file we import the `Button`.
Copied! 🐾
```
---
type: podcast
---
import Button from '$lib/components/content/Button.svelte'
```
Which allows for this very button below to be used directly from our markdown. Go ahead click away on it!
When you build your [SvelteKit](https://kit.svelte.dev/) project, [mdsvex](https://mdsvex.pngwn.io/) 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**](https://www.youtube.com/watch?v=0ukXs_xUbJ8) on YouTube using the timestamped chapters below:
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): PM (EDT)
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Welcome pngwn and Intro to MDSvex
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Walkthrough of the Basics
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Sponsor: Storyblock
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Using MDSvex with Coding Cat
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Tradeoffs
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Simplicity of MDSvex
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Creating First Component and Live Coding
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): How to Approach MDSvex
- [**00:00**](https://www.youtube.com/watch?v=0ukXs_xUbJ8&t=0s): Perfect Picks
## Resources, Links & Official Documentation
- **Watch on YouTube: ** [MDSvex with pngwn Full Video](https://www.youtube.com/watch?v=0ukXs_xUbJ8) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **Show Pick: ** [Hugging Face (picked by pngwn)](https://huggingface.co/chat/)
- **Show Pick: ** [Open Assitant (picked by pngwn)](https://open-assistant.io/)
- **Show Pick: ** [Xata (picked by Alex Patterson)](https://xata.io)
- [**pngwn Guest Profile & Episodes on CodingCat.dev**](/guest/pngwn)
- [**pngwn on GitHub**](https://github.com/pngwn)
- [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- [**Svelte & SvelteKit Documentation:**](https://svelte.dev/docs) Runes, compiler internals, and full-stack SvelteKit routing
- [**MDN JavaScript Reference:**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) ECMAScript specifications, Web APIs, and runtime fundamentals
## Related CodingCat.dev Tutorials & Podcast Episodes
- [**SvelteLab a supercharged REPL for Svelte**](/podcast/3-17-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**](/podcast/2-26-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**](/podcast/2-21-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**](https://svelte.dev/docs) (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**](https://www.youtube.com/watch?v=0ukXs_xUbJ8) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Svelte, check out our related guide: [**SvelteLab a supercharged REPL for Svelte**](/podcast/3-17-sveltelab-a-supercharged-repl-for-svelte).
## ✏️ Episode Summary
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:
## episode picks.
### 🐾 Alex Patterson
- [Xata](https://xata.io)
### 🐾 pngwn
- [Hugging Face](https://huggingface.co/chat/)
- [Open Assitant](https://open-assistant.io/)
## recent episodes.
[All Episodes→](/podcasts)[](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)
### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)
Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.
[Alex Patterson](/author/alex-patterson)[Balki Kodarapu](/guest/balki-kodarapu)[](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)
### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)
Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!
[Alex Patterson](/author/alex-patterson)[Max Gerber](/guest/max-gerber)