Cara interessante não conhecia o Unlopy, tava dando uma olhada e achei bem dificil, mas é por que eu ainda não tentei né, mas o HTMX ele é bem simplificado, você precisa de poucos atributos para alcançar o que você precisa, como fazer um modal

pages/documentacao/entrada.html

<li 
    class="font-bold flex gap-2 justify-center items-center cursor-pointer rounded-md px-2 bg-teal-400 hover:bg-teal-600 border-2 border-teal-400 border-opacity-20 text-white"
    hx-get="pages/documentacao/modals/entry.html"
    hx-trigger="click"
    hx-target="#modal"
    hx-swap="outterHTML"
>
    <i class="fa-solid fa-plus"></i>
    <span>Adicionar</span>
</li>


<!-- MODAL -->

<div id="modal">


</div>

pages/documentacao/modals/entry.html

<div data-entry-modal="entry" class="fixed top-0 left-0 bottom-0 right-0">
  <div class="flex flex-row justify-center items-center h-full w-full uppercase font-thin">
    <form class="flex flex-col gap-4 bg-teal-800 p-4 relative rounded-md">
      <span data-entry-close="close" class="absolute top-0 right-0 p-2 text-white hover:text-teal-400">
        <i class="fa-solid fa-close"></i>
      </span>
      <div class="pt-5">
        <label class="flex flex-col w-full" for="typification">
          <p class="text-white">Tipificação</p>

          <select class="text-thin" name="typification" id="typification">
            <option value="fq">Liberação</option>
            <option value="fq">Validação</option>
            <option value="fq">Validação-liberação</option>
          </select>
        </label>
        <label class="flex flex-col w-full" for="code">
          <p class="text-white">Código</p>

          <input type="text" name="code" id="code">
        </label>
        <label class="flex flex-col w-full" for="name">
          <p class="text-white">Nome</p>

          <input type="text" name="name" id="name">
        </label>

        <label class="flex flex-col w-full" for="entry_at">
          <p class="text-white">Data da entrada</p>

          <input type="date" name="entry_at" id="entry_at">
        </label>
        <label class="flex flex-col w-full" for="type">
          <p class="text-white">Tipo</p>

          <input type="text" name="type" id="type">
        </label>

        <label class="flex flex-col w-full" for="lab">
          <p class="text-white">Laboratório</p>
          <select class="text-thin" name="lab" id="lab">
            <option value="fq">Físiquo-químico</option>
            <option value="fq">Microbiólogico</option>
          </select>
        </label>
      </div>
      <input type="submit" value="Enviar" class="bg-teal-400 hover:bg-teal-600">

    </form>
  </div>
  <script>
    close_modal("data-entry-modal", "data-entry-close")
  </script>
</div>

main.js

function close_modal(modal, close) {
  const closeButton = document.querySelector(`[${close}]`)
  const modalSelect = document.querySelector(`[${modal}]`)

  closeButton.addEventListener('click', (e) => {
    e.stopPropagation();
    if (!modalSelect.classList.contains("hidden")) {
      modalSelect.remove()
    }
  })
}