---
title: 'Mochi 0.8.0'
slug: mochi-0-8-0
description: 'Queues, transactional email, image transforms, captcha and rate limiting — 93 commits since 0.7.0.'
date: '2026-07-21'
author: stanislav
---

<script>
  import { Image } from 'mochi-framework/image';
  import PostImageGrid from '../components/PostImageGrid.svelte';
  import PostCaptchaDemo from '../components/PostCaptchaDemo.svelte';
  import PostRateLimitDemo from '../components/PostRateLimitDemo.svelte';
  import emailOutbox from '../../../docs/images/email-outbox.png';
  import debugBar from '../../../docs/images/debug-bar.png';
</script>

# Mochi 0.8.0

Mochi 0.8.0 is out — bringing 93 commits since [0.7.0](https://github.com/khromov/mochi/blob/main/packages/mochi/CHANGELOG.md) — the biggest release so far. The main features in this release are:

- [Image transformations](#image-transformations)
- [Email sending](#email-sending)
- [Queues](#queues)
- [Form captcha](#form-captcha)
- [Rate limiting](#rate-limiting)
- [Client-only components](#client-only-components)
- [Debug bar improvements](#debug-bar-improvements)
- [Other improvements](#other-improvements)
- [Looking ahead](#looking-ahead)
- [Install or upgrade](#install-or-upgrade)

## Image transformations

Mochi now supports [runtime image transformations](/docs/images/). Images are also automatically cached. Both Vite-style imports _and external servers_ are supported for fetching images. We also get a new `<Image />` component for responsive images.

```ts
await Mochi.serve({
  image: {
    sizes: {
      thumbnail: { width: 200, height: 200, fit: 'inside', format: 'webp', quality: 80 },
    },
  },
  // …
});
```

Then reference the size by name wherever you need it — the source is either a Vite-style import or a remote URL:

```svelte
<script>
  import { Image } from 'mochi-framework/image';
  import photo from './photo.jpg';
</script>

<Image src={photo} size="thumbnail" alt="A resized photo" />
<Image src="https://example.com/photo.jpg" size="thumbnail" alt="A resized remote photo" />
```

Every tile below is the same kind of source photo run through a different named size declared on this site:

<PostImageGrid />

## Email sending

[`Mochi.email()`](/docs/email/) brings first-class support for sending emails via Mochi. After configuring an email transport in `Mochi.serve()`, you can send emails from a page action, an API route or even a queue job. Making templates is a breeze thanks to the built-in support for using Svelte components as email templates, with automatic CSS inlining.

```ts
await Mochi.email({
  to: 'alice@example.com',
  subject: 'Reset your password',
  html: '<p>Click <a href="…">here</a> to reset.</p>',
});
```

In development every message also lands in a development outbox, so you can read what your app just sent without any extra setup:

<figure>
  <a href={emailOutbox.src} target="_blank" rel="noopener">
    <Image src={emailOutbox} size="doc" width={emailOutbox.width} height={emailOutbox.height} alt="The dev email outbox: captured messages on the left, and the selected message's headers, attachment chip, Preview / Text / Source tabs and rendered body on the right" />
  </a>
  <figcaption>The dev outbox.</figcaption>
</figure>

## Queues

Use [`Mochi.queue()`](/docs/queues/) to easily defer work to the background and take it off the request path — for example sending email, encoding media or calling a slow API.

```ts
await Mochi.serve({
  routes,
  queues: {
    emails: Mochi.queue<{ to: string }>({
      concurrency: 10,
      process: async (job) => sendEmail(job.data.to),
    }),
  },
});

await Mochi.getQueue<{ to: string }>('emails').add('send', { to: 'alice@example.com' });
```

## Form captcha

[`<MochiCaptcha />`](/docs/captcha/) is a simple CAPTCHA based on cryptographic proof-of-work — no third-party service or extra costs.

You'll find a real example below:

<PostCaptchaDemo mochi:hydrate />

The [captcha demo](/demos/captcha/) covers the failure modes — replay, expiry, and a submit that never solved the slider.

## Rate limiting

Any `Mochi.page()` or `Mochi.api()` route can now take a [`rateLimit`](/docs/rate-limiting/) config, allowing you to easily rate limit a route.

<PostRateLimitDemo mochi:hydrate />

```ts
'/api/data': Mochi.api(handler, {
  rateLimit: { limit: 100, window: '1m' },
}),
```

A `skip` callback decides per request whether to spend quota:

```ts
'/admin': Mochi.page('./src/admin/Admin.svelte', {
  rateLimit: {
    limit: 10,
    window: '15m',
    ban: { threshold: 3, duration: '1h' },
    skip: (req) => {
      const header = req.headers.get('Authorization');
      return !header || credentialsMatch(header);
    },
  },
}),
```

## Client-only components

Some components can't render on the server at all — canvas, `localStorage`, third-party browser SDKs. The new [`mochi:clientOnly`](/docs/client-only/) directive emits an empty island wrapper during SSR and mounts the component in the browser, with optional fallback markup as children. There's also a `:visible` variant that waits for the viewport.

```svelte
<AudioVisualizer mochi:clientOnly />
```

## Debug bar improvements

The dev [debug bar](/docs/debug-bar/) grew alongside the new features: an **Images** tab for inspecting every transform on the page, a **Cache** tab for watching cache reads and writes, and an **email outbox** indicator that lights up when your app sends mail.

<figure>
  <a href={debugBar.src} target="_blank" rel="noopener">
    <Image src={debugBar} size="doc" width={debugBar.width} height={debugBar.height} alt="The Mochi dev debug bar, showing the Request, Islands, Images, JS, Info, Cache and email-outbox controls" />
  </a>
  <figcaption>The debug bar, with the new Images, Cache and email-outbox controls.</figcaption>
</figure>

## Other improvements

- **Logging** — the severity each framework event lands on is now remappable per app via the `consoleLogger:level` [filter](/docs/extensions/), so you can promote what you care about and demote what you don't without moving the [global level](/docs/logging/).
- **CLI** — the `mochi-framework` command line tool got its own [reference page](/docs/cli/), covering `build`, `generate-key` and `update-skill`.
- **Performance** — faster builds, quicker dev HMR, and smaller client bundles across the board.
- **Package updates** — dependencies across the monorepo bumped to their latest versions.

## Looking ahead

This release was bigger than normal, and a lot of the groundwork was laid in preparation for adding further built-in primitives. Some of the features currently in the pipeline are native internationalization support, `Mochi.http()` (a lightweight wrapper around `fetch` with retries and caching) and `Mochi.feature()` (built-in A/B testing).

Preparation work on the future Integration API has also started. It's inspired by the [equivalent Astro API](https://docs.astro.build/en/reference/integrations-reference/) and lets external packages hook into the framework through the existing hooks and filters system.

## Install or upgrade

New project:

```sh
bun create mochi@latest my-app
```

Existing project — bump the dependency and restart the dev server:

```sh
bun add mochi-framework@latest   # or @0.8.0 to pin
bun run dev
```

If you code with an AI assistant, don't forget to add or refresh the [agent skill](/docs/docs-for-llms/). Copy the line for the agent you use:

```sh
bunx mochi-framework update-skill              # claude-code (default)
bunx mochi-framework update-skill opencode
bunx mochi-framework update-skill antigravity  # alias: agy
bunx mochi-framework update-skill codex
```

The [full changelog](https://github.com/khromov/mochi/blob/main/packages/mochi/CHANGELOG.md) has everything else, including the performance work on builds and dev HMR. Mochi is still early and in alpha — if something breaks, [Discord](/discord/) or a [GitHub issue](https://github.com/khromov/mochi/issues) both work.