Svelte is great at receiving new data and rerendering components. To make this integration work we hook into the Svelte lifecycle. onMount and onDestroy can set up event listeners that update the pages properties.
The CloudCannon Svelte connector is available on npm.
To install, run:
Next, add the following code to any component that you wish to add live editing to:
In the above code,
pageDetails is an object that contains data for the markup portion of the component.
After loading the content file in the Visual Editor, changing the data in the sidebar will push the new props to
pageDetails. This will display the new values in the Visual Editor immediately.