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!
Sounds a good idea!
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.
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
booleanattribute you can set for that:image-embeddedhat 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?
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.
Impeccable timing, going to play around with this over the weekend and let you know how it goes! Great work
Awesome! Looking forward to seeing what you build!
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