nostr web components

you want to display a nostr username when you just have a pubkey? no build systems, just do this:

<script src="https://unpkg.com/nostr-web-components/dist/nostr-name.js"></script>
<div>hello, <nostr-name pubkey="npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6" /></div>

demo

a more complete demo of all available components and how to use them can be found at https://unpkg.com/nostr-web-components/demo.html.

how to use

bundled builds -- a single file that contains one component and all the dependencies, can be found at https://unpkg.com/nostr-web-components/dist/, while unbundled builds are under the ./lib directory. the unbundled files can either be imported using a normal bundler or directly in a browser using es6 imports.

using standalone component bundles

there is one bundled file for each component, so if you’re just importing one component just get the one you need, as in the demo above.

using the big bundle with all components

just include a script like <script src="https://unpkg.com/nostr-web-components/dist/index.js"></script> and all components will be available globally.

see https://unpkg.com/nostr-web-components/bigbundledemo.html for a demo of this.

using es6

in this case you must do something horrible like this (but it works!):

<script type="importmap">
  {
    "imports": {
      "nostr-tools/pool": "https://ga.jspm.io/npm:[email protected]/lib/esm/pool.js",
      "nostr-tools/relay": "https://ga.jspm.io/npm:[email protected]/lib/esm/relay.js",
      "nostr-tools/utils": "https://ga.jspm.io/npm:[email protected]/lib/esm/utils.js",
      "nostr-tools/nip19": "https://ga.jspm.io/npm:[email protected]/lib/esm/nip19.js",
      "nostr-tools/nip05": "https://ga.jspm.io/npm:[email protected]/lib/esm/nip05.js",
      "debounce": "https://ga.jspm.io/npm:[email protected]/index.js",
      "mnemonist/lru-cache": "https://ga.jspm.io/npm:[email protected]/lru-cache.js"
    },
    "scopes": {
      "https://ga.jspm.io/": {
        "@noble/ciphers/aes": "https://ga.jspm.io/npm:@noble/[email protected]/esm/aes.js",
        "@noble/ciphers/chacha": "https://ga.jspm.io/npm:@noble/[email protected]/esm/chacha.js",
        "@noble/ciphers/utils": "https://ga.jspm.io/npm:@noble/[email protected]/esm/utils.js",
        "@noble/curves/secp256k1": "https://ga.jspm.io/npm:@noble/[email protected]/esm/secp256k1.js",
        "@noble/hashes/crypto": "https://ga.jspm.io/npm:@noble/[email protected]/esm/crypto.js",
        "@noble/hashes/hkdf": "https://ga.jspm.io/npm:@noble/[email protected]/esm/hkdf.js",
        "@noble/hashes/hmac": "https://ga.jspm.io/npm:@noble/[email protected]/esm/hmac.js",
        "@noble/hashes/sha256": "https://ga.jspm.io/npm:@noble/[email protected]/esm/sha256.js",
        "@noble/hashes/utils": "https://ga.jspm.io/npm:@noble/[email protected]/esm/utils.js",
        "@scure/base": "https://ga.jspm.io/npm:@scure/[email protected]/lib/esm/index.js",
        "obliterator/foreach": "https://ga.jspm.io/npm:[email protected]/foreach.js",
        "obliterator/iterator": "https://ga.jspm.io/npm:[email protected]/iterator.js"
      },
      "https://ga.jspm.io/npm:@noble/[email protected]/": {
        "@noble/hashes/hmac": "https://ga.jspm.io/npm:@noble/[email protected]/esm/hmac.js",
        "@noble/hashes/sha256": "https://ga.jspm.io/npm:@noble/[email protected]/esm/sha256.js",
        "@noble/hashes/utils": "https://ga.jspm.io/npm:@noble/[email protected]/esm/utils.js"
      },
      "https://ga.jspm.io/npm:@noble/[email protected]/": {
        "@noble/hashes/crypto": "https://ga.jspm.io/npm:@noble/[email protected]/esm/crypto.js"
      }
    }
  }
</script>

<script type="module">
  import 'https://unpkg.com/nostr-web-components/lib/nostr-name.js'
  import 'https://unpkg.com/nostr-web-components/lib/nostr-picture.js'
</script>

<nostr-name pubkey="npub137gavftkelnara27cx56uchxr6qxvf4ragjfpe8qmlsl64kwrf3q34fpat"></nostr-name>
<nostr-picture pubkey="npub137gavftkelnara27cx56uchxr6qxvf4ragjfpe8qmlsl64kwrf3q34fpat"></nostr-picture>

see https://unpkg.com/nostr-web-components/importmapdemo.html for a demo of this.