Choose your preferred SSG:
Choose your preferred SSG:

Linking to CloudCannon views

Editor Links allow you to link to other sections of the CloudCannon interface from within the Visual Editor. Use them to create edit buttons for your collection items and blog posts to quickly navigate the app. You can also add front matter Editor Links to open the front matter Editor at specified fields.

Editor Links are using the CloudCannon link protocol.

Linking to front matter

Create a link to open a data editor at a specific input:

index.html
<!-- Inputs -->
<a href="cloudcannon:#title">
  Edit the title
</a>

<!-- Arrays -->
<a href="cloudcannon:#array[1]">
  Edit the first array item
</a>

<a href="cloudcannon:#array[+]">
  Create a new item in an array
</a>

<!-- Inputs within an Object -->
<a href="cloudcannon:#object.title">
  Edit a variable within an object
</a>

<a href="cloudcannon:#object.array">
  Edit an array within an object
</a>

<!-- Inputs within an Array inside an Object -->
<a href="cloudcannon:#object.array[0].title">
  Edit the title of the first array item within an object
</a>
Note

You can edit hidden inputs by using popout-style editor links.

Open the sidebar instead

Front matter can be highlighted within the data editor in the sidebar, or displayed standalone in a panel (default). To change open an editor link in the sidebar:

  1. Add the data-cms-bind-style attribute
  2. Set the attribute’s value to sidebar (optional)
index.html
<a href="cloudcannon:#title" data-cms-bind-style="sidebar">
  Edit the title
</a>
Screenshot of a modal style editor link in the CloudCannon visual editor

Linking to other views

To have edit links for posts in a list, add an Editor Link in the blog post loop:

index.html
<a href="cloudcannon:collections/staff">
  Edit all staff
</a>

<a href="cloudcannon:collections/staff/jane-doe.md">
  Edit Jane Doe
</a>

<a href="cloudcannon:collections/posts/welcome-post.md">
  Edit Welcome Post
</a>

<a href="cloudcannon:status">
  Link to Site Status and Recent Activity
</a>

Front matter Editor Links are prefixed with cloudcannon:# and use a common syntax to reference them, for example:

index.html
<!-- Inputs -->
<a href="cloudcannon:#title">
  Edit the title
</a>

<!-- Arrays -->
<a href="cloudcannon:#array[1]">
  Edit the first array item
</a>

<a href="cloudcannon:#array[+]">
  Create a new item in an array
</a>

<!-- Inputs within an Object -->
<a href="cloudcannon:#object.title">
  Edit a variable within an object
</a>

<a href="cloudcannon:#object.array">
  Edit an array within an object
</a>

<!-- Inputs within an Array inside an Object -->
<a href="cloudcannon:#object.array[0].title">
  Edit the title of the first array item within an object
</a>

Posts Example

To have edit links for posts in a list, add an Editor Link in the blog post loop:

Jekyll content

posts.html
<ul class="blog-posts">
  {% for post in site.posts %}
    <li class="blog-post">
      <h3>{{ post.title }}</h3>
      <!-- Editor Link -->
      <a href="cloudcannon:collections/{{ post.path }}" class="editor-link">Edit post</a>
      <p>{{ post.excerpt }}</p>
      <a href="{{ post.url }}">Read more</a>
    </li>
  {% endfor %}
</ul>

Hugo content

Eleventy content

Other content

Screenshot of visual editor with editor links to edit blog posts

Collection example

To have an edit link on a collection item page, add the following to the page:

Jekyll content

item.html
<a href="cloudcannon:collections/{{ page.relative_path }}" class="editor-link">Edit</a>

If you are using a custom collections_dir include site.collections_dir in your editor link:

item.html
<a href="cloudcannon:collections/{{ site.collections_dir }}/{{ page.relative_path }}" class="editor-link">Edit</a>
Note

When generating Editor Links in Jekyll, collection items should use relative_path, while posts and pages should use path.

Hugo content

Eleventy content

Other content

Screenshot of a blog post in CloudCannon with an editor link
Was this article helpful? or Suggest an improvement >

Related articles