Rustic Arcade

Repositories

1

Projects Packages

1

@rusticarcade/palette (0.8.0)

Published 2026-08-16 23:06:40 +02:00 by endeavorance in rusticarcade/palette

Installation

Setup this registry in your project .npmrc file:

@rusticarcade:registry=

To install the package using npm, run the following command:

npm install @rusticarcade/palette@0.8.0

or add it to the package.json file:

"@rusticarcade/palette": "0.8.0"

For more information on the npm registry, see the documentation.

About this package

Full Documentation: https://palette.camp

Palette is a web component and web app development library that provides modern ergonomics while complimenting native browser APIs rather than replacing them.

• Components with reactive rendering, optimized event management, and encapsulated styles
• Templates powered by standard <template> tags and optimized for surgical DOM updates
• State management with support for deeply nested reactive mutations, including Arrays, Sets, and Maps

Features

• ✅ Browser-standard Web Components
• ✅ Zero build required
• ✅ Zero external dependencies
• ✅ <10kb 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

• 🏗️ SSR + Hydration
• 🏗️ Advanced form management
• 🏗️ HMR Support

Quick Look

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

define("counting-button", {
  template: html`
    <button :class="*classnames">
      ${"$count"}
    </button>
  `,

  style: css
    button {
      color: black;
      background-color: white;
      font-size: 1.5em;
      border: 3px solid currentColor;
    }

    .invert {
      color: white;
      background-color: black
    }
  `,

  initialState: { count: 0 },

  templateData() {
    return {
      classnames: { invert: this.state.count >= 100 }
    }
  },

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

Dependencies

Development dependencies

ID	Version
@happy-dom/global-registrator	catalog:
@types/bun	catalog:
bunup	catalog:
csstype	catalog:
typedoc	catalog:
typescript	catalog:

Keywords

palette component web components template state ui framework

Details

npm

rusticarcade/palette

2026-08-16 23:06:40 +02:00

1

endeavorance

Project website

MPL-2.0

latest

98 KiB

Assets (1)

palette-0.8.0.tgz 98 KiB

Versions (1) View all

0.8.0 2026-08-16

Issues