Configuring live editing

Connecting Bookshop to CloudCannon's live editing

Bookshop can render changes to your components live in CloudCannon, allowing you to build rich visual editing experiences.

Installing Bookshop's development dependencies#

To power the live editing experience, Bookshop requires a few extra packages to be installed. Unlike the previous plugin we installed, these dependencies have no impact on your production site: they only provide Bookshop tooling locally on your machine and within the CloudCannon Visual Editor.

Command line
copied
         
npm i -D --save-exact @bookshop/generate @bookshop/browser @bookshop/eleventy-engine

Bookshop releases all packages on every release, so the version numbers should always stay exactly the same. Using --save-exact here means that npm won't use a newer version than the one specified.

Running the Bookshop generate command#

Bookshop provides a command to run after your static site build. This command automatically discovers your component library and your site files, and connects CloudCannon's live editing APIs to the Bookshop components on your site.

Additionally, when we cover the structured data features of Bookshop, this command will do the work of creating your CloudCannon Structures for you.

To run this command, add the following to a CloudCannon postbuild script at the root of your repository:

.cloudcannon/postbuild
copied
npx @bookshop/generate

With that in place, any Bookshop components that use data from the front matter of a page should render changes live in the Visual Editor.

Additionally, you should notice CloudCannon's Data Bindings have been added around your components, allowing you to click directly on the page and open an editing panel.

As an example, if we have a component that pulls from front matter:

about.html
copied
---
title: About
layout: base.liquid
permalink: /about/
hero_component:
  title: On a mission to change email marketing
  description: We're here to breathe new air into email marketing and help grow your business.
  button:
    text: "Try This Free"
    link: "/signup"
---

{% bookshop "about/hero" bind: hero_component %}

When viewed in the Visual Editor, we will be able to interact with the element directly on the page and open up an editing panel:

An example page matching the aforementioned code block, showing a data panel open in CloudCannon's visual editor after interacting directly with a component.

Open in a new tab