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';
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
Real-time Streams How server-sent events and WebSocket streaming work — live SSE and WebSocket clocks, lazily hydrated via mochi:hydrate:visible. Hacker News Clone A full Hacker News reader built on Mochi — SSR pages, hydrated islands, real API. Charts with LayerChart How a third-party Svelte component library works in Mochi — LayerChart server-rendered to plain SVG with zero JavaScript, then the same library as mochi:hydrate and mochi:clientOnly islands.