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:

   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(),
     }),
   });
   
   export default defineConfig({
     collections: [posts],
   });

2. Start writing content in src/posts:

   ---
   title: Hello World
   summary: This is my first post
   ---
   
   # Hello World
   
   This is my first post.

3. Use your content in your app:

   import { allPosts } from "content-collections";
   
   export function Posts() {
     return (
       <ul>
         {allPosts.map((post) => (
           <li key={post._meta.path}>
             <a href={`/posts/${post._meta.path}`}>
               <h3>{post.title}</h3>
               <p>{post.summary}</p>
             </a>
           </li>
         ))}
       </ul>
     );
   }

   Please note that the example above shows only the very basics of Content Collections and it does not cover content transformation. Content Collections does not transform content like markdown or mdx by default. But it has packages which can do that for you:

   • @content-collections/markdown
   • @content-collections/mdx

   If you want to see more examples and use cases, please refer to the documentation.

Sponsors

  

Become a sponsor

License

Content Collections is licensed under the MIT License.