Snippets using Docusaurus Components

Last modified: March 22nd, 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.

CloudCannon supports embedding rich Snippets in Markdown content when using the CloudCannon Content Editor. Once configured, Snippets in your content will be presented as blocks in rich text views, with the ability to add them as Snippets via the toolbar:

The CloudCannon Content Editor toolbar with a cursor hovering over the "Snippet" button

To start configuring Components in your MDX content, a Snippet configuration must be imported using the _snippets_imports key in your CloudCannon global configuration file.

  mdx: true
  docusaurus_mdx: true
  "_snippets_imports": {
    "mdx": true,
    "docusaurus_mdx": true
module.exports = {
  _snippets_imports: {
    mdx: true,
    docusaurus_mdx: true

Docusaurus uses both regular MDX components along with custom extensions, so we import both the mdx Snippets and the docusaurus_mdx Snippets. You can find detailed documentation on the base mdx snippets on the Editing with MDX Components page.

Enabling snippets in the toolbar#

By default, CloudCannon will show the snippet toolbar action in the content editor if snippets are available.

If you have already customized which options are available via _editables in your CloudCannon config, you will need to include snippet: true for Snippets to be available. See the Editables options documentation for more details.

Supported extensions#


With the Admonition snippet you can use Docusaurus admonition syntax to highlight rich content in the Content Editor.

:::note Your Title

Some **content** with _Markdown_ `syntax`.


Code Blocks#

The Code Block snippet allows you to create Docusaurus code blocks with syntax highlighting, titles, and line numbers.

```jsx title="/src/components/HelloCodeTitle.js" showLineNumbers
function HelloCodeTitle(props) {
  return <h1>Hello, {}</h1>;

Content Tabs#

The Content Tabs snippet provides support for adding tab seperated content using the Docusaurus Tabs component. If you're using the Content Tab snippet we recommend registering it to the global scope by wrapping the MDX Component file. You can find documentation on Docusaurus component scope here.

  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  <TabItem value="banana" label="Banana">
    This is a banana 🍌


The Truncate snippet allows you to mark which content should be included in the blog post summary when using the Docusaurus blog feature.


Related Articles

Open in a new tab