Content Collections

Transform your content into type-safe data collections. Eliminate the need for manual data fetching and parsing. Simply import your content and begin. Built-in validation ensures the accuracy of your data. Preprocess your data before it enters your app.

Features

- Beautiful DX:
Content Collections is designed to provide a pleasurable user experience. It offers a seamless developer experience without the need to restart the server or refresh the browser. Content collections are automatically updated when you make changes to your content.

- Type-safe:
Your content is parsed and validated during the build process, guaranteeing accuracy and currency. Content Collections offers a type-safe API to access your content.

- Simple to use:
No need to manually fetch and parse your content anymore. Just import it and start using Content Collections. It provides a simple API, allowing you to concentrate on building your app.

- Transformation:
Content Collections allows you to transform your content before it enters your app. You can use it to modify your content, join two collections or even fetch data from a server.

Installation

Content Collections offers a variety of adapters that seamlessly integrate with popular web frameworks. The installation process depends on the chosen adapter:

- Next.js
- Qwik
- Remix (Vite)
- Solid Start
- SvelteKit
- Vite

If your framework is not listed, you can still use Content Collections by using the CLI. Please open a ticket if you want to see your framework listed.

Usage

1. Create a content-collections.ts file at the root of your project:

``ts
import { defineCollection, defineConfig } from "@content-collections/core";

const posts = defineCollection({
name: "posts",
directory: "src/posts",
include: "*/.md",
schema: (z) => ({
title: z.string(),
summary: z.string(),
content: z.string(),
}),
});

export default defineConfig({
collections: [posts],
});
`

1. Start writing content in src/posts:

`md
---
title: Hello World
summary: This is my first post
---

# Hello World

This is my first post.
`

1. Use your content in your app:

`tsx
import { allPosts } from "content-collections";

export function Posts() {
return (


{allPosts.map((post) => (

• 
  /posts/${post._meta.path}}>
  

  {post.title}

  
  

  {post.summary}

  
  


))}