Threading the web with Nostr

Some time ago I started hacking on a nostr client for comments, an alternative to nocomment, just for the fun learning experience. As a stacker.news fan, I drew a lot of the inspiration from its design.

At about the same time, I noticed Habla.news was lacking comments on long-form notes. I was kindly invited to join the design calls, and my tiny widget ended up getting merged!

Comments you make on Habla since July are using ZapThreads.

See it live at https://habla.news/dergigi/1680612926599

The component

ZapThreads is available as a web component and can be embedded pretty much anywhere. It works on any client-side framework (via NPM) or website (via a script tag).

You can pass it a bech32-encoded naddr, note or nevent and it will use that as the root for all replies. We call this the anchor event.

Habla for example passes the naddr of the current long-form note:

<zap-threads anchor={naddr} ... />;

But you can also give it a URL and it will work, as nostr supports references to URLs via the r tag.

Here the comments from https://fiatjaf.com/nostr.html (which, of course, are rendered by nocomment on that site):

Likes and zaps for the anchor are displayed by default. Replies are threaded and can be collapsed or expanded. Basic Markdown and nostr references such as profiles, naddrs, tags, etc are all properly rendered.

The host page where the component is embedded can optionally pass an npub attribute to suggest this profile is currently logged in via NIP-07. Otherwise, logging in is possible from within any reply area, as well as replying anonymously.

Reloading a page gets you instant rendering since the component is designed for offline-first. This means that only new data is requested, with the benefit of great UX and minimal demand on relays.

It’s lightweight on clients as well, it weighs under 40kb minified/gzipped including base CSS styles and SVG assets. (For comparison, nocomment is over 240kb).

So what’s up with ZapThreads with… no zaps? That’s coming soon, read on!

Purple pilling the web

It’s early days. Most activity is happening on nostr-native applications. Since the power of the protocol is identity and data portability, why not embed it in different corners of the Internet? The incentive for web publishers to integrate with nostr increases as the network grows. And we help the network effect by surfacing it in unlikely places where we have the chance to onboard new nostriches.

For this reason, ZapThreads offers full control on styling and feature switches. Defaults are reasonable but to make this appealing to any kind of website, easily fine-tuning the component is of utmost importance. This is all work in progress, like the next big feature: multiple language support. I want to make this insanely versatile.

And if we shine purple light on every corner of the Internet, we clearly will take the orange one with it. In addition to integrating with the social layer, publishers can now permissionlessly monetize their content. Zaps will be enabled on anchors and comments, and zap splits will allow sharing sats between authors, hosts, relays, or anyone else.

Tools to automate migration from popular commenting systems such as Disqus, Facebook comments, Wordpress, etc are also on the list. A world-class onboarding UX to go with it, and much more.

My interest clearly goes beyond just threaded comments. I want to create lots of small, lightweight, versatile, easy to integrate web components to permeate the web with notes but also the “other stuff” transmitted over relays.

And the cherry on the cake would be, making Disqus obsolete.

More at https://github.com/fr4nzap/zapthreads . Let me know what you think in the comments below!