Svelte and Astro Demo

In Astro, there’s this concept of islands. You have a few options on making your page interactive. From the Astro docs, these are your options.

---
// Example: hydrating framework components in the browser.
import DemoApp from "../../components/DemoApp.svelte";
---

<!-- This component's JS will begin importing when the page loads -->
<DemoApp client:load />

<!-- This component's JS will not be sent to the client until
the user scrolls down and the component is visible on the page -->
<DemoApp client:visible />

<!-- This component won't render on the server, but will render on the client when the page loads -->
<DemoApp client:only="svelte" />

I’ll go ahead and try each of these and see what happens.

Example using client:load

Example using client:visible

Example using client:only