Nostr Web Components

Appearance

Installation ​

There are four ways to use Nostr Web Components in your project:

1. Standalone Script Import ​

The simplest way is to import individual components directly from jsdelivr:

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

2. Complete Bundle Import ​

If you want to use multiple components, you can import the complete bundle:

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

3. Using native ES module imports and importmap ​

If you are using more than one component and not making your own bundle, then this approach is what you're looking for as it has many advantages over either importing multiple component bundles or the big bundle with all the components:

  1. Efficient Loading: Only load the components you need
  2. Shared Dependencies: Dependencies like @nostr/tools are loaded once and shared between components
  3. Better Caching: Browser can cache individual components and dependencies separately
  4. Modern Standards: Uses native ES modules with proper dependency resolution
html
<script type="importmap">
  {
    "imports": {
      "@nostr/tools/": "https://esm.sh/*jsr/@nostr/[email protected]/",
      "@nostr/gadgets/": "https://esm.sh/*jsr/@nostr/[email protected]/",
      "@noble/curves/": "https://esm.sh/*@noble/[email protected]/",
      "@noble/hashes/": "https://esm.sh/*@noble/[email protected]/",
      "@scure/base/": "https://esm.sh/*@scure/[email protected]/",
      "@scure/base": "https://esm.sh/*@scure/[email protected]",
      "dataloader": "https://esm.sh/[email protected]",
      "idb-keyval": "https://esm.sh/[email protected]"
    },
    "scopes": {
      "https://esm.sh/": {
        "@jsr/nostr__tools/": "https://esm.sh/*@jsr/[email protected]/",
        "@jsr/nostr__gadgets/": "https://esm.sh/*@jsr/[email protected]/",
        "@jsr/fiatjaf__lru-cache/": "https://esm.sh/jsr/@fiatjaf/[email protected]/"
      }
    }
  }
</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>

See the source at https://unpkg.com/browse/nostr-web-components/importmapdemo.html for an example.

4. NPM Installation ​

For projects using npm:

bash
npm install nostr-web-components

Then import components in your JavaScript:

javascript
import 'nostr-web-components/nostr-name'
import 'nostr-web-components/nostr-picture'