Getting Started with Astro and Sveltia CMS

Astro is a modern web framework that delivers fast, content-focused websites. When combined with Sveltia CMS, you get a powerful content management system that integrates natively with Astro’s build pipeline.

Why This Combination?

The astro-loader-sveltia-cms package creates a first-class integration between Sveltia CMS and Astro’s content collections. This means:

• Auto-generated Zod schemas from your CMS field definitions
• TypeScript types that stay in sync with your CMS config
• Content loader that works with Astro’s native collection system
• No manual schema maintenance — change your CMS config and schemas update automatically

Setting Up Your First Collection

Start by defining your collections in astro.config.mjs:

sveltia({
  config: {
    collections: [
      {
        name: "posts",
        folder: "src/content/posts",
        fields: [
          { name: "title", widget: "string" },
          { name: "date", widget: "datetime" },
          { name: "body", widget: "markdown" },
        ],
      },
    ],
  },
})

Then use the loader in your content config:

import { sveltiaLoader } from "astro-loader-sveltia-cms/loader";

const posts = defineCollection({
  loader: sveltiaLoader("posts"),
});

That’s it! Your posts collection now has full type safety and automatic schema validation.