Shared State — Mochi

Shared State

Two separately-hydrated islands sharing the same reactive $state. Click either button — the count stays in sync across both.

<script>
  import CounterButton from './CounterButton.svelte';
</script>

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

Styles

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

More demos

Server Props Pass data from a route resolver into a Svelte page as props. Hello World The simplest possible Mochi page — pure server-rendered Svelte. Cache Events Custom subscriber pipes MochiCache lifecycle events into an in-memory ring buffer.