Introduction to Editing

Last modified: October 17th, 2024

Editing on CloudCannon enables anyone on your team to contribute to your Git repository, regardless of technical expertise.

Traditional Content Management Systems (CMSs) use databases to store your content. CloudCannon takes a different approach. By storing your content in files alongside your code, your content can benefit from the Git workflow (versioning, accountability, branching, etc.).

With CloudCannon, developers can configure their local environment just the way they want it, and non-developers can edit in the app with ease. You have control over how you configure your experience.

If this is your first time creating a site on CloudCannon, or you need a refresher, check out our Starter Guides — we have one for every SSG we support!

In the Editing section of our documentation, we cover how to:

Let’s briefly introduce a few of these topics.

The Global Configuration File#

Unlike a traditional CMS, you can configure CloudCannnon to suit your build tools and code. To maintain this flexibility, CloudCannon does not make assumptions about how you have configured your static site. CloudCannon will need you to clarify a few things about your SSG setup:

  • Where are your content files stored? How are they grouped?
  • Should CloudCannon allow the creation of new files? If so, how should they be created?
  • Do you want your team to be able to edit those files? If so, what options should they have?

This setup information is stored in the CloudCannon global configuration file, saved in the root directory of your repository. Your configuration file can be one of several file types (i.e., /cloudcannon.config.*). When CloudCannon searches the root directory for your config file, it will use the first matching file from this list.

  1. cloudcannon.config.json
  2. cloudcannon.config.yaml
  3. cloudcannon.config.yml

The global configuration file is the heart of your CloudCannon experience. If you don’t have one, CloudCannon will prompt you to create a global configuration file when you create a new site.

For a more in-depth explanation of the global configuration file, including how to create your configuration file, make a custom file path, or use our configuration GUI, read our documentation:

What is a Collection?#

A Collection is a group of related files with a repeated format stored in the same folder/path within your repository. Collections could be a folder of pages, blog posts, data files, or any other file type. You can edit your Collections by altering any file or adding more files. Collections are the starting point for any new site on CloudCannon.

Let’s cover an example. Your team publishes a weekly blog for your site. Each blog post is a single MDX file stored in the folder content/posts within your Git repository. CloudCannon makes creating a new blog post easy, especially for non-technical members of your team who may be hesitant to create new files in a Git repository. In CloudCannon, you can create new collection items with a click of a button, edit them in one of our editing interfaces, and see your existing files in a sortable, filterable browser. All your team’s changes will push back to your Git repository.

For a more in-depth explanation of Collections, including how to display Collections in the site navigation, control who can create new posts, and customize the default content, name, and editing interface of new files, read our documentation:

Supported file types#

CloudCannon supports the following file formats for standalone data files or Collections:

  • Structured data files: JSON, YAML, TOML, CSV, TSV
  • Markup files: HTML, Markdown, MDX
  • Combination files: HTML with front matter, Markdown with front matter, MDX with front matter

Structured data files are a great way to store data. Each key can contain strings, numbers, rich text, or even arrays/objects, which can recurse indefinitely. We recommend structured data files for page-building components, navigation, header and footer, site metadata, or any file that does not contain long-form prose.

Markup files should store longer written content, such as files with multiple lines of text or complex formatting. We recommend markup files for blog posts, articles, or documentation.

Combination files use structured data and markup in the same file. CloudCannon expects structured data to be at the top of the file in the front matter section. Front matter is separated from other content by a --- notation or similar. You can edit both parts of a combination file using the Visual or Content Editor. We recommend combination files for pages where you want to attach metadata to your content.

Editing in CloudCannon#

Editing in CloudCannon is collaborative, enabling your team to work together. While you edit a file, any number of team members can view your editing session live. You can switch who has control of the editing session to cooperate on content creation.

CloudCannon remembers who has contributed to a file. Any team member can review and commit file changes, see how long ago a user edited a file, and navigate to the file a user is editing or viewing by clicking on their avatar.

For a more in-depth explanation of collaborative editing, including how to switch between editing and viewing, read our documentation:

Editing interfaces#

CloudCannon has four editing interfaces: the Visual Editor, Content Editor, Data Editor, and Source Editor. Each interface provides a different editing experience, with tools specific to particular file types. Most of these interfaces are available to all SSGs. However, we don’t support the Visual Editor for some documentation-based SSGs.

The Visual Editor is an interactive preview of your site. Your team can navigate each page by clicking links as you would on the live site and edit by clicking directly on the content. Developers can determine which page elements are editable and configure the Visual Editor sidebar to alter a file’s front matter. The Visual Editor removes the guesswork of updating your content by showing you exactly what your live site will look like in a true WYSIWYG experience.

The Content Editor is a rich text editor useful for markup and combination files. This editor provides a clean, distraction-free interface for editing content-heavy files like blog posts. Customize your WYSIWYG toolbar to include the tools your content team needs, add Snippets to create a library of custom content blocks, and use the sidebar to edit front matter content — all in the same editor.

The Data Editor is a simple interface for managing structured data. Team members can edit input values without being overwhelmed by code syntax. CloudCannon uses the Data Editor in the Visual and Content Editors, where it functions as the sidebar to manage front matter content.

The Source Editor is an in-browser code editor that is great for making minor changes to any of your files. CloudCannon automatically applies syntax highlighting to your files based on the file extension. This editing interface does not require configuration and will work out of the box for any SSG. This editing interface is available to users with Owners, Developers, and Technical Editors Default Permission Groups.

For a more in-depth explanation of our editing interfaces, including how to configure each interface and customize the default editor for a given Collection or Schema, read our documentation:

Inputs#

Use inputs to store structured data. Each input consists of a key and a value or array. Each input corresponds to a field in your front matter or data file. You can edit your inputs using the Data Editor or the sidebar of the Visual or Content Editor.

You can configure your inputs to customize your experience in these editors and streamline your workflow. Add a label, comment, and input type to create an intuitive interface for your content team. Create specific configurations that can target inputs at specific levels of your repository.

For a more in-depth explanation, including how to configure your inputs, please read our documentation:

Structures#

CloudCannon structures are an easy way to support a set of predefined objects. For example, you might have a structure that allows your content team to add photo galleries, testimonials, image and text blocks, or CTAs to a page.

Structures and arrays go hand-in-hand. Configuring your structures will allow you to create predefined objects to add to your arrays. Arrays are one of the most powerful parts of any static site generator. For example, you might use an array to create lists of related content, such as a list of staff members or any repeated component or content block, such as testimonials or a gallery.

For a more in-depth explanation, including how to configure your structures, please read our documentation:

Snippets#

CloudCannon supports embedding rich Snippets in Markdown files when using the Content Editor. Snippets appear as blocks in your rich text view, and once configured, the Snippets icon in your WYSIWYG toolbar will provide a modal menu for your content team to select from.

For a more in-depth explanation of Snippets, please read our documentation:

Next
What is the CloudCannon configuration file?
Learn about the CloudCannon configuration file.

Open in a new tab