Brewing the DOM

A lightweight, HTMX-inspired library for declarative interactions. Steep your HTML in functionality without the bitterness of complex JavaScript.

Get the Recipe

The Perfect Blend

Just like a good mate passed around a circle, Mate.js is built for sharing and simplicity. It allows you to define behavior directly in your HTML using attributes, making it easy to handle events, make requests, and update the DOM without writing custom JavaScript for every sip.

Preparation (Installation)

To start brewing, you have two options:

Option 1: CDN (Quick Start)

Include Mate.js directly from a CDN in your HTML:

<!-- Add this to your HTML head or before closing body tag -->
<script src="https://cdn.jsdelivr.net/gh/nsanta/mate/dist/bundle.js"></script>

Option 2: ES Module Import

Import the library into your main JavaScript file:

import mate from './path/to/mate.js';

// Pour the water
mate();

Ingredients (API)

Mate.js uses a special blend of custom attributes to define the flavor profile of your application.

mt-on

The Spark. Defines the event that triggers an action (like heating the water).

Syntax: mt-on="event:action"

Examples: click, submit, load

mt-method & mt-path

The Infusion. Configures the HTTP request method and the destination path.

mt-method="POST"

mt-path="/api/brew"

mt-pr

The Serving. The "Presenter" attribute defines how the response is poured into the DOM.

Syntax: mt-pr="action:target"

Options: @inner, @outer, @id, @class

Tasting Notes (Examples)

The Basic Pour

Make a request when clicked and refill the content.

<div mt-on="click:@request" 
     mt-method="GET" 
     mt-path="refill.html">
  Drink Mate
</div>

Sharing the Gourd (Targeting IDs)

Click one button to update a different element on the page.

<button mt-on="click:@request" 
        mt-method="GET" 
        mt-path="water.html" 
        mt-pr="@id:thermos">
  Refill Thermos
</button>

<div id="thermos">Empty...</div>

Why Mate.js?