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.
Requirements for data previews#
- Components must have an output URL. SvelteKit routes are a good example.
- Components must get their data from a data/content file somewhere in your project. This is critical, as the Visual Editor cannot open the components themselves.
- These data/content files must be configured as a CloudCannon Collection. See the CloudCannon Reader documentation for more information.
- Components will need to use the Svelte
Installation and Usage#
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.
This should make no difference to your development or production environment.
For an example integration, check out our Urban SvelteKit template. If you have any issues, please contact support, or raise an issue on the GitHub repository.