Tour CloudCannon

Tour CloudCannon and get to know the pages, features, and editing interfaces.

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

You're currently viewing the universal guide, but a more specific guide exists for .
Check out the for a tailored onboarding experience.

Let's take a look at a site hosted through CloudCannon: Sendit!

Our Sendit template is an open-source site for multiple SSGs, available through GitHub. You can see a list of our available templates by selecting 'Edit with a template' when you launch a new site. For now, we'll use Sendit to show you around the CloudCannon app, but feel free to explore the site as we go.


The CloudCannon dashboard gives you an overview of your site. Here, you can preview your home page, your live URL, and view recent activity site-wide with a list of git commits.

A screenshot of the Dashboard view in the CloudCannon app shows a preview of your home page, live URL, and recent commits.

The Activity tab shows more paginated site activity in reverse chronological order.

The Usage tab shows your current bandwidth and build time utilization. If your plan has limited build time, you can use this tab to monitor your usage allowance.

A screenshot of the Usage tab in the CloudCannon app shows a bandwidth utilization graph for each day this month.


Your collections are listed in the sidebar. Collections are groups of related content.

A screenshot of the Collections view in the CloudCannon app shows a preview of all the pages tagged as blog posts on the example website.

Each collection corresponds to a folder in your site files. Navigating to a collection shows a preview of each file and lets your team members see all the content at a glance.

Developer Tools#

All your team members can access the Dashboard and Collections views. Developer tools are only visible to team members with specific permissions.

  • Status — Shows the current status of your Git sync, previous syncs, and build output.
  • Files — Opens a browser containing all the source files on the site.
  • Settings — Allows you to configure your build settings, hosting, sharing, and other site settings.

We will discuss permission levels more in the Collaboration section of this guide.

Editing interfaces#

We’ll go deeper into how to configure the CloudCannon editors later in this guide. For now, here’s an overview of each one.

Visual Editor#

The Visual Editor is the most intuitive way to edit content on CloudCannon, with editable elements indicated on a preview of your site. Your content team can click on any editable element to change its content and see those changes as they would appear live.

A screenshot of the Visual Editor in the CloudCannon app shows a pop-up for editing content in a live preview of the home page.

The Visual Editor also features a sidebar for managing front matter content. You can customize these inputs to give your editing team a more intuitive interface. For example, add a date picker for a date field, including a small comment to indicate how a field should be used, or use a select box to reference other pages on the site or data in a data file.

A screenshot of the Visual Editor in the CloudCannon app shows a sidebar for editing front matter content for the home page.

Content Editor#

The Content Editor is a rich text editor for Markdown files. This editor is useful if you want a distraction-free, clean writing interface, particularly for blog posts and other content with a simple layout. The Content Editor view also shows the Data Editor in the left-hand panel, as pictured below.

A screenshot of the Content Editor in the CloudCannon app shows the copy for a blog post and a sidebar for editing front matter content.

The Content Editor supports managing structured data via Snippets.

Data Editor#

We have already seen the Data Editor — the sidebar for managing front matter in the Visual and Content Editor. The Data Editor also manages content in YAML, TOML, JSON, CSV, and TSV files.

A screenshot of the Data Editor in the CloudCannon app shows editable fields for a data file.

Source Editor#

The Source Editor is an in-browser code editor, great for making small, quick changes. As with all the Editors, any changes sync back to your Git repository.

A screenshot of the Source Editor in the CloudCannon app shows the content of a markdown file opened in a code editor.

Open in a new tab