TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Client-side QR code generator with SVG output

176 pointsby kentbrew9 months ago

14 comments

toddmorey9 months ago
One of my favorite components from the open source web components library Shoelace is the QR code generator: <a href="https:&#x2F;&#x2F;shoelace.style&#x2F;components&#x2F;qr-code" rel="nofollow">https:&#x2F;&#x2F;shoelace.style&#x2F;components&#x2F;qr-code</a>
boomskats9 months ago
This looks great! Wish I had it a few months ago instead of having to use qr-code-styling[0] which was a bit of a pain.<p>I remember it was around the same time that Obsidian got native callouts, so my notes for that project are all colourful &amp; contain valuable admonitions like this:<p>```<p>&gt; [!todo]<p>&gt; That feeling when you&#x27;re wasting hours of your life trying to make something you know is abandonware work just because it looks nice. There should be a word for that feeling. In Danish or Japanese. Or German.<p>```<p>[0]: <a href="https:&#x2F;&#x2F;github.com&#x2F;kozakdenys&#x2F;qr-code-styling">https:&#x2F;&#x2F;github.com&#x2F;kozakdenys&#x2F;qr-code-styling</a>
评论 #41415045 未加载
评论 #41413977 未加载
评论 #41416391 未加载
pikminguy9 months ago
If you&#x27;re looking for a non web QR generator with lots of options try Zint. <a href="https:&#x2F;&#x2F;www.zint.org.uk&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.zint.org.uk&#x2F;</a> It&#x27;s the only option I have found that doesn&#x27;t seem to lock out any features. You want to control the error correction? Got it. Render in color? No problem. Batch convert 1000 lines of text into 1000 individual images. It took less than a second. It even does Datamatrix and other non QR encodings.
declan_roberts9 months ago
USE THIS SOFTWARE AND LEARN FROM MY MISTAKE:<p>We made a cute Christmas video to include in our card this year. My wife created a QR code from a random website and included it in the card as a picture. It linked to our video. We sent all of the cards out. People loved it.<p>... except we got an email from the QR code company about a week before Christmas. We went over our &quot;free&quot; click (the QR code went through their URL shortener). If we wanted to keep the QR code active we had to pay $20&#x2F;mo.<p>We got absolutely fleeced. Never again. Control the URL and make the QR image yourself.
评论 #41415026 未加载
评论 #41415930 未加载
评论 #41414313 未加载
nayuki9 months ago
Thank you for building this wonderful UI on top of my library!
KTibow9 months ago
If you stumbled upon this looking for the smallest QR code JS library, it&#x27;s probably LeanQR [0]. It&#x27;s under 10kb minified and 5kb compressed.<p>[0] <a href="https:&#x2F;&#x2F;qr.davidje13.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;qr.davidje13.com&#x2F;</a>
评论 #41414087 未加载
Techbrunch9 months ago
I found that Anthony Fu&#x27;s QR Toolkit is a great alternative: <a href="https:&#x2F;&#x2F;qrcode.antfu.me&#x2F;" rel="nofollow">https:&#x2F;&#x2F;qrcode.antfu.me&#x2F;</a>
davchana9 months ago
Pretty great example, but I was bummed to see that Error Level is missing. I like to create easy codes with low error correction.
评论 #41416963 未加载
jillesvangurp9 months ago
I&#x27;ve been using this library: <a href="https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;qrcode" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;qrcode</a>.<p>Works great and it does svg too. There are a few alternatives to this around as well but this one seems good enough.
butz9 months ago
Isn&#x27;t this one of those rare occasions where bitmap file format is more optimal for storing output?
评论 #41415070 未加载
评论 #41414769 未加载
Narhzih9 months ago
You can try <a href="https:&#x2F;&#x2F;app.y.gy" rel="nofollow">https:&#x2F;&#x2F;app.y.gy</a>. It&#x27;s not a library, but they have an API for link-shortening and QR Code Generation.
kentbrew9 months ago
&quot;The demo on this page combines Project Nayuki’s QR Code generator library (a multi-language open source project that can, among other things, perform the conversion of text into raw QR code data) with my own QRSVG project, which can turn a QR-like two-dimensional boolean data map into an efficient vector description of its own visualization by tracing the contours of contiguous shapes.&quot;
the_arun9 months ago
For some reason in my phone camera - &quot;Open in browser&quot; is not showing up if background is dark.
评论 #41416850 未加载
评论 #41414899 未加载
eaq9 months ago
For local use, this Python library can generate SVGs with QR codes: <a href="https:&#x2F;&#x2F;github.com&#x2F;lincolnloop&#x2F;python-qrcode">https:&#x2F;&#x2F;github.com&#x2F;lincolnloop&#x2F;python-qrcode</a>