1# 🛰️ xenon.js - nostr in HTML23xenon.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.45```html6<script src="hydrogen.js"></script>7<script src="xenon.js"></script>89<ol nhy-relay="wss://relay.example" nxe-filter='{"kinds":[1],"limit":20}'>10 <template><li>{content}</li></template>11</ol>12```1314The list opens a subscription and inserts each note, newest first, as it arrives. Removing the list closes it.1516## Attributes1718| attribute | default | description |19|---|---|---|20| `nxe-filter` | | JSON filter (or array of filters). Opens a subscription on this element |21| `nxe-template` | inner `<template>` | Selector of the template to render each event with |22| `nxe-target` | this element | Selector of where rendered events go |23| `nxe-swap` | `newest` | `newest` or `oldest` (sorted by `created_at`), any `insertAdjacentHTML` position, or a property such as `innerHTML` |24| `nxe-publish` | | Publishes on submit (forms) or click (anything else) |25| `nxe-trigger` | `submit` / `click` | Event that publishes |26| `nxe-kind` | `1` | Kind of the published event |27| `nxe-content` | form field `content` | Content of the published event |28| `nxe-tags` | `[]` | JSON tags. Form fields named `#x` add `["x", value]` |29| `nxe-ignore` | | xenon skips this element and its descendants |3031Relays come from hydrogen: the closest `nhy-relay`, else `nhyCfg.relays`.3233Templates 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).3435## Events3637| event | cancel to | detail |38|---|---|---|39| `nxe:init` | skip the element | |40| `nxe:swapped` | | `cfg`, `event` |41| `nxe:eose` | | `cfg`, `from` |42| `nxe:publish` | skip sending | `cfg` (signed `cfg.event`) |43| `nxe:published` | | `cfg` (`cfg.results` per relay) |44| `nxe:error` | | `cfg`, `error` |45| `nxe:process` | | dispatch on an element to initialize new content |4647Before 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`.