Nostr Web Components

Appearance

NostrNote Component ​

Displays a Nostr note (kind:1 or kind:1111 or any other similar kind) with NIP-27 text formatting (the same as in <nostr-text>) as well as metadata about the note author, parent and root, formatted time and permalink.

Usage ​

html
<nostr-note ref="nevent..." />

Attributes ​

  • ref: Note reference (nevent format)
  • event: Raw event JSON
  • relays: Comma-separated list of relay URLs
  • template: ID of template element to use for custom rendering

Styling Parts ​

  • container: The main container
  • header: Note header section
  • author-link: Author name/profile link
  • author-name: Author's display name
  • author-npub-short: Shortened npub
  • parent-link: Link to parent note
  • link: Note permalink
  • content: Note content
  • text: Text content
  • reference: Referenced content
  • url: URL links
  • image: Images
  • video: Video content
  • audio: Audio content
  • relay: Relay references

External Templates ​

This component supports external templates through the template attribute:

html
<template id="my-note-template">
  <div part="container">
    <header part="header">
      <!-- Custom template structure -->
    </header>
    <div part="content"></div>
  </div>
</template>

<nostr-note template="my-note-template" ref="nevent..." />