Component Playground

The Bookshop component playground allows you to browse and experiment with your components. When running in development, the component playground also provides hot reloading of component templating and styles.

After getting your Bookshop dependencies installed, run the following command in the root of your repository:

Command line

copied

npx @bookshop/browser

Add the --help flag to see all available options.

By default, this will discover any Bookshop directories in or under the current working directory, and will host a component library on port 30775.

After running this command, a component playground will be viewable on http://localhost:30775

Specifying preview data for your components#

The blueprint of your component specification represents the initial state of your component when you add it to a page in CloudCannon. However, when previewing a component locally, we usually want to see the component as it would appear in a realistic setting.

You can do this by using the preview key of your component specification to provide the data that Bookshop should use in the playground.

The component preview is deep merged with the component blueprint so, given the following specification:

hero.bookshop.yml

copied

blueprint:
  hero_text: "Hello World"
  cta:
    button_text: ""
    button_url: "#"

preview:
  cta:
    button_text: "Click me"

Your component preview data will be:

Playground Preview

copied

hero_text: "Hello World"
cta:
  button_text: "Click me"
  button_url: "#"

As a result, your preview key doesn't need to mirror the entire component structure, and can instead cherry-pick the relevant keys to override for the preview.