Nostr Web ComponentsDrop-in HTML elements for instant Nostr functionality

📝

Zero Build Setup

Just add a script tag and use the components. Works anywhere -- static sites, server-rendered apps, or simple HTML pages.

🎨

Fully Styleable

No built-in styles. Style components using CSS `part` selectors or Tailwind CSS. Or provide your own custom HTML templates to be filled with data.

🔌

Framework Agnostic

Works seamlessly with HTMX, Alpine.js, or any other JavaScript-based HTML enhancers. Of course it also works within SPA frameworks.

🚀

Efficient

Relay calls are batched and cached, even across completely separate components. Relay connections are reused. Metadata results are stored on IndexedDB.

🔀

Relay Aware

Components respect relay choices and follow "outbox model" relays, ensuring decentralization and censorship-resistant outputs.

🪶

Lightweight

Components don't import any dependency they don't use. A single component is just ~250kb including all the cryptography. A second one adds almost nothing on top of that.

Quick Start

Add a Nostr username display with just one line:

html

<script src="https://cdn.jsdelivr.net/npm/nostr-web-components/dist/nostr-name.js"></script>
<nostr-name pubkey="npub..."></nostr-name>

Style it in any way you desire

Use CSS parts to style components:

css

nostr-name::part(name) {
  color: blue;
  font-weight: bold;
}

Or with Tailwind: