Server routes.React pages.No API in between.

Each route is a Hono handler that renders a React page with its props. Inertia swaps the pages in the browser, so there is no client router and no API to write. Deploy to Node, Bun or Cloudflare Workers.

Read the docs

import { back, defineHandler, render } from 'fondu'

// GET /todos
export const loader = defineHandler(async (c) =>
  render(c, 'todos', { items: await db.todos.all() }),
)

// POST /todos, from the form
export const action = defineHandler.withValidator({ body: todo })(
  async (c, { body }) => {
    await db.todos.add(body)
    return back(c)
  },
)

import { Form } from '@inertiajs/react'
import { href } from 'fondu/client'

export default function Todos({ items }: { items: Todo[] }) {
  return (
    <>
      <ul>
        {items.map((t) => (
          <li key={t.id}>{t.text}</li>
        ))}
      </ul>
      <Form action={href('/todos')} method="post" resetOnSuccess>
        <input name="text" />
        <button>Add</button>
      </Form>
    </>
  )
}

Who does what

Fondu writes as little of its own as it can. The rest is three projects you may know already, and their docs apply as they are.

Hono: The server: requests, middleware, CSRF protection, security headers. Your routes are its handlers.
Inertia: The browser: visits without reloads, forms, prefetching, deferred and merged props, infinite scroll.
Vite: The dev server, with updates in place, and the production build.
Fondu: The seams: routes from files, typed pages and URLs, the server render, error pages, static pages.

Start with one route and one page.

Quick start