🛰️ xenon.js - nostr in HTML

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.

Attributes

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).

Events

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.