---
title: "Astro"
description: "A blog example using Comark with Astro content collections and React components."
canonical_url: "https://comark.dev/examples/frameworks/astro"
---
# Astro

> A blog example using Comark with Astro content collections and React components.

<code-explorer org="comarkdown" repo="comark@81a416b278b0f304d7e7577c7ac6bbfc78414790" path="examples/1.frameworks/astro" defaultValue="src/content/posts/comark-syntax.md"></code-explorer>

This example demonstrates how to use Comark with Astro content collections and React components. Blog posts are stored as `.md` files with Zod-validated frontmatter, loaded via the `glob()` loader, and rendered using `MarkdownDocument` from `@comark/react` with custom components like `Alert`.

## How it works

- **Content collections** — Posts are defined with `glob()` loader and a Zod schema for type-safe frontmatter (title, description, pubDate, tags).
- **Comark parsing** — In the blog post page, `parseMarkdown()` converts the raw Markdown body into a Comark document.
- **React rendering** — `MarkdownDocument` from `@comark/react` renders the AST using React components, including custom ones like `Alert`. Thanks to Astro's React integration, these are server-rendered with zero client-side JavaScript.


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.