🍡 mochi
← All demos

Lazy Islands

Six identical islands that hydrate (and fetch their CSS) only when they scroll into view.

Lazy Island #1

#1 Waiting to hydrate...

Lazy Island #2

#2 Waiting to hydrate...

Lazy Island #3

#3 Waiting to hydrate...

Lazy Island #4

#4 Waiting to hydrate...

Lazy Island #5

#5 Waiting to hydrate...

Lazy Island #6

#6 Waiting to hydrate...
<script>
  import LazyDemo from './LazyDemo.svelte';
</script>

<div class="stack">
  {#each Array(6) as _, i (i)}
    <div class="item">
      <h3>Lazy Island #{i + 1}</h3>
      <LazyDemo mochi:hydrate:visible index={i + 1} />
    </div>
  {/each}
</div>
Styles 
<style>
  .stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .item h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
  }
</style>

More demos

Hello World The simplest possible Mochi page — pure server-rendered Svelte. Form Errors A thrown server error shown inline via {@attach enhance(...)}, or as the Mochi error page on plain submit. File Upload multipart/form-data submission with server-side validation, shown both enhanced and plain.