llms.txt

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

MdSvex A .md file compiled through mdsvex and rendered as a Svelte component, with an embedded <script> block. Hello World The simplest possible Mochi page — pure server-rendered Svelte. Tailwind Todo App Classic todo app styled with Tailwind CSS.