CloudCannon's Visual Editor API CloudCannon's Visual Editor API is a public JavaScript API for building custom integrations with the Visual Editor. It lets you run your own code inside the Visual Editor to read and write content, listen for changes, and upload files using code running inside your website files. An API (Application Programming Interface) is a set of methods and rules that allow one piece of software to interact with another using code to call specific functions for reading data, triggering actions, or responding to events, rather than a graphical interface. 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.Visual Editor API
API
Visual Editor
How does the Visual Editor API work?#
When you open a page in the Visual Editor, CloudCannon loads your site inside a sandboxed iframe. The Visual Editor API bridges communication between your website's JavaScript and the Visual Editor that surrounds it.
CloudCannon exposes an API router on window.CloudCannonAPI. You request the version you want with useVersion(), and the router returns an API Object you can use to interact with the Visual Editor.
What can you do with the API?#
The API Object gives you a set of building blocks. The Doodle Gallery only uses a few of them, but it's worth knowing the whole toolbox so you can recognize what's possible:
- Access files — every file in your Site is exposed as an object you open from your code, whether it's the page currently open in the Visual Editor or any other file.
- Read and write data — read and update the front matterof a content file, the contents of a data file, the body content, or the raw file source.Glossary term
Front Matter
The structured data that precedes the main content in a markup file, typically stored at the top of a file between two sets of triple-dash characters. This data often contains information about the file that should not be in the content body, such as the file title, author, and SEO information.
- Work with Collections and Datasets — list and react to many files at once across a Collectionor DatasetGlossary term
Collection
A group of related files with a similar format (e.g., a folder of pages, blog posts, or data files). Once you group your files into Collections, they appear in the Site Navigation for easy access.
.Glossary termDataset
A structured data file or folder defined under
data_configin your CloudCannon Configuration File. Datasets are used to store reusable data such as navigation links, locale strings, or site settings, and can be accessed and updated through CloudCannon's editing interfaces. - Listen for changes — subscribe to change events so your integration stays in sync as content updates.
- Build editing interfaces — render your own UI, open CloudCannon's own Data Panels, or make elements on the page directly editable.Glossary term
Data Panel
A Data Panel is a panel of Inputs for editing a focused scope of structured data, such as image details, link attributes, or Site configuration. Data Panels appear in several places across CloudCannon — in the Visual Editor, in the Content Editor when you edit a snippet, image, or link, and in Configuration Mode, such as the Edit Advanced panel. Developers can also build custom Data Panels with full Input support using the Visual Editor API.
- Upload files and manage loading — upload new files into your Site and control the Visual Editor's loading state while your integration works.
CloudCannon's Editable Regions are built on the same Visual Editor API that you have access to. For example, *.createTextEditableRegion() uses the same underlying mechanism as the data-editable attribute — it makes any HTML element inline-editable and connects it to the Visual Editor's content model.
What does the Doodle Gallery use?#
The Doodle Gallery is a deliberately small slice of the toolbox. In this guide, we'll cover how to detect the Visual Editor, access a data file, upload an image, and add a new item to a list.
It leaves the rest of the toolbox untouched, and uses only part of two more — and those are where other kinds of integrations come from:
- Work with Collections and Datasets — build a content dashboard that flags which files in a Collection are still in draft or missing a hero image.
- Listen for changes — show a live SEO or word-count preview that updates as a Team Membertypes.Glossary term
Team Member
A person who belongs to the same Organization as you. Team members are other CloudCannon users who have been invited to your Organization to collaborate on Sites, edit content, or manage settings. Each team member has their own CloudCannon account with individual permissions assigned through Permission Groups.
- Build editing interfaces — the Doodle Gallery renders its own UI, but you could instead open CloudCannon's own Data Panel for a field, or make a heading on the page editable inline.
- Upload files and manage loading — the Doodle Gallery uploads images, but you could also show the Visual Editor's loading overlay while your integration fetches data from an external service.
In the next step of this guide, we'll detect the Visual Editor and initialize the API in code.
