CloudCannon & Astro

Add content to your Astro project using CloudCannon as a CMS

CloudCannon is a Git-based headless content management system that provides a visual editor for your content and UI components, providing a rich, live editing experience.

Integrating with Astro

This guide will describe the process of configuring CloudCannon as a CMS for Astro using the CloudCannon Site Dashboard.

The Site Dashboard provides you with an organized view of your Astro files and the ability to edit them using:

A Visual Editor for an interactive preview of your site, allowing you to edit directly on the page.
A Content Editor for WYSIWYG rich text editing in a minimal view.
A Data Editor for managing structured data files and markup.

You can also configure role-based access to a minimal Source Editor, an in-browser code editor for making minor changes to the source code of your files.

Prerequisites

A CloudCannon account. If you don’t have an account, you can sign up with CloudCannon.
An existing Astro project stored locally, or on one of CloudCannon’s supported Git providers: GitHub, GitLab, or Bitbucket. If you do not have an existing project, you can start with CloudCannon’s Astro Component Starter.

Configure a new CloudCannon Site

The following steps will configure a new CloudCannon Site from your dashboard. This Site will connect to an existing Astro repository and allow you to manage and edit your content with CloudCannon’s WYSIWYG text editor.

You can now explore your Site Dashboard to see your Astro site’s content files and edit them with the Content Editor (e.g. .md, .mdx), Data Editor (e.g. .yml, .json), and Visual Editor (e.g. .astro) as appropriate.

You may also want to take advantage of some CloudCannon features, such as organizing your files into collections, creating CloudCannon schemas, and setting up your project for visual editing.

For more detailed instructions, see CloudCannon’s Getting Started Guide.

CloudCannon collections and schemas

If you use Astro’s content collections, then you will be familiar with CloudCannon’s concepts of collections (used for organization/navigation in your Site Dashboard) and schemas (used to define the format of new content entries).

Your CloudCannon Site Dashboard allows you to organize your Astro project’s pages and content into collections: groups of related files with a similar format. This allows you to see similar types of content together for ease of editing and makes your content files easy to navigate, sort, and filter.

Create a CloudCannon schema for a collection

To ensure that the data properties of your CloudCannon entries match the Zod validation schema defined in your content collection, you can create a CloudCannon schema (a blank template document for creating a new entry). Creating a template schema can ensure that any new documents created in CloudCannon will have the properties required by your content collection and avoid type errors in your project. Your CloudCannon schema can also include default values to start new documents, such as an author name for a single-person blog.

The following example will create a CloudCannon schema based on an Astro content collection (blog) for blog posts written in Markdown. This schema will be available when creating a new entry from the CloudCannon “Posts” collection:

Creating a new entry

In your CloudCannon Site Dashboard, you can create new content using the “Add” button. You will be able to select an entry type from the schemas you have defined in cloudcannon.config.yml, depending on which collection you are currently in.

You can also upload files to CloudCannon, or create new files directly in your Astro project. When you save your Site changes, new files created in either location will be synchronized and available in both CloudCannon and your Astro project.

The following example will create a new blog post from the CloudCannon Site Dashboard “Posts” collection using the post.md template schema created to satisfy the blog Astro content collection:

Rendering CloudCannon content

Use Astro’s Content Collections API to query and display your posts and collections, just as you would in any Astro project.

Displaying a collection list

The following example displays a list of each post title, with a link to an individual post page.

---
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Displaying a single entry

To display content from an individual post, you can import and use the <Content /> component to render your content to HTML:

---
import { getEntry, render } from 'astro:content';

const entry = await getEntry('blog', 'my-first-post');
const { Content } = await render(entry);
---

<main>
  <h1>{entry.data.title}</h1>
  <p>By: {entry.data.author}</p>
  <Content />
</main>

For more information on querying, filtering, displaying your collections content, and more, see the full content collections documentation.

Deploying CloudCannon + Astro

CloudCannon offers free web hosting as part of all of its plans, which uses Cloudflare under the hood. However, you can host with almost any hosting provider that can deploy from a Git repository.

To deploy your website, visit our deployment guides and follow the instructions for your preferred hosting provider.

Configure Visual Editing

CloudCannon’s Visual Editor allows you to see and edit text, images, and other content in a live, interactive preview of your site. These updates can be made using editable regions, data panels, and the sidebar.

Follow CloudCannon’s guide to set up visual editing (also available in your Site Dashboard). This will show you how to define editable regions of your live preview by setting HTML data- attributes on DOM elements, or by inserting web components.

For example, the following template creates an editable author value that can be updated in the live preview:

<p>By: <editable-text data-prop="author">{author}</editable-text></p>

Visual Editing with components

CloudCannon allows you to define Component Editable Regions for live re-rendering of Astro components in the Visual Editor. This gives you the same interactive editing experience for your Astro components.

Agent Skills for CloudCannon

CloudCannon has published an open-source set of skills for AI coding agents. They handle new Astro site migrations for you: auditing your content, writing the config, adding visual editing with editable regions, and verifying the build. The skills are composable, so you can choose to run a full migration or pull in just one piece, like adding visual editing to an Astro site that’s already on CloudCannon.