HTMLX but in under 1 KB and JSON-friendly.

Assume /quote returns a JSON response like

{
    "quote": "Hope is the spark that ignites our dreams.",
    "author": "Riko Tanaka"
}

Consists of the method and the URL to call. The method is optional, defaulting to GET.

<button o-method="GET /quote" >
    Clickme
</button>

Optional parameter to specify the ID of the element to which the received data should be applied. If missing, data is applied to the element itself.

<button o-method="GET /quote" o-ref="quotebox">
    Clickme
</button>

<quote id="quotebox"></quote>

Parameter to specify which property of the received object should be applied to the target element.

<button o-method="GET /quote" o-ref="quotebox">
    Clickme
</button>

<quote id="quotebox">
    <p o-prop="quote"></p>
    <cite o-prop="author"></cite>
</quote>

Properties are stringified with String(value) and applied as the .innerText of the target element.

Parameter to specify what classes (if any) should be added to the target element depending on the status of the request.

<button o-method="GET /quote" o-ref="quotebox">
    Clickme
</button>

<quote 
    id="quotebox"
    o-class-error="error"
    o-class-loading="loading"
    o-class-success="success"
>
    <p o-prop="quote"></p>
    <cite o-prop="author"></cite>
</quote>