🍡 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

View source on GitHub 
<script lang="ts">
  import EnhancedLoginForm from './EnhancedLoginForm.svelte';

  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

Captcha Styling How captcha theming works — the same captcha four ways, every colour a CSS custom property with a built-in fallback. Reloading associated form data How reloading associated data works — after a successful submit, refetch the related list inside enhance(), or rely on the post-POST re-render. Scheduled jobs with cron How scheduled jobs work — a Mochi.cron() job writes to an in-memory log every minute and the browser streams each new entry over a WebSocket.