<script type="module">
  import { createSignal } from "https://cdn.skypack.dev/solid-js@1.2.6";
  import { render } from "https://cdn.skypack.dev/solid-js@1.2.6/web";
  import html from "https://cdn.skypack.dev/solid-js@1.2.6/html";

  function Counter() {
    const [count, setCount] = createSignal(0);
    const increment = () => setCount(count() + 1);

    return html`
      <button type="button" onClick=${increment}>
        Click: ${count}
      </button>
    `;
  }

  render(Counter, document.body);
</script>
button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.