Developer guides

Reload the page canvas

Version: 0.4

Before you begin

Complete the SDK quick start.

You can programmatically reload the page canvas so the SitecoreAI Page builder user can immediately see the most recent changes, with no manual reloading required. This is useful when the page contents change. For example, after your Marketplace app inserts a new text field into the canvas.

To reload the page canvas:

In the SDK initialization code where you run the useMarketplaceClient hook, after the Effect Hook, create a new mutation function:

// Make a mutation to reload the page canvas
const reloadCanvas = () => {
  client?.mutate("pages.reloadCanvas");
};

In the return statement, create a button that runs the mutation function, then save your changes:
<button onClick={reloadCanvas}>Reload canvas</button>
In the SitecoreAI Page builder, refresh the page, then open your Marketplace app.
In the Marketplace app, click Reload canvas.

If you have suggestions for improving this article, let us know!