Getting started

Use Node.js 24. RC1 declares peer dependencies on Astro ^7.3.0, Svelte ^5.57.0 and Vite ^8.0.0. The commands below use pnpm 11 from an existing Astro project.

Install the release candidate

pnpm add @rigel-cms/rigel@1.0.0-rc.1 svelte@^5.57.0
pnpm add -D vite@^8.0.0

Keep Svelte and Vite installed directly in the host project. Rigel configures its Svelte compiler plugin through the Astro integration.

Declare a page

Create src/content/schema.ts:

import { defineDocument, defineSchema } from "@rigel-cms/rigel/content";

export default defineSchema({
  documents: [
    defineDocument({
      name: "page",
      title: "Pages",
      type: "document",
      folder: "src/content/pages",
      fields: [
        { key: "title", label: "Page name", type: "string", required: true },
        { key: "intro", label: "Introduction", type: "text" },
      ],
    }),
  ],
  objects: [],
});

Add the integration to astro.config.mjs, preserving any existing integrations and other site settings:

import { defineConfig } from "astro/config";
import { rigel } from "@rigel-cms/rigel";
import schema from "./src/content/schema";

export default defineConfig({
  integrations: [
    rigel({
      backend: "local",
      demo: false,
      schema,
      preview: {
        documents: { page: { url: "/{slug}/", index: "/" } },
      },
    }),
  ],
});

Add the virtual module types to src/env.d.ts:

/// <reference types="@rigel-cms/rigel/types" />

Create src/content/pages/home.json:

{
  "_id": "page:home",
  "_type": "page",
  "slug": "home",
  "title": "Home",
  "intro": "Welcome to our website.",
  "draft": false
}

Render and bind the content

For this minimal example, use src/pages/index.astro. If the site already has a home page, adapt that template rather than adding a second route for /.

---
import { getDocument } from "virtual:rigel-content";

const doc = getDocument("page:home");
if (!doc) throw new Error("Missing page:home");
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{String(doc.data.title)}</title>
  </head>
  <body>
    <main data-rigel-doc={doc.id}>
      <h1 data-rigel-text="title">{String(doc.data.title)}</h1>
      <p data-rigel-text="intro">{String(doc.data.intro ?? "")}</p>
    </main>
  </body>
</html>

The attributes connect the rendered text to the schema fields. They do not change the public page’s normal rendering.

Edit and save

pnpm dev

Open /rigel/ on your Astro development server. Select Home in Pages, switch to Edit and change the introduction. The preview updates from the in-memory draft. Press Save, then inspect src/content/pages/home.json and the public home page.

Local writes exist only while the development server runs. A static build includes the editor but cannot write to your filesystem. Use GitHub mode for editing a deployed static site.

Before deploying, run your site’s checks and pnpm build. Add draft filtering and SEO rendering when expanding this minimal page into a complete site.