Craft By Zen

📖 1 min read

🔖 essay   programming   learning

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

Written by Jeremy Wong and published on .