What is a Snippet?

A Snippet is a predefined component that complements your Markdown content. Snippets are great for building an interactive page editing experience without touching the underlying code.

The name “Snippet” comes from “a snippet of source code” in your rich text content. However, Snippets in CloudCannon are not limited to just code. Snippets can accomplish many jobs. One might be a wrapper to contain shortcodes or templating language, while another might be a markup heading.

Snippets excel at providing a way to:

• Represent and create any HTML or Markdown structures in your rich text editor that you cannot add using the WYSIWYG toolbar.
• Edit the value of any HTML parameters in a component using a GUI (rather than directly interfacing with the code).

Although Snippets can accomplish a variety of tasks, all Snippets consist of three parts:

• Code in the Source Editor
• A preview block in the rich text editor
• A Data panel for editing the values of your Snippet

You can configure as many snippets as you need, creating a library of components for you and your team. A video snippet might utilize a Hugo shortcode to embed a YouTube video and allow you to add a video ID, title, class, and autoplay status. A callout snippet might highlight a section of text as a warning or as useful information depending on a select input in the Data Panel.

Snippets are most useful in the Content Editor and in rich text inputs, although they can appear in the Visual and Data Editors.

Once you have configured your Snippets, your team members can easily add them to any Markdown content by clicking the Insert snippet button in the WYSIWYG toolbar and selecting a Snippet from the searchable pop-up modal.

Snippets appear as inline or paragraph-level blocks in your rich text editor. Inline snippets are useful when you do not want to disrupt the surrounding text. Block snippets create clear sections in your Markdown files. By default, snippets will adapt to where they are inserted in the rich text editor: they will appear inline if inserted within a line of text, or as a block if inserted on their own line. You can configure this behavior to control whether a snippet always appears as inline or block.

By clicking on the Snippet you can open the Snippet Data panel, which allows you to change the parameters of the Snippet. The Data panel provides an easy-to-use interface so non-technical content creators never need to interact with your code.

Snippet types#

In CloudCannon, you can choose between Snippet templates and custom Snippets.

• Snippet templates — A predefined set of Snippets.
• Custom Snippet — A Snippet you create by configuring CloudCannon's underlying snippet parser.

Most sites can use Snippet templates. Snippet templates require little to no configuration. Some SSGs provide libraries of Snippets (also called shortcodes). Other Snippet templates, like MDX components, can be used for a variety of SSGs.

CloudCannon supports the following Snippet templates:

• Docusaurus Components
• Eleventy Shortcodes
• Hugo Shortcodes
• MDX Components
• Python Markdown

Custom Snippets are useful if you want to create something more complicated than templates allow or if no Snippet library is available for your SSG. Configuring custom Snippets is more complicated than using Snippet templates and is not necessary for most sites. However, it does provide more flexibility.

To create a custom Snippet, get in touch with our support team.

Enabling the Snippet button in the WYSIWYG toolbar#

By default, CloudCannon will show the Insert snippet button in the WYSIWYG toolbar if you have at least one Snippet. The WYSIWYG toolbar appears in the Content Editor and in rich text inputs.

If you have already customized which options are available in your WYSIWYG toolbar using the _editables key in your CloudCannon configuration file, please ensure that snippet: true is included.

_editables:
  content:
    snippet: true

{
  "_editables": {
    "content": {
      "snippet": true
    }
  }
}

For more information, read our documentation on configuring your rich text editors.