Send Email
Mochi.email() sends transactional mail. In development it uses the dev transport, which captures every message to an in-memory outbox at /_mochi/email instead of delivering it. Bodies here render from a Svelte template via Mochi.email({ component, props }). For safety this demo only lets you send one of a few pre-written emails — the recipient, subject, and body are all fixed server-side.
Pick one of the pre-written emails and send it. Then open the dev email outbox to read the captured message — the styled HTML body, plain-text part, recipients, and headers.
With {@attach enhance(...)}
Plain HTML
Sending an attachment
Pass attachments to Mochi.email({ ... }) to send a file alongside the body. The route action reads a small pre-resized image off disk and
attaches it; the outbox lists it as a 📎 chip on the captured message.
<script lang="ts">
import EmailForm from './EmailForm.svelte';
import AttachmentForm from './AttachmentForm.svelte';
import { files } from './files.ts';
const sources = await loadSources(files);
</script>
<p>
Pick one of the pre-written emails and send it. Then open the
<a href="/_mochi/email" target="_blank" rel="noopener">dev email outbox</a> to read the captured message — the styled HTML body, plain-text part, recipients, and headers.
</p>
<h3>With <code>{'{@attach enhance(...)}'}</code></h3>
<EmailForm mochi:hydrate />
<h3>Plain HTML</h3>
<EmailForm />
<h3>Sending an attachment</h3>
<p>
Pass <code>attachments</code> to <code>Mochi.email({ ... })</code> to send a file alongside the body. The route action reads a small pre-resized image off disk and
attaches it; the outbox lists it as a <code>📎</code> chip on the captured message.
</p>
<AttachmentForm mochi:hydrate />
Styles
<style>
h3 {
margin: 1.5rem 0 0.25rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-muted);
}
p {
margin: 0 0 0.5rem;
font-size: 0.9rem;
color: var(--text-muted);
}
p a {
color: var(--accent);
font-weight: 600;
}
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