The Data Editor

Last modified: May 24th, 2024

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.

The Data Editor offers a simple way to manage structured data files and the front matter of markup files. The Data Editor is most useful for YAML, TOML, JSON, CSV, and TSV file types, and Markdown or MDX files with front matter.

This editing interface also doubles as the sidebar and data panels in the Visual and Content Editors.

A screenshot of the Data Editor, an editing interface for structured data files and markup file front matter.

Depending on your SSG and site configuration, you may not have access to the Data Editor for all files. An editing interface may not be available because:

What is front matter?#

Front matter is structured data that precedes the main content in a markup file (e.g., a Markdown or MDX file).

Front matter data contains information about the file. This information can range from simple data like file title and author to SEO information to custom variables created by you or your team. Front matter is useful for providing context to your file's content.

For most SSGs, front matter is stored at the top of a file between two sets of triple-dash characters (---), although this can vary.

Data Editor features#

The Data Editor is a simple interface for editing the values of your structured data through inputs. Each input in the Data Editor corresponds to a key in your front matter or data file, providing an editing interface for those values.

For example, you could use the Data Editor to edit:

  • Array inputs in your site navigation file, updating the URLs of the pages you want to list.
  • Image inputs in the front matter of your blog post, updating the thumbnail image.

For more information about the types of inputs available in CloudCannon, read our documentation on configuring your inputs.

By default, you cannot add or delete inputs in the Data Editor. You can configure this functionality using mutable objects.

For more information about the Editing interface navigation and the Context menu at the top of the Data Editor, read our documentation on editing your files.

The sidebar in the Visual or Content Editor#

A screenshot of the Content Editor, with the sidebar showing the front matter fields of a blog file.

You can edit the front matter and content of markup files in the same editing interface using the Visual or Content Editor. Data from the front matter of your file will appear in the editor sidebar. The sidebar is the same interface as the Data Editor, just smaller.

You can open or close the sidebar using the arrow button on the right of the panel.

Data panels in the Visual or Content Editor#

A screenshot of the Visual Editor,  with the open data panel showing the inputs of a page component.

Data panels appear in the Visual and Content Editors.

In the Visual Editor, you can edit page components using the data panels if you have visual data bindings and previews configured. You can see your changes as you edit. CloudCannon will update the page in the Visual Editor each time you alter the input values in a data panel.

In the Content Editor, you can edit images and links using their data panels. The image data panel contains fields for alternate and title text, while the link data panel has fields for title and other attributes.

You can move the data panel around the screen by clicking and dragging the panel header.

Open in a new tab