Introduction to Editing

Editing in CloudCannon is how your team contributes to your website content. You can configure the editing experience to make it intuitive for your content team. This includes defining data structures, choosing input types, and enabling visual editing on your pages.

Articles in this section are useful for developers responsible for configuring the editing experience in CloudCannon.

In the Editing section of our Developer documentation, we cover:

• Markdown Engine — Learn how to configure how CloudCannon parses and saves your Markdown content
• Schemas — Learn how to define the structure of your content and which inputs appear
• Inputs — Learn how to configure how each field is edited in the Data Editor and sidebar
• Structures — Learn how to create reusable object templates for arrays and complex content
• Snippets — Learn how to add custom blocks to rich text in the Content Editor
• Rich Text Editors — Learn how to customize the WYSIWYG toolbar and options
• Visual Editing — Learn how to define which elements are editable in the Visual Editor
• Data — Learn how to configure global data files and their structure

Let's briefly introduce a few of these topics.

Markdown Engine#

CloudCannon parses Markdown content into HTML for previewing and editing, and saves it in a format your SSG recognizes. You can configure the Markdown engine (CommonMark or Kramdown) and its options to control how CloudCannon processes your content.

For a more in-depth explanation of the Markdown engine, please read our documentation:

• Configure your Markdown engine

Schemas#

Schemas define the structure of your content. They specify which keys appear in your front matter or data files and what type of input each key uses. Schemas can be applied to collections, individual files, or globally.

For a more in-depth explanation of Schemas, including how to create and configure them, please read our documentation:

• What is a Schema?
• Create a Schema
• Set the path for new files
• Configure the add button in collections
• Configure your collections

Inputs#

Inputs determine how each field in your content is edited. CloudCannon supports many input types: text, number, date, file, select, rich text, and more. You can configure labels, placeholders, and validation for each input.

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

• What are Inputs?
• Configure an Array Input
• Configure a Boolean Input
• Configure a Code Input
• Configure a Color Input
• Configure a Date or Time Input
• Configure a File Input
• Configure a Number Input
• Configure an Object Input
• Configure a Rich Text Input
• Configure a Select Input
• Configure a Text Input
• Configure a URL Input
• Populate an Array Input
• Populate a Select Input

Structures#

Structures are predefined object templates that your team can add to arrays. For example, you might have a structure for a testimonial block or a team member card. Structures make it easy to maintain consistent content structure.

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

• What is a structure?
• Create a structure
• Configure your structure previews
• Structures in the configuration cascade

Snippets#

Snippets are custom blocks that can be inserted into rich text content. They appear in the Content Editor toolbar and allow your team to add structured components like image galleries or call-to-action blocks without editing code.

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

• What is a Snippet?
• Snippets using Docusaurus components
• Snippets using Eleventy shortcodes
• Snippets using Hugo shortcodes
• Snippets using MDX components
• Snippets using Python Markdown

Rich Text Editors#

Rich Text Editors provide WYSIWYG editing for markup content. You can configure which formatting options appear in the toolbar, add custom Snippets, and control how content is saved.

For a more in-depth explanation of Rich Text Editors, please read our documentation:

• What are Rich Text Editors?
• Configure your rich text editors

Visual Editing#

Visual Editing allows your team to click directly on content in a live preview to edit it. You define Editable Regions in your HTML to specify which elements are editable. This creates an intuitive, WYSIWYG experience.

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

• What is Visual Editing?
• What are Editable Regions?
• Configure array editable regions
• Configure component editable regions
• Configure image editable regions
• Configure source editable regions
• Configure text editable regions

Data#

CloudCannon can manage standalone data files in addition to content with front matter. You can configure how global data files are structured and which inputs appear when editing them.

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

• Define your data