🍡 mochi
← All demos
llms.txt

Form Actions

Forms can render as plain HTML forms or progressively enhanced forms powered by JavaScript. Plain HTML does a full POST and page re-render; {@attach enhance(...)} submits via fetch and updates the UI in place. Sign in with any username / hunter2 as a password.

With {@attach enhance(...)}

Plain HTML

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

  const sources = await loadSources(files);

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

<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);
  }

  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>

More demos

Form Errors A thrown action error shown inline via {@attach enhance(...)}, or as the Mochi error page on plain submit. Hello World The simplest possible Mochi page — pure server-rendered Svelte. Cancelling form submissions cancel() prevents the fetch from firing; controller.abort() stops one mid-flight.