Quick start

This walkthrough uses the CLI so you can try ContentGraph without choosing a framework. For an existing Vite application, see the Vite integration.

Install

npm install contentgraph zod

Define a collection

Create contentgraph.config.ts in your project root:

import { defineCollection } from "contentgraph";
import { z } from "zod";

export const collections = {
  posts: defineCollection({
    source: "./content/posts",
    schema: z.object({
      title: z.string(),
      draft: z.boolean().default(false),
    }),
  }),
};

Add a post

Create content/posts/hello.md. The filename gives this entry the ID hello.

---
title: Hello ContentGraph
---

## My first post

Content starts here.

Prepare the content

npx contentgraph prepare

This writes the runtime and inferred types to .contentgraph/. Add that directory to .gitignore.

Query and render

Create render.mjs in the project root:

import { writeFile } from "node:fs/promises";
import { content } from "./.contentgraph/server.js";

const post = await content.query("posts").select("id", "title").first();
if (!post) {
  throw new Error("Add a post before rendering.");
}

const { html } = await content.render("posts", post.id);
await writeFile(
  "post.html",
  `<!doctype html><html lang="en"><meta charset="utf-8"><title>ContentGraph</title><main>${html}</main></html>`,
);

Run node render.mjs and open post.html. In a framework application, the same query and render calls belong in your server loader or server component.

Continue with collections and schemas or querying content.