Nostr Web Components

Appearance

NostrLivestream Component ​

Displays metadata and renders the actual video of a NIP-53 livestream.

Usage ​

html
<nostr-livestream ref="naddr..." />

Attributes ​

  • ref: Livestream reference (naddr format)
  • template: ID of template element to use for custom rendering

Styling Parts ​

  • error: Error message container
  • header: Stream header section
  • image: Stream thumbnail
  • title: Stream title
  • status: Stream status
  • time: Stream time information
  • summary: Stream description
  • stats: Statistics section
  • current: Current viewers section
  • current-value: Current viewer count
  • total: Total viewers section
  • total-value: Total viewer count
  • video: Video player
  • participants: Participants section
  • participants-title: Participants section title
  • participants-list: List of participants
  • participant-entry: Individual participant entry
  • participant-pubkey: Participant's pubkey
  • participant-role: Participant's role

External Templates ​

Supports external templates through the template attribute:

html
<template id="livestream-template">
  <div>
    <slot name="header">
      <header part="header">
        <!-- Custom header structure -->
      </header>
    </slot>
    <!-- Other custom template parts -->
  </div>
</template>

<nostr-livestream template="livestream-template" ref="naddr..." />