nostr-comments

name: nostr-comments description: Implement Nostr comment systems, add discussion features to posts/articles, build community interaction features, or attach comments to any external content identifier including URLs, hashtags, and NIP-73 identifiers (ISBN, podcast GUIDs, geohashes, movie ISANs, blockchain transactions, and more).

Adding Nostr Comments

The project has a commenting system built on two Nostr protocols:

• NIP-10 replies (kind 1 → kind 1): For replying to kind 1 text notes. Published as kind 1 events with e-tag markers (root/reply).
• NIP-22 comments (kind 1111): For commenting on everything else — non-kind-1 events, external URLs, NIP-73 identifiers, hashtags. Uses uppercase tags for root references and lowercase tags for the immediate parent.

Voice equivalents also exist: kind 1222 (NIP-10 voice replies) and kind 1244 (NIP-22 voice comments).

Architecture

The commenting system is composed of page-level logic, shared hooks, and shared UI components. There is no single drop-in <CommentsSection> component. Instead, each page assembles commenting from these building blocks:

Hooks

UI Components

How ComposeBox Determines the Protocol

The replyTo prop controls which protocol is used:

// Inside ComposeBox:
const isNip22Reply = replyTo && (replyTo instanceof URL || replyTo.kind !== 1);

Adding Comments to a Page

For Nostr Events (non-kind-1)

Use useComments to fetch comments and ComposeBox or ReplyComposeModal with the event as replyTo:

import { useMemo } from 'react';
import type { NostrEvent } from '@nostrify/nostrify';
import { useComments } from '@/hooks/useComments';
import { ComposeBox } from '@/components/ComposeBox';
import { ThreadedReplyList, type ThreadedReply } from '@/components/ThreadedReplyList';

function ArticleComments({ article }: { article: NostrEvent }) {
  const { data: commentsData, isLoading } = useComments(article, 500);

  const orderedReplies: ThreadedReply[] = useMemo(() => {
    if (!commentsData) return [];
    return commentsData.topLevelComments
      .sort((a, b) => a.created_at - b.created_at)
      .map((reply) => ({
        reply,
        firstSubReply: commentsData.getDirectReplies(reply.id)[0],
      }));
  }, [commentsData]);

  return (
    <div>
      <ComposeBox compact replyTo={article} />
      <ThreadedReplyList replies={orderedReplies} />
    </div>
  );
}

For External Content (URLs and NIP-73 Identifiers)

Pass a URL object as replyTo to ComposeBox and as root to useComments:

import { useMemo } from 'react';
import { useComments } from '@/hooks/useComments';
import { ComposeBox } from '@/components/ComposeBox';
import { ThreadedReplyList, type ThreadedReply } from '@/components/ThreadedReplyList';

function ExternalComments({ identifier }: { identifier: string }) {
  const commentRoot = useMemo(() => new URL(identifier), [identifier]);
  const { data: commentsData } = useComments(commentRoot, 500);

  const orderedReplies: ThreadedReply[] = useMemo(() => {
    if (!commentsData) return [];
    return commentsData.topLevelComments
      .sort((a, b) => a.created_at - b.created_at)
      .map((reply) => ({
        reply,
        firstSubReply: commentsData.getDirectReplies(reply.id)[0],
      }));
  }, [commentsData]);

  return (
    <div>
      <ComposeBox compact replyTo={commentRoot} />
      <ThreadedReplyList replies={orderedReplies} />
    </div>
  );
}

Using the Modal Composer

For a modal-based compose experience (e.g. triggered by a FAB or reply button):

import { useState } from 'react';
import { ReplyComposeModal } from '@/components/ReplyComposeModal';
import { Button } from '@/components/ui/button';

function CommentButton({ target }: { target: NostrEvent | URL }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Comment</Button>
      <ReplyComposeModal event={target} open={open} onOpenChange={setOpen} />
    </>
  );
}

ReplyComposeModal accepts event as either a NostrEvent or URL, which it passes through to ComposeBox as replyTo.

Supported Root Types for useComments

The useComments hook accepts three root types:

• NostrEvent — comments on any Nostr event (addressable, replaceable, or regular)
• URL — comments on external identifiers: web URLs (new URL("https://...")) or any NIP-73 identifier except hashtags (e.g. new URL("isbn:9780765382030"), new URL("iso3166:US"))
• `#${string}` — NIP-73 hashtag only (e.g. "#bitcoin"); this template string type is exclusively for hashtags

NIP-73 External Content Identifiers

All NIP-73 identifiers (except hashtags) are passed as URL objects:

// Web URL
const root = new URL("https://example.com/article");

// Book (ISBN, without hyphens)
const root = new URL("isbn:9780765382030");

// Podcast feed
const root = new URL("podcast:guid:c90e609a-df1e-596a-bd5e-57bcc8aad6cc");

// Podcast episode
const root = new URL("podcast:item:guid:d98d189b-dc7b-45b1-8720-d4b98690f31f");

// Movie (ISAN, without version part)
const root = new URL("isan:0000-0000-401A-0000-7");

// Geohash (lowercase)
const root = new URL("geo:ezs42e44yx96");

// Country (ISO 3166, uppercase)
const root = new URL("iso3166:US");

// Subdivision
const root = new URL("iso3166:US-CA");

// Academic paper (DOI, lowercase)
const root = new URL("doi:10.1000/xyz123");

// Bitcoin transaction
const root = new URL("bitcoin:tx:a1075db55d416d3ca199f55b6084e2115b9345e16c5cf302fc80e9d5fbf5d48d");

// Ethereum address
const root = new URL("ethereum:1:address:0xd8da6bf26964af9d7eed9e03e53415d37aa96045");

Hashtags use the string format directly:

const root = "#bitcoin";

How useComments Builds Filters

The hook constructs relay filters based on the root type:

How usePostComment Builds Tags

The hook constructs NIP-22 tags with uppercase for the root scope and lowercase for the reply scope:

• E/e — Event ID reference
• A/a — Addressable event coordinate (kind:pubkey:d-tag)
• I/i — External identifier (URL, hashtag)
• K/k — Kind number, or web for HTTP(S), or # for hashtags
• P/p — Pubkey of the referenced event's author

For top-level comments, both the root and reply tags point to the same target. For nested replies, the root tags point to the original root and the reply tags point to the parent comment.

Where Comments Are Used in the App