Markdown is a great invention that lets us write less markup. It also handles typographical matters like converting straight apostrophes (') to opening or closing quotes (' or ') for us.
Although Astro has built-in support for Markdown via .md files, I’d argue that your Markdown experience can be enhanced in two ways:
I’ve cover these in depth in Practical Astro: Content Systems.
We’re going to focus on MDX today.
MDX is a superset of Markdown. It lets you use components in Markdown and simple JSX in addition to all other Markdown features.
For Astro, you can also use components from any frontend framework that you have installed. So you can do something like:
---
# Frontmatter...
---
import AstroComp from '@/components/AstroComp.astro'
import SvelteComp from '@/components/AstroComp.astro'
<AstroComp> ... </AstroComp>
<SvelteComp> ... </SvelteComp>It can be a great substitute for content-heavy stuff because it lets you write markup like the following.
<div class="card">
### Card Title
Content goes here
- List
- Of
- Items
Second paragraph
</div>Astro will convert the MDX into the following HTML:
<div class="card">
<h2>Card Title</h2>
<p>Content goes here </p>
<ul>
<li> List </li>
<li> Of </li>
<li> Items </li>
</ul>
<p>Second paragraph</p>
</div>Notice what I did above:
## instead of a full h2 tag.- instead of <ul> and <li> to denote lists.Writing the whole thing in HTML directly would have been somewhat of a pain.
Astro folks have built an integration for MDX so it’s easy-peasy to add it to your project. Just follow these instructions.
These methods also work with standard Markdown files.
The first way is simply to import your MDX file and use it directly as a component.
---
import MDXComp from '../components/MDXComp.mdx'
---
<MDXComp />Because of this, MDX can kinda function like a partial.
First, you feed your MDX into a content collection. Note that you have to add the mdx pattern to your glob here.
The first way is simply to import your MDX file and use it directly as a component.
// src/content.config.js
import { defineCollection } from 'astro:content';
import { glob } from 'astro/loaders';
const blog = defineCollection({
loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/blog" }),
});
export const collections = { blog };Then you retrieve the MDX file from the content collection.
---
import { getEntry, render } from 'astro:content'
const { slug } = Astro.props
const post = await getEntry('blog', slug)
const { Content } = await render(post)
---
<Content />As you’re doing this, you can pass components into the MDX files so you don’t have to import them individually in every file.
For example, here’s how I would pass the Image component from Splendid Labz into each of my MDX files.
---
import { Image } from '@splendidlabz/astro'
// ...
const { Content } = await render(post)
const components = { Image }
---
<Content {components} />In my MDX files, I can now use Image without importing it.
<Image src="..." alt="..." />Finally, you can add a layout frontmatter in the MDX file.
---
title: Blog Post Title
layout: @/layouts/MDX.astro
---This layout frontmatter should point to an Astro file.
In that file:
Astro.props.content.<slot>.---
import Base from './Base.astro'
const props = Astro.props.content
const { title } = props
---
<Base>
<h1>{title}</h1>
<slot />
</Base>ESLint and Prettier don’t format MDX files well, so you’ll end up manually indenting most of your markup.
This is fine for small amounts of markup. But if you have lots of them… then the Markdown Component will be a much better choice.
More on that in another upcoming post.
The Astro RSS integration doesn’t support MDX files out of the box.
Thankfully, this can be handled easily with Astro containers. I’ll show you how to do this in Practical Astro.
I’ve been building with Astro for 3+ years, and I kept running into the same friction points on content-heavy sites: blog pages, tag pages, pagination, and folder structures that get messy over time.
So I built Practical Astro: Content Systems, 7 ready-to-use solutions for Astro content workflows (MDX is just one of them). You get both the code and the thinking behind it.
If you want a cleaner, calmer content workflow, check it out.
I also write about Astro Patterns and Using Tailwind + CSS together on my blog. Come by and say hi!
Markdown + Astro = ❤️ originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
This issue of What’s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.
clip-pathAmit Sheen demonstrated how to create a full jigsaw puzzle using clip-path. While I doubt that you’ll need to create a jigsaw puzzle anytime soon, Amit’s walkthrough offers a fantastic way to acquaint yourself with this evolving CSS property that’s becoming more and more popular every day.
For example, Chrome Canary shipped rounded clip-path polygons only last week:
I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to @lea.verou.me for bringing it to CSS. Enable the `enable-experimental-web-platform-features` flag in Chrome Canary codepen.io/yisi/pen/NPR…
— yisibl.bsky.social (@yisibl.bsky.social) Apr 9, 2026 at 7:25
[image or embed]
And there’s also talk of implementing other corner-shape keywords such as bevel, too.
Finally, since we’re on the topic, and because I somehow completely missed it for What’s !important #8, here’s Karl Koch demonstrating some really neat clip-path animations.
Get clippin’!
The Chrome DevRel team created a view transitions toolkit, a collection of utilities that make working with view transitions a bit easier.
Here’s my favorite demo from the site:
Chrome shipped element-scoped view transitions only last month, so there’s no better time to dive into this toolkit.
Chris Coyier discussed the use of name-only containers for scoping, and how they compare to class names and @scope. Personally, I prefer @scope because it tends to result in cleaner HTML, and it seems that Chris has updated his stance to be more @scope-aligned too, but it really comes down to personal preference. What’s your take on it?
At one point, subgrid was one of the most highly-anticipated CSS features, but it’s been two and half years since it became Baseline Newly Available, and it’s barely made a dent in the CSS landscape. This is a shame, because subgrid can help us to break out of grids properly and avoid the ‘ol Michael Scofield/nested wrappers/negative margins extravaganza.
But don’t worry, David Bushell’s very simple explanation of subgrid has you covered.
Remember You Might Not Need jQuery? Pavel Laptev’s The Great CSS Expansion has a similar vibe, noting CSS alternatives to JavaScript libraries (and JavaScript in general) that are smaller and more performant.
contrast-color() (now baseline)border-shape (no Safari or Firefox support)scroll range for view timelines (no Safari or Firefox support)revert-rule keyword (already supported by Chrome and Firefox)overflow-anchor (already supported by Chrome and Firefox)stretch (already supported by Chrome)It’s becoming increasingly difficult to keep up with all of these new CSS features. I attempted way too many rounds of Keith Cirkel’s new CSS or BS? quiz, and my best score was only 18/20. Sad times. Let me know your score in the comments (unless it’s higher than mine…).
What’s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well.
With a high of F and a low of 41F. Currently, it's 57F and Clear outside. Current wind speeds: 4 from the Southeast Pollen: 0 Su...
