Mochi 0.8.0 — Mochi

Mochi is currently in alpha — be the first to join our Discord to shape the future of the framework.

🍡 mochi<br>🍡 mochi

Home<br>Blog<br>Support<br>Docs<br>Welcome<br>Your first Mochi app<br>Set up<br>Step 1 — Register the route<br>Step 2 — The page component<br>Step 3 — A hydrated island<br>Show 3 more<br>Coming from SvelteKit<br>Feature comparison<br>Routing<br>Advanced routing<br>Layouts<br>Show 31 more<br>Defining routes<br>Route parameters<br>Mochi.page<br>Mochi.api<br>Mochi.ws<br>Show 4 more<br>Selective hydration with mochi:hydrate<br>What is an island?<br>Supported import forms<br>isHydratable()<br>Unique ids with $props.id()<br>Show 3 more<br>Client-only components with mochi:clientOnly<br>Fallback content<br>Lazy client-only with mochi:clientOnly:visible<br>Server-side APIs are unavailable<br>Limitations<br>Lazy hydration with mochi:hydrate:visible<br>Combining with mochi:defer<br>Server islands with mochi:defer<br>Fetch flow<br>Combining with hydration<br>Nesting islands inside a server island<br>Lazy server islands with mochi:defer:visible<br>Show 2 more<br>Passing props to islands<br>Typing props<br>Wire format<br>Supported types<br>Not supported<br>Show 1 more<br>Hydratable values<br>Serialization<br>Limitations in Mochi today<br>Server-only imports<br>Types are free<br>What gets stubbed<br>Not supported<br>Progressively enhancing forms with enhance<br>Wire format<br>Default fallback<br>Submit callback<br>onPending<br>Show 4 more<br>Why Bun?<br>What does Mochi actually use from Bun?<br>Batteries included<br>On the horizon<br>HTTP streaming<br>Streaming primitives<br>Keeping pages fast<br>Environment constants<br>isServer<br>isBrowser<br>isDev<br>Branching SSR-only behavior with isHydratable()<br>Request context<br>url<br>params<br>cookies<br>locals<br>Show 1 more<br>API routes<br>MochiApiEvent<br>Reading the request body<br>json (response helper)<br>error (typed throw)<br>Show 3 more<br>WebSocket routes<br>upgrade<br>open<br>message<br>close<br>Show 4 more<br>Server-Sent Events<br>stream.send(data, options?)<br>stream.close()<br>stream.onClose(callback)<br>Events<br>Queues<br>Mochi.queue()<br>Mochi.getQueue()<br>A shared queue module<br>Persistence<br>Show 7 more<br>Email<br>The message<br>The body<br>Transports<br>The dev outbox<br>Show 5 more<br>Middleware (hooks)<br>Handle<br>event.locals<br>event.kind<br>sequence<br>Show 3 more<br>Trailing slash<br>Policy values<br>Redirect status codes<br>Paths that are never redirected<br>Query strings<br>Show 1 more<br>Rate limiting<br>Global default<br>Options<br>Stores<br>Keys and proxies<br>Show 2 more<br>Transforming HTML with transformPage<br>Error handling<br>errorPage<br>handleError<br>API error envelope<br>Fallback behaviour<br>Error boundaries<br>What’s wrapped<br>What gets caught<br>Visual behaviour<br>Server islands (mochi:defer)<br>Show 3 more<br>Utility helpers<br>Response helpers<br>Form-action helpers<br>Sealed tokens<br>Cache<br>Behaviour<br>API<br>Options<br>File-based storage<br>Show 2 more<br>Logging<br>Log level<br>Method semantics<br>Setting the level at runtime<br>Relationship to mochiEvents<br>Events<br>mochiEvents.on<br>Subscribing<br>mochiEvents.setHandler<br>hasSubscribers<br>Show 4 more<br>Images<br>Declare sizes<br>Component<br>Local image imports<br>getImageUrl — deferred URLs<br>Show 8 more<br>View Transitions<br>Props<br>Custom transitions<br>Animating only part of the page<br>Keeping elements still<br>RawScript<br>Captcha<br>Hydration<br>How it works<br>Options<br>The timing floor<br>Show 7 more<br>Custom HTML shell<br>Placeholders<br>When to customize<br>CSS imports<br>Component-scoped &lt;style&gt; blocks<br>Variable fonts<br>Dev mode<br>MdSvex<br>Syntax highlighting<br>Islands in markdown<br>Serve options<br>Asset caching<br>Options reference<br>Route warmup<br>CSRF<br>Show 1 more<br>Extensions (hooks & filters)<br>Hooks vs filters<br>Hooks<br>Filters<br>Svelte config<br>Framework defaults<br>svelteConfigPath<br>Framework-owned fields<br>Where it applies<br>Show 1 more<br>Development mode<br>MODE=development convention<br>Live reload<br>File watcher<br>Component hot-reload<br>Show 5 more<br>Discord<br>Scan to join on your mobile<br>Debug bar<br>Buttons<br>Configuring panels<br>Islands panel<br>Server islands<br>Show 5 more<br>Testing<br>Unit tests<br>Full-app tests<br>Bun workspaces: use the hoisted linker<br>Tailwind<br>Setup<br>setupTailwind options<br>Dev rebuilds<br>Production builds<br>Show 1 more<br>Svelte Shaker optimization<br>Excluding components<br>Disabling temporarily<br>Size report<br>Scope<br>Architecture<br>CLI reference<br>Deployment options<br>Building a Dockerfile<br>Minimal Dockerfile<br>.dockerignore<br>--production and devDeps<br>Docs for LLMs<br>Agent skill (recommended)<br>MCP Server (recommended)<br>llms.txt<br>Demos<br>Hacker News Clone<br>Realtime Admin Panel<br>Tailwind Todo App<br>Mochi vs SvelteKit

Demos<br>Hello World<br>Server Props<br>Hydration Modes<br>Data Loading<br>Hydratable<br>isHydratable()<br>Cookies<br>Isomorphic URL<br>View Transitions<br>Custom Transitions<br>Cache Events<br>Image: Component<br>Image: Invalidation<br>Image: Named sizes<br>Image: Events<br>Request ID<br>Cookie Vary Test<br>Real-time Chat<br>API Endpoints<br>Rate Limiting<br>File Routes<br>Shared State<br>Real-time Streams<br>Background jobs with queues<br>Server Islands<br>Crossing the server-client boundary with props<br>Client-only Islands<br>Lazy Islands<br>Lazy Server Islands<br>Font loading<br>MdSvex<br>Nested Components<br>Nested Islands<br>Nested Island Max Depth<br>Shared Props<br>Unique IDs<br>Form Actions<br>Send Email<br>Using form return data<br>Form Errors<br>Form Redirects<br>File Uploads via form actions<br>Reloading associated form data<br>Captcha<br>Captcha Styling<br>Cancelling form submissions<br>Error Handling<br>Error Boundaries<br>HTML...