Confirm your output files

The Visual Editor needs a preview of each webpage to facilitate visual editing. Whenever you complete a successful Site build, CloudCannon will automatically generate a webpage preview for every output file as it appears on the Internet.

It is important to review which files your Static Site Generator (SSG) has output to a live URL. The next task in the Set up Visual Editing in-app guide asks you to confirm your output files.

What is an output file?#

When you build your Site, CloudCannon will run the build command appropriate for your SSG. Your SSG will output each of your website files to a unique URL, allowing visitors to access your webpages on the Internet.

Each output URL is made of a subpath (optional) and a slug. The domain section of each URL will be the name of your Testing Domain, or Custom Domain if you have one configured.

Once your SSG has built your Site, CloudCannon will generate a webpage preview for each Collection item and automatically match webpage previews with each file by determining the likely output URL for each file. These webpage previews are the basis of visual editing.

Try opening some of your output files in the Visual Editor. If all your files open correctly, you can mark this task as complete and move on to the next step of this guide.

However, if a file will not open in the Visual Editor or opens to an incorrect webpage preview, it is most likely because CloudCannon has not determined the correct output URL for matching webpage previews to your Collection. You can fix this issue by updating the output URL CloudCannon uses to match a webpage preview to a file.

Update the output URL for a webpage preview#

To help CloudCannon match webpage previews to your output files, you can specify the output URL for each Collection using a template string. A template string is made of plain text and placeholder values, allowing you to use structured data from your files in the Collection.

Navigate to one of the Collections that does not correctly open in the Visual Editor and click the Configuration Mode switch on the right of the Site Header to turn it on. Purple Edit configuration buttons will appear in several places across the CloudCannon UI, including the Edit Advanced in the top right of the Collection Browser.

Click on the Edit Advanced button to open the data panel.

Find the URL text field in the Edit Advanced data panel. Here, you can specify which output URL CloudCannon should use to match webpage previews to the Collection using a template string.

Template strings allow you to use plain text, fixed or data placeholders, and filters to modify the value of data placeholders to create the correct URL format.

Fixed placeholders#

The following fixed placeholders are available for your output URL template string:

• [filename] — Populated by the original filename including the file extension.
• [slug] — Populated by the original filename excluding the file extension. If the filename is "index", this will result in an empty string.
• [relative_path] — Populated by the original file name including the file extension, relative to the Collection path.
• [relative_base_path] — Populated by the original file name excluding the file extension, relative to the Collection path.
• [full_slug] — An alias for the template path [relative_base_path]/[slug].
• [path] — Populated by the original file name including the file extension, relative to your Site source.
• [base_path] — Populated by the original file name excluding the file extension, relative to your Site source.
• [collection] — Populated by the key for the Collection to which the file belongs.
• [ext] — Populated by the last file extension in the original file path.

Let's go through an example.

The url template string /[relative_bath_path]/[slug]/ for our "Pages" Collection will resolve to the following output URLs:

• The file /pages/index.md becomes the output URL / (e.g., a Home landing page).
• The file /pages/about.md becomes the output URL /about.
• The file /pages/contact/index.md becomes the output URL /contact/.
• The file /pages/contact/book-an-appointment.md becomes the output URL /contact/book-an-appointment

Data placeholders#

You can reference any front matter field from your file in your output URL template string by using the key name in curly brackets (e.g., {key}).

You can also apply filters to your data placeholders by using the | character after your front matter key name, followed by the name of the filter.

Let's go through an example.

The url template string /news/{date|year}/{date|month}-{date|day}_{title|slugify}/ for our "News" Collection will resolve to the following output URLs:

• The file /news/our-next-feature.md with the front matter fields title: Our next feature! and date:05/11/2026 becomes the output URL /2026/05-11_our-next-feature.

For a complete list of filters available for data placeholders in your output URL template string, please read our documentation on template strings.

Once you have updated the template string in the URL text field, save the changes to your Configuration File. CloudCannon will automatically update which webpage previews it uses for that Collection.

When you are happy that all your output files open in the Visual Editor successfully, you can mark the Confirm your output files task as complete.

In the next step of this guide, we'll learn about Editable Regions, including their types and best practices for implementing them.