1. Visual editing

Troubleshoot visual editing

Help us improve this documentation

The framework-agnostic documentation is under development. If you have suggestions for improving the content, let us know by sharing your Feedback at the bottom of this page.

This topic describes the most common errors and solutions when enabling visual editing in the SitecoreAI Page builder for your front-end app.

Couldn't connect to a host

The Page builder canvas displays the Couldn't connect to a host error if the Page builder API requests to your app fail.

To fix the issue:

  1. Verify that the value for SITECORE_EDITING_SECRET in your app matches the value in SitecoreAI Deploy exactly.
  2. Verify that the Local host address in the Page builder matches your localhost address exactly.
  3. Check your terminal for errors related to your app and fix them.

401 Unauthorized

If the /api/editing/config or the /api/editing/render endpoint returns 401 Unauthorized, verify that the value for SITECORE_EDITING_SECRET in your app matches the value in SitecoreAI Deploy exactly.

The canvas loads but components are not selectable

If the Page builder canvas correctly loads, but components cannot be selected, rendering-chrome <code> blocks might be missing or malformed.

To fix the issue:

  1. Inspect the rendered HTML source and verify that <code chrometype="rendering"> blocks appear around each component and <code chrometype="placeholder"> blocks appear around each placeholder.
  2. Verify that <script id="jss-hrz-editing"> is present in <body>.
  3. Verify that the editing <script> tags from sitecore.context are present in <head>. The tags are:
    • clientScripts
    • hrz-canvas-state
    • hrz-canvas-verification-token

Field values cannot be edited inline

If components are selectable in the Page builder canvas, but fields cannot be edited inline, content authors can select text but typing has no effect. In this scenario, field-chrome <code> blocks might be missing.

The layout data field objects must include a metadata property, which is only present when sc_editMode: "true" is set. Also, each rendered field value must be wrapped with <code chrometype="field"> open and close blocks.

To fix the issue:

  • Verify that your editing component renderers are being called and that metaField() is wrapping each field's rendered output.

The canvas doesn't load, or is blocked by CSP

If the Page builder canvas fails to load your app at all, and the browser console shows a Content-Security-Policy or CORS error, your app is likely blocking the iframe request or the API calls the Page builder makes to it.

To fix the issue:

  1. Verify that your /api/editing/config and /api/editing/render endpoints return CORS headers that allow the Page builder's origin (https://pages.sitecorecloud.io and https://app.sitecorecloud.io). See the CORS and CSP guidance for the allowed origins your app should validate against.
  2. Verify that your app's Content-Security-Policy frame-ancestors directive allows the Page builder's origin to load your app in an iframe. If frame-ancestors is missing or set to 'none'/'self', the browser blocks the canvas from loading your app.
  3. Check the browser console and the Network tab for the specific blocked request and confirm the response headers match what's expected.
If you have suggestions for improving this article, let us know!