The actual code you write will depend on the framework you choose. You can look at these examples to help you:

Instead of combining editing and rendering into one framework and codebase, these are separated and during editing a two way communication channel is opened across an iframe so that the editing UI is no longer part of the frontend code. Instead a small JS file called hydra.js is included in your frontend during editing that handles the iframe bridge communication to Hydra which is running in the same browser window.

Advanced topics for optimising your Hydra integration: lazy loading the bridge, authentication, and preventing reloads.

Layout and block templates

A Visual Headless CMS using Plone as a server, providing true visual editing with drag-and-drop blocks and editable text — with any frontend stack you choose.