Best practices for HTML in rich text

Last modified: March 14th, 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.

To get the most out of your editing experience, we recommend that you only include markup in your rich text files that can be rendered and edited in CloudCannon.

CloudCannon uses the following definitions:

  • Rich text content — any HTML or Markdown content you might want to edit in the Content Editor or a rich text input.
  • Custom markup — any HTML or Markdown structure that cannot be recreated in the rich text editor (e.g., <div> tags or style attributes). This is normally any structure that cannot be produced by the WYSIWYG toolbar.

To protect your content and your site, CloudCannon does not allow you to edit custom markup using the Content Editor or a rich text input. If you want to include custom markup in your rich text files, there are some limitations you should be aware of.

Unsupported HTML elements in rich text#

You cannot edit custom markup in rich text files using the Content Editor or a rich text input. This is because:

  • You can unintentionally delete custom markup from your files. CloudCannon cannot render custom markup in the rich text editor, therefore it would be easy to accidentally backspace or delete your HTML structures.
  • Some custom markup structures pose a risk by enabling cross-site scripting attacks (e.g., <script> tags) and other unwanted interactions between your code and the editing interface (e.g., <style> tags).

Although you cannot edit your custom markup in the Content Editor or rich text inputs, CloudCannon will preserve it. Your custom markup will appear as an uneditable Snippet.

Unsupported HTML in the rich text editor will appear as an uneditable Snippet.

You can still edit the surrounding content in your files using a rich text editor. You can also edit your custom markup in the Source Editor.

Best practice#

To ensure your files remain editable in the rich text editor, we recommend the following solutions to avoid some common pitfalls:

  • Remove custom markup from inside elements with class='editable'. Any other markup inside your editable region may cause the region to become an uneditable Snippet.
  • Create a Snippet. Depending on your SSG, there are libraries of Snippets available, or you can create custom Snippets.
  • Use postprocessing to add the desired HTML during the build (e.g., using Hugo's Markdown render hooks).
Open in a new tab