I want to integrate an interface into my project, but I don't want to use heavy frameworks, build anything, or change the project's structure...

Use Reface:


import { Hono } from "jsr:@hono/hono@4.5.6";
import {
  Reface,
  clean,
  html,
  island,
  RESPONSE
} from "jsr:@vseplet/reface@0.0.23";

const RandomJoke = island<{}, { joke: null }>({
  template: ({ rpc }) => html`
    <div
      ${rpc.hx.joke()}
      hx-trigger="load, every 5s"
      hx-target="#output"
      hx-swap="innerHTML">
      <h2 id="output"></h2>
    </div>
  `,
  rpc: {
    joke: async () => RESPONSE(
      await (await fetch(
        "https://icanhazdadjoke.com/",
        { headers: { "Accept": "text/plain" } },
      )).text(),
    ),
  },
});

Deno.serve(
  new Hono()
    .route("/", new Reface({
      layout: clean({
        htmx: true,
        jsonEnc: true,
      }),
    })
    .page("/", RandomJoke)
    .hono()
).fetch);

Is that it? Seriously?

Seriously, bro :)