---
title: "Getting started"
url: "https://rigelcms.dev/docs/getting-started"
description: "Add Rigel CMS to an Astro site and edit your first JSON page."
---

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](/docs/github-publishing/) for editing a deployed static site.

Before deploying, run your site’s checks and `pnpm build`. Add [draft filtering and SEO rendering](/docs/content-model/#drafts-and-seo) when expanding this minimal page into a complete site.

Documentation

On this page