Forms

Server-side action handlers behind a normal <form>. Shown plain (full HTML POST + page re-render) and with the enhance attachment (fetch + JSON, no reload). Sign in with hunter2 / any username.

The same login form, rendered twice. With {@attach enhance(...)} the submission goes over fetch and the UI updates in place. Without it, the browser submits natively and Mochi re-renders the page.

With `{@attach enhance(...)}`

Plain HTML

<script lang="ts">
  import EnhancedLoginForm from './EnhancedLoginForm.svelte';

  let { currentUser } = $props<{ currentUser: string | null }>();
</script>

<p>
  The same login form, rendered twice. With <code>{'{@attach enhance(...)}'}</code> the submission goes over <code>fetch</code> and the UI updates in place. Without it, the browser
  submits natively and Mochi re-renders the page.
</p>
<h3>With <code>{'{@attach enhance(...)}'}</code></h3>
<EnhancedLoginForm initialUser={currentUser} mochi:hydrate />
<h3>Plain HTML</h3>
<EnhancedLoginForm initialUser={currentUser} />

Styles

<style>
  h3 {
    margin: 1.5rem 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
  }

  p {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  code {
    background: var(--code-bg);
    color: var(--code-accent);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.85rem;
  }
</style>

Forms

With {@attach enhance(...)}

Plain HTML

With `{@attach enhance(...)}`