xenon.js is a miniature nostr client, in the way fixi.js is a miniature htmx. Any element can subscribe to relays and place incoming events anywhere in the document, and any form or button can publish one. It is the HTML layer over hydrogen.js, which owns relays, signing and the family's hooks.
<script src="hydrogen.js"></script>
<script src="xenon.js"></script>
<ol nhy-relay="wss://relay.example" nxe-filter='{"kinds":[1],"limit":20}'>
<template><li>{content}</li></template>
</ol>
The list opens a subscription and inserts each note, newest first, as it arrives. Removing the list closes it.
| attribute | default | description |
|---|---|---|
nxe-filter |
JSON filter (or array of filters). Opens a subscription on this element | |
nxe-template |
inner <template> |
Selector of the template to render each event with |
nxe-target |
this element | Selector of where rendered events go |
nxe-swap |
newest |
newest or oldest (sorted by created_at), any insertAdjacentHTML position, or a property such as innerHTML |
nxe-publish |
Publishes on submit (forms) or click (anything else) | |
nxe-trigger |
submit / click |
Event that publishes |
nxe-kind |
1 |
Kind of the published event |
nxe-content |
form field content |
Content of the published event |
nxe-tags |
[] |
JSON tags. Form fields named #x add ["x", value] |
nxe-ignore |
xenon skips this element and its descendants |
Relays come from hydrogen: the closest nhy-relay, else nhyCfg.relays.
Templates interpolate {id}, {pubkey}, {kind}, {created_at}, {content}, {sig} and the first value of any tag as {#t}. Values are HTML-escaped. Listeners of hydrogen's nhy:event can add or replace fields (neon.js does).
| event | cancel to | detail |
|---|---|---|
nxe:init |
skip the element | |
nxe:swapped |
cfg, event |
|
nxe:eose |
cfg, from |
|
nxe:publish |
skip sending | cfg (signed cfg.event) |
nxe:published |
cfg (cfg.results per relay) |
|
nxe:error |
cfg, error |
|
nxe:process |
dispatch on an element to initialize new content |
Before any of these, hydrogen's nhy:config carries the live cfg: change cfg.relays, cfg.filters, cfg.template, cfg.swap (a function works too), cfg.onevent, or for publishes cfg.event and cfg.sign.
xenon.js (3.1/1.2kb raw/brotli), prefix nxe-, needs hydrogen