<nostr-event>

A lightweight, customizable Web Component to embed and render any Nostr event on the web.

⚡ Live Event Explorer

Paste any NIP-05 (name@domain.com), nevent1..., note1..., npub1..., naddr1..., or 64-char hex ID:

👤 User Profile via NIP-05 (Kind 0)

Pass a simple NIP-05 identifier (e.g. event="delirehberi@emre.xyz") or an npub1... to render user profile, NIP-05 badge, bio, website, and Lightning address.

<nostr-event event="delirehberi@emre.xyz"></nostr-event>

📝 Text Note (Kind 1)

Renders notes by note1... or nevent1... with autolinked URLs, hashtags, NIP-21 nostr: mentions, and inline media embeds.

<nostr-event event="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"></nostr-event>

⚡ Progressive Enhancement (Fallback Links)

Works just like <mastodon-post>: Search engines and non-JS clients see standard HTML links, and the component hydrates automatically when JavaScript runs.

<nostr-event>
  <a href="nostr:npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6">
    View Profile on Nostr
  </a>
</nostr-event>

View fiatjaf on Nostr (Hydrating...)

🎨 CSS Customization & Variables

Override any CSS custom property (--ne-card-bg, --ne-accent, --ne-radius, --ne-border) or target shadow DOM ::part(card) without writing custom templates.

nostr-event.custom-theme {
  --ne-card-bg: #18181b;
  --ne-border: #f59e0b;
  --ne-accent: #f59e0b;
  --ne-radius: 20px;
}