Visual editing
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.
After rendering Sitecore content in your front-end app, the next key development task is enabling What You See Is What You Get (WYSIWYG) editing for content authors working in the SitecoreAI Page builder.
Visual editing lets content authors see and interact with the real, rendered page rather than working in a separate, different view. For example, they can click a heading to edit it in place, drag components to reorder them, and configure component settings while seeing the result immediately. In short, visual editing closes the gap between authoring content and seeing how it looks on the published site.
Although the exact implementation details vary by framework, enabling visual editing follows the same main steps:
- Load your front-end app inside an iframe in the Page builder canvas.
- Annotate the rendered HTML with metadata. The Page builder uses this metadata to identify each placeholder, component, and field.
- Deploy your app so all content authors can connect to it from the Page builder.
Get started
To get started with visual editing:
- Learn about how editing works, including metadata editing mode, field chromes, editing scripts, and the endpoints your app must expose to the Page builder.
- Review the HTML chrome patterns your app must produce for each field type to enable inline editing in the Page builder.
- Complete the Enable visual editing walkthrough, where you create the endpoints, add metadata wrappers to the HTML your app renders, and load your app into the Page builder iframe.
Deploying your app
After enabling visual editing, you can deploy your app so all content authors can connect to it from the Page builder. How you deploy your app depends on your framework:
- For Node-based projects - SitecoreAI Deploy can natively build and host your app for you. You configure this in your repository's
xmcloud.build.jsonfile by adding an entry torenderingHosts. SitecoreAI uses the hosted instance as the editing host. - For non-Node projects - SitecoreAI Deploy cannot build or host non-Node applications. You deploy your app yourself to your own hosting provider, and then register it in Sitecore as an external editing host. In
xmcloud.build.json, therenderingHostsobject is left empty"renderingHosts": {}. For more information, see the different types of editing hosts in SitecoreAI.