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

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

::code-explorer
```yaml [props]
org: comarkdown
repo: comark@81a416b278b0f304d7e7577c7ac6bbfc78414790
path: examples/1.frameworks/astro
defaultValue: src/content/posts/comark-syntax.md
```
::

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.