main.js

import { Component, createElement, render } from "https://esm.sh/[email protected]"
import { ref } from "https://esm.sh/[email protected]/dist/alpinejs.global.js"
import { init } from "https://esm.sh/[email protected]/dist/full.css"
import { html } from "https://esm.sh/lit-html"

const pdf = ref()
const ctx = ref()

const app = {
 setup() {
    const { state, effect, watch } = this
    state = { count: 0 }
    effect({
      message: "Started"
    })
    return { count: state.count }
 },
 html() {
    const { count } = this.effect()
    return html`
      <div class="flex">
        <button class="bg-[#0082c9] hover:bg-[#00e1d9] text-white font-bold py-2 px-4 rounded"> Read PDFs </button>
        <button class="bg-[#00e1d9] hover:bg-[#0082c9] text-white font-bold py-2 px-4 rounded">Stop</button>
      </div>
      <div class="flex">
        <iframe id="pdf" src="" width="100%" height="600px" frameborder="0"></iframe>
      </div>
    `
 },
 async mounted() {
    this.pdf = this.el.querySelector("#pdf")
    this.ctx = this.pdf.getContext("2d")
 }
}

init(app)