Nostr Web Client

Saiyasodharan 9mo ago 💬 60

So I wanted a Nostr follow button on my site.

Turns out... it didn’t exist 🤷‍♂️

So I built one. And more.

🛠️Launching "Nostr Components"

→ Embed Nostr posts, profiles & buttons anywhere on the web.

→ Looks good too 😎

Tagline: Take Nostr content beyond Nostr clients – embed it anywhere.

Docs: https://nostr-components.web.app/

Code: https://github.com/saiy2k/nostr-components

Dev story: https://saiy2k.in/2025/02/17/nostr-components/

Big shout out to nostr:nprofile1qyvhwumn8ghj7ctx9ec82unsd3jhyetvv9ujucm0d5hsz9nhwden5te0v4jx2m3wdehhxarj9ekxzmny9uqzpx8mmml8p6vsnhfeak59rwqn9xgs3cpl48m46yt94387rwhqz2yamq3qj9 for helping with storybook documentation.

Thanks to my friends nostr:nprofile1qywhwumn8ghj7emvda3xzmpdwfjkccte9e3k2umr9e68yctyv5qs6amnwvaz7tmwdaejumr0dsqzqscu4986u7yckh0rcgnypladknqxh273e4fwezvcmmg5sd02kqc96xl6s4 and nostr:nprofile1qyxhwumn8ghj7mn0wvhxcmmvqy28wumn8ghj7un9d3shjtnyv9kh2uewd9hsqg86ekh3ee6chhcyehc6r73j5dty5cydf27zfqdzsmluz78cd9f77qk2u0uq for review and feedback.

and of course thanks to nostr:nprofile1qyghwumn8ghj7vf5xqhxvdm69e5k7tcpz4mhxue69uhkzet8d9ejuat50phjummwv5hsqgpm7rrrljungc6q0tuh5hj7ue863q73qlheu4vywtzwhx42a7j9n5zgwjy3 for inspiration, nostr:nprofile1qyxhwumn8ghj7e3h0ghxjme0qyd8wumn8ghj7urewfsk66ty9enxjct5dfskvtnrdakj7qpql2vyh47mk2p0qlsku7hg0vn29faehy9hy34ygaclpn66ukqp3afqta478g for NDK

#nostr #components #followbutton #webcomponents #indieweb #buildinpublic #opensource #nostrDev

Reply to this note

Please Login to reply.

Discussion

Pallab J D Goswami 9mo ago

This is an interesting development

nostr:nevent1qqsg2nrctnk5k25q5dnrm95eeqy6qhcj5vkg9sa8c4pfxpzhr8xvjrcpz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsygqyrr9z6mxkclaufcperwm52qnsywn7m0pc72nqlsak3uqxa7u9avpsgqqqqqqs9da8n3

Purple Painter 9mo ago

nostr:npub1yrkexvt88h6cgd32gdcfm55auuz6rw6c70xj478gcz6lstz5czvs9s77xh

vinney...axkl 9mo ago

Wow very cool! what happens if a visitor doesn't yet have an npub and clicks that "follow me" button?

Saiyasodharan 9mo ago

It requires Nip07 signer (nos2x, Alby browser extension) with npub configured.

If it's not available, it shows this error:

with link to https://www.youtube.com/watch?v=8thRYn14nB0

You can try it at https://saiy2k.in/2025/02/17/nostr-components/

Nice!

No one on the internet has a nip-07 extension. This barrier precludes many folks new to nostr from following you.

In the user flow of a new to nostr user, consider some (perhaps expedited) version of nostr:npub10000003zmk89narqpczy4ff6rnuht2wu05na7kpnh3mak7z2tqzsv8vwqk nstart key creation & onboarding.

At the end of the flow your npub should be part of the newly created contact list.

Nstart link: https://start.njump.me/

Saiyasodharan 9mo ago

"No one on the internet has a nip-07 extension." --> 100%

Thanks for the suggestion. I will look into it and see how the onboarding flow can be improved!

fiatjaf 9mo ago

Maybe you could load https://github.com/fiatjaf/window.nostr.js and display it when window.nostr is not available?

That also comes with an nstart link to create a Nostr account as nostr:npub1zafcms4xya5ap9zr7xxr0jlrtrattwlesytn2s42030lzu0dwlzqpd26k5 wants.

Saiyasodharan 9mo ago

Thanks for sharing. I will look into this.

💪💪

This is the way. Build the world you want to see. 💪

Joseph Hurtado - Founder Granata Consulting 9mo ago

Very cool, and very useful.

I also like the error message when no Nostr / Lightning extension is active in the browser.

However, the video linked points to Alby which no longer has support for an easy LN wallet. I suggest a link to another option that is easy to use. Perhaps Nos2X from nostr:nprofile1qqsrhuxx8l9ex335q7he0f09aej04zpazpl0ne2cgukyawd24mayt8gprdmhxue69uhhyetvv9ujuam9wd6x2unwvf6xxtnrdakj7qg6waehxw309akx7cmtvfhhstnxd9shg6npvchxxmmd9uvahsu4 ?

Saiyasodharan 9mo ago

Yes. I need to update that section to a comprehensive popup, with

1. Separate link to the video, which explains private key, public key, nip07 browser extensions

2. Links to the extension themselves.

My thought process is, when you put nostr stuff in a website, 99% of the viewers won't be aware of Nostr itself. So having a video will help them to get started.

Joseph Hurtado - Founder Granata Consulting 9mo ago

The video itself is a great idea. The only problem was that Alby doesn’t do custody wallets anymore, and running a node isn’t that easy.

Saiyasodharan 9mo ago

oh oh. It's only self-hosted now! Just noticing it. Didn't follow up with alby lately.

Thanks for pointing it out!

Joseph Hurtado - Founder Granata Consulting 9mo ago

You are welcome. Thanks for the Sats!

TextNow十𝟭𝟳𝟬𝟳𝟯𝟮𝟵𝟴𝟱𝟳𝟱 8mo ago

For those looking to reach me personally for all things related Bitcoin or Nostr , you can connect with me on (simpleX chat app) using my invitation link below 👇👉

https://simplex.chat/contact#/?v=2-7&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2Folen9O3RD88fUzzrNSP7TE-sXk1qVlTa%23%2F%3Fv%3D1-3%26dh%3DMCowBQYDK2VuAyEA_PYNjTgKUwEnK5b3I0FGv-HtOdYzlesWwbJtcIwDxkg%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion

Saiyasodharan 9mo ago

Appreciate your feedback :-)

Thank you for doing this. I wanted to display my Nostr profile on my homepage, but I didn’t like the result and ended up hard-coding the info for simplicity. I will play with your web components and provide feedback, if any!

Also, custom zap buttons would be great!

Saiyasodharan 9mo ago

Spam tagging for reach 😑

nostr:nprofile1qy88wumn8ghj7mn0wvhxcmmv9uq3qamnwvaz7tmwdaehgu3wd4hk6tcqyprqcf0xst760qet2tglytfay2e3wmvh9asdehpjztkceyh0s5r9cpvx58v nostr:nprofile1qy2hwumn8ghj7mn0wd68ytndv9kxjm3wdahxcqg5waehxw309ahx7um5wfekzarkvyhxuet5qqsw4v882mfjhq9u63j08kzyhqzqxqc8tgf740p4nxnk9jdv02u37ncdhu7e3 nostr:nprofile1qyv8wumn8ghj7urjv4kkjatd9ec8y6tdv9kzumn9wsq3vamnwvaz7tmjv4kxz7fwwpexjmtpdshxuet5qqsqfjg4mth7uwp307nng3z2em3ep2pxnljczzezg8j7dhf58ha7ejgqgzx3h nostr:nprofile1qyfhwue69uhhyetvv9uju6nzx56jucm0d5qs6amnwvaz7tmwdaejumr0dsqzqvhpsfmr23gwhv795lgjc8uw0v44z3pe4sg2vlh08k0an3wx3cj96l2ln2 nostr:nprofile1qyw8wumn8ghj7un9d3shjtnzd96xxmmfdecxzunt9e3k7mf0qy2hwumn8ghj7un9d3shjtn4w3ux7tn0dejj7qpqutx00neqgqln72j22kej3ux7803c2k986henvvha4thuwfkper4sau8ykj nostr:nprofile1qy28wue69uhnzv3h9cczuvpwxyargwpk8yhsz3rhwvaz7tmed3c8qarfxaj8s6mrw96kvef5dve8wdrsvve8vvehwamxx7rnwejnw6n0d3axu6t3w93kg7tfwechqutvv5ekc6ty9ehku6t0dchsqgrwg6zz9hahfftnsup23q3mnv5pdz46hpj4l2ktdpfu6rhpthhwjv0us2s2 nostr:nprofile1qyghwumn8ghj7mn0wd68ytnhd9hx2tcpz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsqg8c6ssjffewmzvfvfr6myf0glwhdtrtdnw3plsh3a0qft8745x55gpvx32y nostr:nprofile1qyt8wue69uhh2mtzwfjkctnvda3kzmp6xsurgwqpz4mhxue69uhk2er9dchxummnw3ezumrpdejqqgxy3c5lqj6g9nqpeg0ea7xgdmurrrq9nc8fx5er2930pq8jdc2vzyu7yza6 nostr:nprofile1qyfhwumn8ghj7ctvvahjuat50phjummwv5q32amnwvaz7tm9v3jkutnwdaehgu3wd3skueqqyzu7we2xhgry2mknq8v7227yn7jguu9xhu3g90n6rtnjj3mpyq3ackdvvhl nostr:nprofile1qy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshsz8thwden5te0dehhxarj9e3xjarrda5kuetj9eek7cmfv9kz7qpq7u5dneh8qjp43ecfxr6u5e9sjamsmxyuekrg2nlxrrk6nj9rsyrquyd27a nostr:nprofile1qyghwue69uhh2mtzwfjkcw358q6rstcpz4mhxue69uhkymrpwd68ytnxxaazu7re0ghsqgpwm082d9x3v33fs499ykp5tr7km9jmzc0rcj9405a07qv5q4vgsst70gfp nostr:nprofile1qyxhwumn8ghj7mn0wvhxcmmvqyehwumn8ghj7mnhvvh8qunfd4skctnwv46z7ctewe4xcetfd3khsvrpdsmk5vnsw96rydr3v4jrz73hvyu8xqpqsg6plzptd64u62a878hep2kev88swjh3tw00gjsfl8f237lmu63q8dzj6n nostr:nprofile1qyxhwumn8ghj7mn0wvhxcmmvqywhwumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wsqzp382htsmu08k277ps40wqhnfm60st89h5pvjyutghq9cjasuh38q7t6dtc nostr:nprofile1qyxhwumn8ghj7mn0wvhxcmmvqyw8wumn8ghj7mn0wd68ytnzd96xxmmfdejhytnnda3kjctvqqsfrjd9ux5hgsg5cmlz6cdwfh5zv2024g8m2t6g9zqf83l8uqm0svsjgnxal nostr:nprofile1qythwumn8ghj7cnfw33k76twv4ezuum0vd5kzmp0qy88wumn8ghj7mn0wvhxcmmv9uqzqe4a3lknty8j9x00qy50trt8s7fgne4fnfnqaql2m9874dmqdlghgm4j4w nostr:nprofile1qy2hwumn8ghj7etyv4hzumn0wd68ytnvv9hxgqgdwaehxw309ahx7uewd3hkcqpqs9etjgzjglwlaxdhsveq0qksxyh6xpdpn8ajh69ruetrug957r3qf4ggfm nostr:nprofile1qyx8wumn8ghj7cnjvghxjmcpz4mhxue69uhk2er9dchxummnw3ezumrpdejqqg9lydmwz7ayasnf6y8uext2gartg5g4905sx8ay3e6920w725ntecs6fw7u nostr:nprofile1qy0hwumn8ghj7cnfw33k76twd4shs6tdv9kxjum5wvhx7mnvd9hx2qg4waehxw309ajkgetw9ehx7um5wghxcctwvsqzq3e0gs8jnmued6f2rp4c6vs07xqvs4vs8zpwt82smcdch4txjvq76kl2yj

Guy Swann 9mo ago

I was about to be really annoyed for being tagged… but this is acceptable.

Saiyasodharan 9mo ago

🙏

Sacred Peak 9mo ago

I need a WP plugin for this

Saiyasodharan 9mo ago

Yes. It's on roadmap.

But for now, I will update the documentation with steps to integrate this in WP.

and DM you tomorrow.

Sacred Peak 9mo ago

wow. thanks!

Saiyasodharan 9mo ago

https://github.com/saiy2k/nostr-components/tree/main?tab=readme-ov-file#5-wordpress-integration

Wordpress integration steps, for now.

Plugin will come later

fiatjaf 9mo ago

The follow-me button is a good idea, I'll copy it for https://web.nostr.technology/.

Saiyasodharan 9mo ago

Thanks :-)

Tried looking for the repo of https://web.nostr.technology/

and the source link in top nav bar points me to

https://github.com/fiatjaf/nostr-web-components

which is broken.

Do you think it will be better If I contribute these components to your repo, rather than duplicating it as a separate project?

If yes, I will be happy to do that :-)

Saiyasodharan 9mo ago

https://git.fiatjaf.com/nostr-web-components

Guess, this the right repo.

fiatjaf 9mo ago

Fixed the source link, it's https://git.fiatjaf.com/nostr-web-components.

fiatjaf 9mo ago

No need to bother, my approach is very different than yours and it's good to have both.

Saiyasodharan 9mo ago

okay. Thanks

BitPopArt 9mo ago

How to add to wordpress?

Saiyasodharan 9mo ago

Will add instructions later today and will DM you :-)

BitPopArt 9mo ago

Cool. Thanks!

Saiyasodharan 9mo ago

https://github.com/saiy2k/nostr-components/tree/main?tab=readme-ov-file#5-wordpress-integration

Wordpress integration steps

Account deleted 9mo ago

I can certainly appreciate this, I just wish we had fully functional, interoperable clients first, hehe.

Saiyasodharan 9mo ago

Thanks. We came a long way in past 2-3 years :-)

Next 2-3 years is gonna be mind-blowing!

Account deleted 9mo ago

Agreed, I’m excited for it.

TextNow十𝟭𝟳𝟬𝟳𝟯𝟮𝟵𝟴𝟱𝟳𝟱 8mo ago

For those looking to reach me personally for all things related Bitcoin or Nostr , you can connect with me on (simpleX chat app) using my invitation link below 👇👉

https://simplex.chat/contact#/?v=2-7&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2Folen9O3RD88fUzzrNSP7TE-sXk1qVlTa%23%2F%3Fv%3D1-3%26dh%3DMCowBQYDK2VuAyEA_PYNjTgKUwEnK5b3I0FGv-HtOdYzlesWwbJtcIwDxkg%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion

Nicole Casanova 9mo ago

Yes. Many ideas. Great to see you executing.

Saiyasodharan 9mo ago

Thanks!

TextNow十𝟭𝟳𝟬𝟳𝟯𝟮𝟵𝟴𝟱𝟳𝟱 8mo ago

For those looking to reach me personally for all things related Bitcoin or Nostr , you can connect with me on (simpleX chat app) using my invitation link below 👇👉

https://simplex.chat/contact#/?v=2-7&smp=smp%3A%2F%2F0YuTwO05YJWS8rkjn9eLJDjQhFKvIYd8d4xG8X1blIU%3D%40smp8.simplex.im%2Folen9O3RD88fUzzrNSP7TE-sXk1qVlTa%23%2F%3Fv%3D1-3%26dh%3DMCowBQYDK2VuAyEA_PYNjTgKUwEnK5b3I0FGv-HtOdYzlesWwbJtcIwDxkg%253D%26srv%3Dbeccx4yfxxbvyhqypaavemqurytl6hozr47wfc7uuecacjqdvwpw2xid.onion

Bitcoin Sikho 9mo ago

well done 👏🏽

Saiyasodharan 9mo ago

Thanks!

cryptoshi2k21.bitcoin 9mo ago

Fren this is fricking awesome 👍 thanks for doing this for all of us

Saiyasodharan 9mo ago

Thanks! Appreciate your kind words very much :-)

brugeman 9mo ago 💬 2

👀

nostr:nevent1qqsg2nrctnk5k25q5dnrm95eeqy6qhcj5vkg9sa8c4pfxpzhr8xvjrcpz4mhxue69uhkummnw3ezummcw3ezuer9wchsygqyrr9z6mxkclaufcperwm52qnsywn7m0pc72nqlsak3uqxa7u9avpsgqqqqqqssg08vh

Keith Meola 9mo ago

This is awesome! Can't wait to implement when I have a moment

Saiyasodharan 9mo ago

Thanks. Love to hear any feedback that you have while implementing this

EvoLensArt 9mo ago

Bravo! I hope I need this soon.

I’m working on a book that’s bitcoin-focused, but a fair amount of NOSTR is in there, too.

When I do my own website, i want it to be populated with NOSTR notes as much as possible

Saiyasodharan 9mo ago

Amazing. Love to help you me any customization, new components that you need when you do this.

Please DM me anytime.

Jordi Llonch Esteve 9mo ago

nostr:nprofile1qqsx45yrjtgm4glklaafgz0z4309gs6cwfja3d99s8rqvlvgagcptpqprpmhxue69uhhqun9d45h2mfwwpexjmtpdshxuet54gjttu

DeveRoSt 9mo ago 💬 1

Das ist tatsächlich sehr cool! Werde ich absehbar verwenden!

nostr:nevent1qqsg2nrctnk5k25q5dnrm95eeqy6qhcj5vkg9sa8c4pfxpzhr8xvjrcpzamhxue69uhhyetvv9ujuurjd9kkzmpwdejhgtczyqzp3j3ddntv077yuqu3hd69qfcz8fldhsu09fs0cwmg7qrwlwz7kqcyqqqqqqg3uy7tw

DeveRoSt 9mo ago

An npm library would be nice, so it could be easily installed and used in an angular project.

Saiyasodharan 9mo ago

Yeah. That is planned :-)

⚡⚡⚡⚡⚡❤️❤️❤️❤️

Yay! Most needed one for me! Awesome work Mr.Stardust 🔥

Yo, check it out. A very cool library which you can use to embed your Nostr profile, follow button and post widgets in your website without any hassle!

Great work nostr:nprofile1qyx8wumn8ghj7cnjvghxjmcpp4mhxue69uhkyunz9e5k7tcqyqzp3j3ddntv077yuqu3hd69qfcz8fldhsu09fs0cwmg7qrwlwz7k6e9l4p 🔥

nostr:nevent1qvzqqqqqqypzqpqcegkke4k8l0zwqwgmkazsyupr5lkmcw8j5c8u8d50qph0hp0tqyt8wumn8ghj7etyv4hzumn0wd68ytnvv9hxgtcpzpmhxue69uhkumewwd68ytnrwghszrnhwden5te0dehhxtnvdakz7qpqs4x8sh8dfv4gpgmx8ktfnjqf5p039gevstp6032zjvz9wxwvey8shw3xzm

nostr:npub18fcuy92xafm7fa7v3elx7rgy4vggrv3cpg4w4rhlghsytjr9leps6uyvlu

DeveRoSt 4mo ago

Thats it, found it my self 😁 nostr:nevent1qqsg2nrctnk5k25q5dnrm95eeqy6qhcj5vkg9sa8c4pfxpzhr8xvjrcpzamhxue69uhhyetvv9ujuurjd9kkzmpwdejhgtczyqzp3j3ddntv077yuqu3hd69qfcz8fldhsu09fs0cwmg7qrwlwz7kqcyqqqqqqg3uy7tw