Palette

Build web apps like a hipster

Overview

Palette is a lightweight library that provides a suite of utilities and helper classes to add just enough ergonomics to make building vanilla webapps a bit more fun.

Example

import { Component, html, css } from "@endeavorance/quill";

class CountingButton extends Component {
  static template = html`<button>0</button>`;

  static styles = css`
    button {
      border: 1px solid black;
    }
  `;

  static observedAttributes = ["count"];

  onAttributeChange(prev) {
    if (prev.get("count") !== this.count) {
      this.$root.textContent = this.count;
    }
  }

  onMount() {
    this.listen("click", () => {
      const count = this.getAttribute("count") ?? 0;
      this.setAttribute("count", count + 1);
    });
  }
}
Copy

Reference

See: palette.stuffby.dev