Astro Content Layer Expert
Type-safe content management with loaders, Zod schemas, and the unified Content Layer API.
Agent Workflow (MANDATORY)
Before ANY implementation, use TeamCreate to spawn 3 agents:
- fuse-ai-pilot:explore-codebase - Check existing collections, loaders, and content structure
- fuse-ai-pilot:research-expert - Verify latest Content Layer docs via Context7/Exa
- mcp__context7__query-docs - Get loader and schema examples
After implementation, run fuse-ai-pilot:sniper for validation.
Overview
When to Use
- Managing blog posts, docs, or product descriptions in Markdown/MDX
- Fetching content from a CMS, API, or database with type safety
- Needing TypeScript autocomplete for frontmatter fields
- Migrating from Astro 4 legacy content collections
Why Content Layer API
| Feature |
Benefit |
src/content.config.ts |
Single config file at project root |
| Built-in loaders |
glob() and file() for local files |
| Custom loaders |
Fetch from any external source |
| Zod 4 schemas |
Full TypeScript type safety |
astro sync |
Generates types from collections |
Core Concepts
Config File Location
The config file moved from src/content/config.ts to src/content.config.ts in Astro 5+.
Collection Types
| Loader |
Use Case |
glob() |
Multiple files in a directory (MD, MDX, JSON, YAML) |
file() |
Single JSON/YAML file with multiple entries |
| Custom |
Remote API, database, or any async data source |
Key APIs
| API |
Description |
getCollection(name) |
Fetch all entries in a collection |
getEntry(name, id) |
Fetch a single entry by ID |
render(entry) |
Render a content entry to HTML + headings |
defineCollection() |
Define a collection with loader and schema |
Reference Guide
| Need |
Reference |
| Overview & concepts |
overview.md |
| Config file setup |
config.md |
| Glob, file, custom loaders |
loaders.md |
| getCollection / getEntry |
querying.md |
| render() + headings |
rendering.md |
| MDX + Remark/Rehype |
mdx.md |
| Blog collection example |
templates/blog-collection.md |
| Custom remote loader |
templates/custom-loader.md |
Best Practices
- Always define schemas — Never skip Zod validation
- Run
astro sync — After changing content.config.ts
- Use
glob() for local files — Supports MD, MDX, JSON, YAML, TOML
- Custom loaders for remote data — CMS, REST API, GraphQL
render() for MDX — Returns Content component + headings array
1---2name: astro-content-33description: Expert Astro Content Layer API — content.config.ts, glob/file loaders, custom loaders, getCollection, getEntry, render(), Zod schemas, MDX, Remark/Rehype plugins. Use when managing structured content, blog posts, or any typed data collections.4---56# Astro Content Layer Expert78Type-safe content management with loaders, Zod schemas, and the unified Content Layer API.910## Agent Workflow (MANDATORY)1112Before ANY implementation, use `TeamCreate` to spawn 3 agents:13141. **fuse-ai-pilot:explore-codebase** - Check existing collections, loaders, and content structure152. **fuse-ai-pilot:research-expert** - Verify latest Content Layer docs via Context7/Exa163. **mcp__context7__query-docs** - Get loader and schema examples1718After implementation, run **fuse-ai-pilot:sniper** for validation.1920---2122## Overview2324### When to Use2526- Managing blog posts, docs, or product descriptions in Markdown/MDX27- Fetching content from a CMS, API, or database with type safety28- Needing TypeScript autocomplete for frontmatter fields29- Migrating from Astro 4 legacy content collections3031### Why Content Layer API3233| Feature | Benefit |34|---------|---------|35| `src/content.config.ts` | Single config file at project root |36| Built-in loaders | `glob()` and `file()` for local files |37| Custom loaders | Fetch from any external source |38| Zod 4 schemas | Full TypeScript type safety |39| `astro sync` | Generates types from collections |4041---4243## Core Concepts4445### Config File Location4647The config file moved from `src/content/config.ts` to `src/content.config.ts` in Astro 5+.4849### Collection Types5051| Loader | Use Case |52|--------|----------|53| `glob()` | Multiple files in a directory (MD, MDX, JSON, YAML) |54| `file()` | Single JSON/YAML file with multiple entries |55| Custom | Remote API, database, or any async data source |5657### Key APIs5859| API | Description |60|-----|-------------|61| `getCollection(name)` | Fetch all entries in a collection |62| `getEntry(name, id)` | Fetch a single entry by ID |63| `render(entry)` | Render a content entry to HTML + headings |64| `defineCollection()` | Define a collection with loader and schema |6566---6768## Reference Guide6970| Need | Reference |71|------|-----------|72| Overview & concepts | [overview.md](references/overview.md) |73| Config file setup | [config.md](references/config.md) |74| Glob, file, custom loaders | [loaders.md](references/loaders.md) |75| getCollection / getEntry | [querying.md](references/querying.md) |76| render() + headings | [rendering.md](references/rendering.md) |77| MDX + Remark/Rehype | [mdx.md](references/mdx.md) |78| Blog collection example | [templates/blog-collection.md](references/templates/blog-collection.md) |79| Custom remote loader | [templates/custom-loader.md](references/templates/custom-loader.md) |8081---8283## Best Practices84851. **Always define schemas** — Never skip Zod validation862. **Run `astro sync`** — After changing `content.config.ts`873. **Use `glob()` for local files** — Supports MD, MDX, JSON, YAML, TOML884. **Custom loaders for remote data** — CMS, REST API, GraphQL895. **`render()` for MDX** — Returns `Content` component + headings array
fusengine