Shared State

You can share reactive $state between separately-hydrated islands. Click either button — the count stays in sync across both.

<script>
  import CounterButton from './CounterButton.svelte';
  import { files } from './files.ts';

  const sources = await loadSources(files);
</script>

<div class="row">
  <CounterButton mochi:hydrate />
  <CounterButton mochi:hydrate />
</div>

Styles

<style>
  .row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
</style>

More demos

Data Loading Server-side fetch from PokéAPI cached via MochiCache and rendered at request time. Isomorphic URL One import for the current URL — reads from the request on the server, window.location on the client. Hacker News Clone A full Hacker News reader built on Mochi — SSR pages, hydrated islands, real API.