Unscripted eXtended Markup Language (UXML) is a lightweight, declarative, script-free,
component library designed for web development within HTML. UXML gives you the power of
REST,
Mouse Events,
Form Events,
Data Binding,
JQuery Effects,
CSS Manipulation,
Components, and
Directives
just using only plain HTML
attributes. You can build a
single page applications
(SPA) while working within the familiar HTML structure without coding a single line of JavaScript code.
UXML is incredibly lightweight, weighing in (~3k min.js gzip'd) size, no dependency, very extendable, compatible to all
major browser and 90% smaller than popular component libraries like
react.
UXML uses a simple syntax $action="event:selector" similar on how we do a basic
onclick="click()" event handler in plain HTML. This syntax consists of three(3) parts, a
declaration $action, an assignment equals(=) and a handler "event:selector".
- A $ sign to define/access UXML Object
- A action to be performed on the selected HTML element
-
A event to emit an
UXMLEvent
or trigger an http request
- A colon(:) to separate event and selector
-
A selector to query HTML element(s) #navbar or pass a value to a given event
/users
Include the UXML library in your HTML document:
<script src="https://unpkg.com/uxml.js@0.1.0/uxml.js"></script>
Use UXML attributes within your HTML elements to use any
REST HTTP Protocol.
<body $load="get:/pages" $swap="innerHTML">
<!-- Your HTML body -->
</body>
UXML provides a range of attributes to enhance interactivity, such as $click, $submit,
$load, $component and more. These attributes allow you to define behaviors without the need for
JavaScript code.
<button $click="show:#hello">Say Hello!</button>
<div id="hello">Hello, UXML!</div>
