Visual Data Previews with Bookshop

Bookshop is a component library system for static site generators. You write each component once, as a template plus a configuration file describing its fields, and Bookshop makes it available to your templates and to CloudCannon.

When a Site using Bookshop is open in the Visual Editor, Bookshop re-renders your components in the browser as their data changes, so the component on the page updates as its values are edited.

What Bookshop sets up for you#

Bookshop adds data-cms-bind attributes to the elements it renders, so you do not write Visual Data Bindings by hand. Visual Data Bindings are deprecated, and the bindings Bookshop generates are the same mechanism: CloudCannon maintains them and fixes critical bugs, but they receive no new features or further development. CloudCannon draws its editing overlays over those elements the same way it does for bindings you add yourself. For what those overlays do, please read our documentation on what Visual Data Bindings are.

Bookshop also handles the re-rendering itself, so you do not write the event-listening code described in our documentation on what Visual Data Previews are.

Setting up Bookshop#

Bookshop's setup is documented in its own repository, with a complete guide for each static site generator it supports:

• Bookshop with Jekyll
• Bookshop with Eleventy
• Bookshop with Hugo
• Bookshop with SvelteKit

Each guide covers installing Bookshop, writing components, and connecting them to CloudCannon.

Using the Visual Editor API alongside Bookshop#

Bookshop re-renders your components whether or not CloudCannon is present. It decides separately whether to add Visual Data Bindings to what it renders, by checking for refreshInterface on window.CloudCannon.

If your own integration code replaces that global, Bookshop keeps rendering but stops adding the bindings, so the editing overlays disappear from your components. The v1 API Object has no refreshInterface, so assigning it to window.CloudCannon is enough to turn the bindings off.

When you call useVersion() to get a v1 API Object, pass true as the second argument. CloudCannon then returns the object without assigning it to window.CloudCannon, leaving Bookshop's check intact.

const api = window.CloudCannonAPI.useVersion('v1', true);

For more information, please read our documentation on initializing the Visual Editor API.

Getting help#

If Bookshop's live rendering does not behave as described, contact support with your Site name, the static site generator and Bookshop version your project uses, and what you expected to happen. You can also raise an issue on the GitHub repository.