Build web apps like the hipster you are

Full Documentation: palette.camp

Overview

Palette provides utilities that work hand in hand with native browser APIs to bring modern ergonomics closer to the platform.

Use Templates powered by standard <template> elements to render dynamic content.

Manage State with a flexible and expressive state manager with support for deep reactivity, locking, and transactions with rollbacks.

Combine them with Components to create your own native Web Components with reactive rendering, blazing fast updates, and powerful utilities.

Quick Look

import { define, html, css } from "@rusticarcade/palette";

// Using convenience methods here.
// You can also just import and extend `Component` for class-based definitions
const CountingButton = define("counting-button", {
  template: html`<button>${"$count"}</button>`,

  styles: css`
    :host {
      --border-color: black;
    }

    button {
      font-size: 1.5em;
      border: 3px solid var(--border-color);
    }
  `,

  initialState: { count: 0 },

  script() {
    this.listen("button", "click", () => {
      this.liveState.count += 1;
    });
  }
});

Documentation

Guides and API docs can be found at palette.camp