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:
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 it is added to a page in CloudCannon. When previewing a component locally, however, we usually
want to see the component as it would appear in a realistic setting.
The preview key of your component specification allows you to do this by providing the data that
Bookshop should use in the playground, and will be merged into the component blueprint.
This is a deep merge, so given the following specification:
blueprint:
hero_text: "Hello World"
cta:
button_text: ""
button_url: "#"
preview:
cta:
button_text: "Click me"Your component preview data will be:
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.
