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';
  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>

Form Actions

With {@attach enhance(...)}

Plain HTML

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