Can someone explain me how to use Client Components in regular Hono API?

[Asqit]

Hi!

I’m probably missing something obvious, but I’m not sure how to actually use client components with Hono JSX.

I built a small tool with a REST API using Hono, and now I’m adding a frontend to display the data. SSR components are working fine, but I also need client-side interactivity.

The docs include a page about client-side components (https://hono.dev/docs/guides/jsx-dom), but I don’t understand how to connect them with my existing API.

For example, I tried rendering a component like this:

Counter.tsx

import { useState } from "hono/jsx";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

app.get("/", (c) => {
  return c.render(
    <div>
      <Counter />
    </div>,
  );
});

and also:

app.get("/", (c) => {
  return c.html(
    <div>
      <Counter />
    </div>,
  );
});

In both cases, the response is just static HTML — the Counter component doesn’t hydrate or run any client-side JS. I assume that’s expected, but then… where do I attach the runtime JS? The render function from hono/jsx/dom exists, but I don’t see how or where it’s supposed to be used.

How do you properly wire up client components with the API so they actually run in the browser?

Thanks!

[Yaya12085]

This discussion might help you: https://github.com/orgs/honojs/discussions/2596

[Asqit]

Thank you! The discussion you pointed me to is amazing!
Straight to the point, I knew the issue is that I needed to bundle the runtime javascript, but didn't know how. (rather didn't want to experiment 😅) The example shown in the discussion deserves to have a link in the docs, honestly.