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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/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/": "https://esm.sh/*jsr/@nostr/tools@2.12.0/",
      "@nostr/gadgets/": "https://esm.sh/*jsr/@nostr/gadgets@0.0.16/",
      "@noble/curves/": "https://esm.sh/*@noble/curves@1.2.0/",
      "@noble/hashes/": "https://esm.sh/*@noble/hashes@1.3.1/",
      "@scure/base/": "https://esm.sh/*@scure/base@1.1.1/",
      "@scure/base": "https://esm.sh/*@scure/base@1.1.1",
      "dataloader": "https://esm.sh/dataloader@2.2.2",
      "idb-keyval": "https://esm.sh/idb-keyval@6.2.1"
    },
    "scopes": {
      "https://esm.sh/": {
        "@jsr/nostr__tools/": "https://esm.sh/*@jsr/nostr__tools@2.12.0/",
        "@jsr/nostr__gadgets/": "https://esm.sh/*@jsr/nostr__gadgets@0.0.16/",
        "@jsr/fiatjaf__lru-cache/": "https://esm.sh/jsr/@fiatjaf/lru-cache@0.0.1/"
      }
    }
  }
</script>

<script type="module">
  import 'https://esm.sh/nostr-web-components/lib/nostr-name.js'
  import 'https://esm.sh/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.

styling components

all components expose named parts that can be accessed with CSS like nostr-picture::part(img) { border: 12px solid fuchsia; }, see rendered HTML in browser console for part names available.

styling components with tailwind

if you use tailwind you can use part-[img]:border-2, part-[...]:text-red-500 (and so on) at the component directly in order to style its internal parts, it works like other special variant selectors like hover:... (the demo page is using this). you just need to add this to your tailwind.config.js:

+const plugin = require('tailwindcss/plugin')

 module.exports = {
   content: ["./src/**/*.{html,js}"],
+  plugins: [
+    plugin(({ matchVariant }) => {
+      matchVariant('part', value => {
+        return `&::part(${value})`
+      })
+    }),
+  ],
 }