Skip to main content


The Instant CLI comes standard with a sandbox for developing blocks. The sandbox is enabled by default when initializing a new project.

The sandbox makes development faster and easier by isolating blocks. This allows you to work on one block at a time. You can develop entire blocks with an easy preview of the Instant Commerce admin environment, without having to leave your local environment.

Sandbox Toolbar


On top lives the toolbar, which enables you to adjust how and what block is shown.

Sandbox Toolbar

🛍️ With the dropdown on the left, you can switch between stores, if you are logged in.
⭐ With the star in the middle, you can bookmark specific to be highlighted.
🚥 With the buttons on the right you can reload a block, view it in a seperate browser and open / close the sidepanel including customizer and content schemas.

Left Panel

Sandbox Leftbar

🔍 On the top you can search or use control + k on windows or cmd + k on mac.
🤩 Then, if you marked any, your bookmarks are listed following all the blocks.

The Viewport

Viewport Preview

The viewport is a preview area that allows you to see how your block will look in different situations. The left panel can be collapsed or expanded to adjust the size of the preview area. You can also use the buttons next to the panel to switch between different device sizes. In the middle, you can set the width and height of the viewport manually. On the right, you can toggle the background (light and dark) and scaling of the preview.

Right Panel

Sandbox Rightbar

The right panel is used to preview both the customizer and content schemas.
Fields will appear here once you've set them up in your block's code.

Preview settings

Note that all customizer and content settings in the sanbox environment are only used for previewing purposes. Once published, the block will use the customizer settings selected in the admin and the content values added in the headles CMS.