Quick start

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

Install

npm install contentgraph

Define a collection

Create contentgraph.config.ts in your project root:

import { defineCollection } from "contentgraph";
import { schema } from "contentgraph/schema";

export const collections = {
  posts: defineCollection({
    source: "./content/posts",
    schema: schema.object({
      title: schema.string(),
      draft: schema.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.

Build the content

npx contentgraph build

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.select("id", "title").from("posts").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.