Hono JSX Skill

Build UI with hono/jsx: server-rendered HTML first, a small amount of client-side JSX only where the browser needs state. The hono skill covers the JSX syntax and c.html(); this skill covers how to structure the app. Cloudflare Workers with Vite is the default setup; see "Other runtimes" for the rest.

No React

hono/jsx is the JSX runtime. Do not bring React in:

• Do not install react, react-dom, @types/react, or @vitejs/plugin-react. Do not import from react.
• tsconfig.json has "jsx": "react-jsx" and "jsxImportSource": "hono/jsx". The react-jsx value is the transform name, not a React dependency.
• Server components are plain functions rendered once per request. No hooks, no state, no event handlers on the server. Need data: make the component async and await. Need interactivity: a client component with hono/jsx/dom, for that part only.
• Write class, not className.
• vite-ssr-components exports both flavors: import from vite-ssr-components/hono, never from /react.

Project Layout (Cloudflare Workers + Vite)

Start from what create-hono generates with the cloudflare-workers template (npm create hono@next, or npx hono init --template cloudflare-workers in an existing directory): src/index.ts with a text response, cloudflare.config.ts for the cf CLI, and a vite.config.ts with only cloudflare(). It has no JSX setup; add the pieces below, and match this layout in existing projects instead of inventing a different structure. Verify routes with the Hono CLI from the hono skill (npx hono request /); it is a dev dependency of the template and runs the app through Vite, so c.env has the local bindings automatically.