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.
onDestroy
and onMount
functions.The CloudCannon Svelte connector is available on npm.
To install, run:
npm i @cloudcannon/svelte-connector
Next, add the following code to any component that you wish to add live editing to:
<script>
import { onDestroy, onMount } from 'svelte';
import { onCloudCannonChanges, stopCloudCannonChanges } from '$lib/cloudcannon.js';
// pageDetails is passed from parent, or via SvelteKit load function
export let pageDetails;
onMount(async () => {
onCloudCannonChanges((newProps) => pageDetails = newProps);
});
onDestroy(async () => {
stopCloudCannonChanges();
});
</script>
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.