Palette is pre-release software. The API is largely stable, but there may be bugs as well as documentation and code coverage gaps.

Paint Something New

Palette makes building browser-native Web Components a joy. It brings modern ergonomics closer to the platform without the need for any build step. Encapsulated components, optimized reactive templates, and powerful state management with all the bells and whistles. Fast, fun, and future-proof.

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

define("counting-button", {
  template: html`
    <button>
      You've clicked ${"$count"} ${"*pluralTime"}!
    </button>
  `,

  styles: css`
    button {
      display: block;
      border: 3px solid #FF33CC;
      margin: 1rem auto;
      font-size: 1.5em;
      cursor: pointer;
    }
  `,

  initialState: { count: 0 },

  computedProperties() {
    return {
      pluralTime: this.state.count === 1 ? "time" : "times";
    }
  }

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

Grab Your Brush

Palette is designed for humans who want to develop for the web. It is distributed under the MPL 2.0 license. Building things should be fast, fun, and not beholden to massive corporate stewards. Palette delivers on that and more.

Features

• Browser-standard Web Components
• Zero build required
• Zero external dependencies
• ~7.5kb production build (gzipped)
• Works out of the box with native JavaScript
• Strict TypeScript support throughout
• Optimized Template rendering with surgical DOM updates
• Deeply reactive state management with support for array mutations
• Optimized for blazing-fast renders
• Intelligent error management with error boundary-style handlers
• Stateful transactions with rollback support
• No virtual DOM—Respects manual DOM manipulations

Planned Features

• Server Side Rendering + Hydration
• Template pre-compilation
• Advanced form management
• Advanced state derivation support
• HMR Support

Template with HTML

Palette's templating language is just HTML inside standard HTML <template> tags. Notations allows for binding data to attributes or to directives like ::each.

<template>
  <img :src="@avatar" :title="@username" :alt="*description" />
</template>

Handle State However

Powerful State management with deep reactivity, array mutation support, and even transactions with rollbacks.

const appState = new State({
  view: "home",
  user: {
    handle: "coolguy2",
    langs: ["en-US"],
  }
});

// Respond to state changes
appState.addListener((state) => { /* ... */ });

// Change a single stateful value
state.set("view", "profile");

// Deep reactive API with array mutation support
state.live.user.langs.push("pt-BR");

For the Browser, Not Against

Palette was designed inside and out to feel like an extension of the browser rather than an opaque layer atop it. Palette maintains a strict contract with the DOM, giving you the peace of mind to access, modify, and manage elements as you need.

const Demo = define("x-example", {
  template: html`<button id="btn"></button>`,

  script() {
    const btn = this.requireElementById("btn");

    // You wanna manually set the text value?
    // Go for it!
    btn.textContent = "Click me!";
  }
});

Take Full Control

The define() helper is great for 90% of Components, but if you want total control over your E-Destiny, you can directly extend the Component class for more flexibility:

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

class CountingButton extends Component {
  static tagName = "counting-button";
  static template = html`<button>${"$count"}</button>`;
  static 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.state.count += 1;
    });
  }
};

Component.register(CountingButton);

Project Status

Palette is pre-release software. It's API is largely stable, but is still in the beta stages.

This project is maintained by Endeavorance. Contributions are not yet accepted, but bug reports can be sent to palette@endeavorance.camp

For an overview of the stable 1.0.0 roadmap, see the 1.0.0 milestone for the project.