pull down to refresh

<bitcoin-qr/> - A Zero-Dependency Web Component for Stylish BIP-21 Payments
720 sats \ 8 comments \ @blu 21 Feb bitcoin
Hey all,
I made a <bitcoin-qr /> HTML web component to help developers create stylish QR Codes for Bitcoin awhile back but never got around to posting it here. It's designed to be dead simple to use and easily integrate in frameworks like Sveltekit or just in pure HTML, and automatically makes BIP-21's when given an onchain address, lightning invoice, or other parameters.
Github Repo: https://github.com/thebrandonlucas/bitcoin-qr More about why I made it: https://blu.cx/words/blog/bitcoin-qr
Check it out and let me know what you think, especially if you have any feedback for improvement or can think of anything that would make it more useful. Cheers!
write
preview
related posts
31 sats \ 0 replies \ @TheMorningStar 15h
Sounds a good idea!
reply
10 sats \ 1 reply \ @anon 18h
hat sounds like a really useful tool for Bitcoin developers! Making QR code generation simple and stylish, while handling BIP-21 automatically, is a solid idea—especially for projects integrating both on-chain and Lightning payments.
How customizable is the component? Can users tweak the styling, colors, or size easily? Also, have you tested it in different frameworks beyond Svelte Kit?
reply
0 sats \ 0 replies \ @blu OP 6h
All of the above! Here you can play with the various styling options easily and see the code it generates.
You can see the comprehensive configuration options at the Github page here.
I've tested it on Sveltekit and in pure HTML (it's been awhile and so I can't quite remember if I've tested it on React), but if developers would find that helpful I'll consider adding a React or Vue example to the repo.
reply
10 sats \ 1 reply \ @teebz 23h
Impeccable timing, going to play around with this over the weekend and let you know how it goes! Great work
reply
0 sats \ 0 replies \ @blu OP 20h
Awesome! Looking forward to seeing what you build!
reply
0 sats \ 0 replies \ @blu OP 19h
Realizing after I made the post that somehow I forgot to add the demo site link! You can play around with the style and data here if you just want to make a quick QR code to copy/screenshot without installing the web component: bitcoin-qr.blu.cx
reply
0 sats \ 1 reply \ @nout 21h
It seems a bit too stylish and I wonder if it will make it harder for camera apps to parse it? Also I prefer the white ~square in the middle of the QR.
reply
77 sats \ 0 replies \ @blu OP 19h
This is just a version that I intentionally styled, but by default it's just a regular old QR code. Here's some examples, the top left is the default:
Checkout the demo site: bitcoin-qr.blu.cx. You can play with all the styling options and see the code there.
Also, if you prefer that the image be embedded in the QR rather than overlaying it, there's a boolean attribute you can set for that: image-embedded
reply