Table of Contents

Astro Markdown Component Utility for Any Framework: A Complete Guide

If you’ve ever tried to use a Markdown component inside a modern JavaScript framework, you’ve probably run into frustrating rendering quirks. Indentation issues, unexpected <pre> and <code> tags, and messy output can make what should be a simple task feel unnecessarily painful.

In this post, we’re diving into a powerful Markdown utility that solves these problems — and works seamlessly across Astro, React, Vue, and Svelte.

The Problem with Most Markdown Libraries

Most Markdown libraries don’t handle whitespace indentation the way developers naturally write code. When you nest a Markdown component inside HTML elements, you instinctively indent your content to keep things readable.

For example, you might write something like this:

<div>
  <div>
    <Markdown>
      This is a paragraph

      This is a second paragraph
    </Markdown>
  </div>
</div>

Looks clean, right? The problem is that standard Markdown treats any content indented by four or more spaces as a code block. So instead of getting two simple paragraphs, most libraries will output this:

<pre><code>  This is a paragraph

    This is a second paragraph
</code></pre>

That’s not what you wanted at all.

The common workaround is to strip all indentation from your Markdown content and write it flush against the left margin. That works, but it’s hard to read, breaks your code formatting standards, and is a nightmare to maintain in larger projects.

Enter the Splendid Labz Markdown Utility

The Markdown utility from Splendid Labz was built specifically to address this whitespace problem. It intelligently strips the leading indentation from your content before processing it, so you get clean, correct HTML output regardless of how your code is indented.

Using the same nested example from above, this utility produces exactly what you’d expect:

<p>This is a paragraph</p>
<p>This is a second paragraph</p>

No unexpected code blocks. No reformatting required. Just clean HTML.

It also supports an inline option. When set to true, the utility returns Markdown output without wrapping paragraph tags — perfect for rendering short inline content like labels, tooltips, or captions.

How to Use It in Astro

Using the Markdown utility in Astro is straightforward. Start by importing it from @splendidlabz/utils, then render the slot content and pass it through the utility.

---
import { markdown } from '@splendidlabz/utils'
const { inline = false, content } = Astro.props
const slotContent = await Astro.slots.render('default')

const html = markdown(content || slotContent, { inline })
---

<Fragment set:html={html} />

Once your component is set up, you can use it like this:

<Markdown>
  ### This is a header

  This is a paragraph with **bold text**.
</Markdown>

Astro’s ability to render slot content dynamically makes this integration clean and flexible.

How to Use It in Svelte

Svelte handles slots differently from Astro — dynamic slot content can’t be read the same way. Instead, you pass your Markdown content via a prop.

<script>
  import { markdown } from '@splendidlabz/utils'
  const { content, inline = false } = $props()
  const html = markdown(content, { inline })
</script>

{@html html}

Then use your component like this:

<Markdown content=`
  ### This is a header

  This is a paragraph
`/>

While the prop-based approach is slightly less elegant than slot-based rendering, it’s a simple and reliable solution that fits naturally into Svelte’s reactive paradigm.

What About React and Vue?

The same core pattern applies to React and Vue. You import the markdown utility, pass in your content string, and render the resulting HTML safely using your framework’s built-in mechanism for raw HTML output.

In React, that means using dangerouslySetInnerHTML. In Vue, you’d use v-html. The utility itself doesn’t change — only the framework wrapper does.

Because the logic is so simple, building a reusable Markdown component in either framework takes just a few minutes.

Why This Approach Improves Developer Experience

Writing and maintaining Markdown content inside component-based frameworks has historically involved a lot of friction. You either fought with whitespace, reached for heavy dedicated libraries, or wrote brittle workarounds.

This utility takes a different approach: it solves one problem well and stays out of the way. There’s no configuration overhead, no large dependency footprint, and no framework lock-in.

The fact that the same utility works across Astro, Svelte, React, and Vue means your team can adopt a consistent pattern no matter what stack you’re working with.

Key Takeaways

Most Markdown libraries mishandle whitespace indentation, producing unwanted <pre> and <code> blocks.
The Splendid Labz Markdown utility automatically strips leading indentation for clean, correct output.
It works in Astro (via slots), Svelte (via props), and can be easily adapted for React and Vue.
The inline option lets you render Markdown without wrapping paragraph tags.
It’s a lightweight, framework-agnostic solution that improves developer experience across the board.

For a deeper dive into how the Markdown component works specifically in Astro, check out the original article on CSS-Tricks for full context and additional examples.

Find More Productivity-Boosting Tools for Developers

If you’re always on the lookout for smarter ways to write code and build better products, you’ll love what we’ve put together.

Visit myproductivetools.com to explore a curated collection of tools, utilities, and resources designed to help developers and creators work faster, build smarter, and stress less.