Hanabi

React Router + Hono middleware with SSR and client-side hydration

Create val
// usage: define routes for your app and export them with `hanabi`
/** @jsxImportSource https://esm.sh/react@19 */
import React from "https://esm.sh/react@19";
import { useLoaderData, Link, Outlet } from "https://esm.sh/react-router@7";
import hanabi from "https://esm.town/v/jxnblk/hanabi/main.tsx";

function Home () {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <h1>Home page</h1>
    </div>
  )
}

function About () {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <h1>About page</h1>
    </div>
  )
}

const routes = [
  { Component: Home, index: true },
  { Component: About, path: "about" },
];

export default hanabi(routes, import.meta.url);

Create val
// in your Hono app, export the routes to render the app
import { Hono } from "npm:hono@4";
import routes from "./routes.tsx";

const app = new Hono();
app.get("*", routes);
export default app.fetch;