1# 🔴 europium.js - note embeds23europium.js is a miniature of fiatjaf's nostr-note web component: one attribute embeds a note, with its author, time, linked content and a link out. It does no fetching or rendering itself. It writes the xenon, radon and neon markup you could have written by hand, and those libraries do the work (argon caches it, too).45```html6<article neu-note="nevent1...">loading...</article>7```89The article subscribes to the note's id (on its relay hints, when the nevent has some), shows `loading...` until it arrives, then becomes the markup below.1011## Generated markup1213europium sets `nxe-filter='{"ids":["<id>"]}'` and `nxe-swap="innerHTML"` (unless already present), and `nhy-relay` to the nevent's relay hints plus `nhyCfg.relays` when neither the article nor an ancestor has one. If the article has no child elements, it appends this template (text is kept as a placeholder), then dispatches `nxe:process`:1415```html16<template><header neu-part="author"><img nrn-profile="{pubkey}" nrn-field="picture" neu-part="avatar" alt=""> <b nrn-profile="{pubkey}" nrn-field="name" neu-part="name">{npub}</b> <time nne-ago="{created_at}" neu-part="time">{ago}</time></header><div neu-part="content">{content}</div><a href="https://njump.me/{nevent}" neu-part="link">open</a></template>17```1819If the article already has child elements, such as your own `<template>`, europium leaves the markup alone and only wires the subscription:2021```html22<article neu-note="note1..."><template>23 <p neu-part="content">{content}</p>24 <a href="https://njump.me/{reply}" neu-part="link">in reply to</a>25</template></article>26```2728## Attributes2930| attribute | description |31|---|---|32| `neu-note` | `nevent`, `note` (both need neon.js) or hex event id |33| `neu-timeout` | ms before the note counts as missing (default `neuCfg.timeout` or 8000) |34| `neu-loading` | Set by europium until the first render |35| `neu-missing` | Set by europium when nothing arrived in time. Cleared if the note shows up later |36| `neu-part` | On generated pieces: `author`, `avatar`, `name`, `time`, `content`, `link`, for styling |37| `neu-ignore` | europium skips this element and its descendants |3839`window.neuCfg = {link, timeout}`: `link` is the prefix for the note link (default `nneCfg.link`, else `https://njump.me/`).4041Templates inside `[neu-note]` also get `{reply}`: the `nevent` of the note's NIP-10 parent (`reply` marker, else `root`, else the last unmarked `e` tag), or empty.4243## Events4445| event | cancel to | detail |46|---|---|---|47| `neu:missing` | skip setting `neu-missing` | `id` |4849Rendering reports through xenon's `nxe:swapped` on the article.5051## API5253| function | returns |54|---|---|55| `europium.markup(link?)` | the default template string |56| `europium.process(node)` | initializes `[neu-note]` elements in and under `node` (new ones are picked up automatically) |5758Requires xenon.js and hydrogen.js. neon.js decodes ids and fills `{content}`, `{npub}`, `{nevent}`, `{ago}`; radon.js fills names and pictures; argon.js caches.