The CloudCannon User Interface An abbreviation of User Interface, the UI is the visual elements and components that you can interact with in the CloudCannon app, such as pages, navigation menus, buttons, and inputs. A digital document or resource stored in your website repository, such as HTML pages, images, stylesheets, JavaScript files, or content files. In CloudCannon, files can be edited, organized, and managed through various interfaces.UI
File
Articles in this section are a great place for new Users to learn what UI elements are called, where to find specific tools, and how to navigate your content.
In the CloudCannon UI section of our User documentation, we cover:
- Sites — Learn how CloudCannon organizes your website(s)
- Browsers — Learn how to find your website content on a Site in CloudCannon
- Editing Interfaces — Learn about CloudCannon's editing interfaces for updating your website content
Let's briefly introduce a few of these topics.
Sites#
Sites are the main way CloudCannon organizes your content. Each Site connects to a branch of your Git repository A storage location for the code and files that make up your website. CloudCannon supports the repository providers GitHub, GitLab, and Bitbucket, and highly recommends using a repository to store your website's files for better version control and collaboration.Git Repository
For a more in-depth explanation of the Site interface, please read our documentation:
Browsers#
Browsers in CloudCannon let you find, browse, sort, and open your website files. There are two main types of browsers: the Collection Browser for viewing collections of related content (like all your blog posts or all your product pages), and the File Browser for viewing your files by their location in your website's folder structure.
For a more in-depth explanation of these browsers, please read our documentation:
Editing Interfaces#
CloudCannon offers four editing interfaces: the Visual Editor CloudCannon's visual editing interface provides a user-friendly way of updating your website files on an interactive preview of your webpage. You can navigate around your website preview using links/buttons, as you would on the live version, and edit your content inline on the page, or with the data panel or sidebar. What you see in the Visual Editor is what your website visitors will see on your live webpages. CloudCannon's rich text editor for clean, distraction-free editing of content-heavy files. This editing interface is most useful for Markdown and MDX files, with or without Front Matter. CloudCannon's editing interface for managing 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 Editor and Content Editor. CloudCannon's in-browser code editor for making changes to the source code of your files. The Source Editor displays the raw content of text-based files with syntax highlighting automatically detected based on the file extension.Visual Editor
Content Editor
Data Editor
Source Editor
For a more in-depth explanation of the editing interfaces, please read our documentation: