// When a project on Hono needs real React — for the React component ecosystem, SSR, or an SPA — drop hono/jsx and wire React in via vite-ssr-components.
| name | hono-react |
| title | Use React (not hono/jsx) on top of Hono |
| description | When a project on Hono needs real React — for the React component ecosystem, SSR, or an SPA — drop hono/jsx and wire React in via vite-ssr-components. |
| tags | ["hono","react","ssr","vite","cloudflare-workers","inertia"] |
| references | ["https://github.com/yusukebe/vite-ssr-components","https://hono.dev/","https://inertiajs.com/","https://github.com/honojs/starter/tree/main/templates/cloudflare-workers+vite"] |
| related | ["hono","hono-inertia","cloudflare"] |
hono/jsx is the default for UI in a Hono project. Reach for React only when something that hono/jsx cannot satisfy makes it necessary — typically a React-only component library, a React-only ecosystem tool (e.g. a specific UI kit, charting library, headless component set), or a team requirement to standardize on React.
When that is the case, do not try to bridge hono/jsx to React. Rewrite the JSX in React and treat Hono as the server framework only.
hono/jsx/dom model.If none of the above applies, stay on hono/jsx — it is smaller, faster to ship, and the default for this stack. See hono and (for SPA-feel apps) hono-inertia.
hono. Routes, middleware, validation — unchanged from any other Hono project.react, react-dom).vite-ssr-components for the asset wiring (Vite client, asset tags, module preloads) inside Hono responses. Use the /react entry, not /hono.@cloudflare/vite-plugin. Start from the cloudflare-workers+vite Hono starter:
https://github.com/honojs/starter/tree/main/templates/cloudflare-workers+viteThe rewrite is mechanical but real — do not try to keep both:
jsxImportSource: "hono/jsx" from tsconfig.json (or switch it to react).hono/jsx and hono/jsx/dom imports with react / react-dom.vite-ssr-components/hono to vite-ssr-components/react in the root view / document component.useState from hono/jsx, hono/jsx/dom/css, etc.) to their React equivalents.hono/jsx/dom.Once you are on React, the client-side routing question is open — pick what fits the app:
yusukebe/hono-inertia-example is written in React, so it transfers verbatim. (Contrast: the hono-inertia skill is the hono/jsx variant — use that if you do not need React.)There is no "official" choice here. Pick the one whose tradeoffs (file-based vs. config, data-loading model, SSR story) match the app.
vite-ssr-components (yusukebe) is the small adapter that lets a Hono response correctly include the Vite dev client, hashed asset URLs, and module preloads in both vite dev and a production build. It has separate entries for the two JSX flavors:
vite-ssr-components/hono — for hono/jsx projects.vite-ssr-components/react — for React projects. This is what to use here.Read its README for the exact API:
https://github.com/yusukebe/vite-ssr-components
hono/jsx/dom. If the only reason for the switch is "we wanted hooks", reconsider — hono/jsx has its own hooks.Suspense boundaries, and what runs only on the client. Verify the first paint of any route before shipping.react-dom/server paths that are compatible with the Workers runtime (no Node-only APIs). The @cloudflare/vite-plugin toolchain handles this if you start from the official template.hono — the base Hono skill. Start here.hono-inertia — Inertia.js with hono/jsx (no React). Reach for that one first if you do not actually need React.cloudflare — the deployment target.Owner-only. Reviews honojs/hono PRs or local branches with two checks — tests (do they pass, is the approach right) and breaking change (public API, types, hc).
Anything Cloudflare (Workers, D1, R2, KV, Durable Objects, Queues). Detailed guidance lives in the official cloudflare/skills collection.
How to add or update a skill in yusukebe/skills from inside another working project. Owner-only — uses Yusuke's local gh CLI auth.
Use @hono/inertia on the server and @ts-76/inertia-hono-jsx on the client to get SPA-style interactivity without leaving the Hono/hono-jsx stack.
Hono is the default web framework for any project here. Detailed guidance lives in the yusukebe/hono-skill collection on GitHub.
yusukebe/rj is a tiny CLI that fetches a URL and prints the response metadata (status, headers, protocol, timing) as JSON. It does not print the body — use it alongside `curl`, not as a replacement.