Welcome to a tutorial on how to generate QR code with Javascript. Unfortunately, Javascript does not provide any native means to create QR codes. But thankfully, there are a whole load of libraries on the Internet that we can use today.
To generate QR codes in Javascript:
- Load the QR Code JS library from CDNJS.
- Create a
<div id="qrcode"></div>
HTML container. - To generate the QR Code, simply create a
new QRCode()
object –var qrc = new QRCode(document.getElementById("qrcode"), "http://site.com/");
That’s all for the basics, but let us walk through a few more examples in this guide – Read on!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
JAVASCRIPT QR CODE GENERATION
All right, let us now get into examples of how to generate QR codes using a library called QRCodeJS.
1) BASIC QR CODE
<!-- (A) LOAD QRCODEJS LIBRARY -->
<!-- https://cdnjs.com/libraries/qrcodejs -->
<!-- https://github.com/davidshimjs/qrcodejs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- (B) GENERATE QR CODE HERE -->
<div id="qrcode"></div>
<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<script>
window.addEventListener("load", () => {
var qrc = new QRCode(document.getElementById("qrcode"), "https://code-boxx.com/");
});
</script>
Yep, the basic usage as adapted from the official GitHub page is as easy as that:
- Load the library. Download the entire script from Github and host it on your own, or use the CDN.
- Create an empty
<div>
element to hold the QR code. - Finally, just use
new QRCode(TARGET, TEXT)
to create the QR code.
That’s all!
2) QR CODE OPTIONS
<script>
window.addEventListener("load", () => {
var qrc = new QRCode(document.getElementById("qrcode"), {
text: "https://code-boxx.com/",
width: 100,
height: 100,
colorDark: "#ff0000",
colorLight: "#ffffff",
// QRCode.CorrectLevel.L | QRCode.CorrectLevel.M | QRCode.CorrectLevel.H
correctLevel : QRCode.CorrectLevel.H
});
});
</script>
For you guys who want some customizations, the library does offer a few basic options… Pretty self-explanatory.
3) QR FOR EMAIL, SMS, TEL, VCARD, ETC…
<!-- (B) GENERATE QR CODE HERE -->
Website <div id="qrA"></div>
Tel <div id="qrB"></div>
SMS <div id="qrC"></div>
VCARD <div id="qrD"></div>
<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<!-- https://github.com/zxing/zxing/wiki/Barcode-Contents -->
<script>
window.addEventListener("load", () => {
// (C1) WEBSITE
new QRCode(document.getElementById("qrA"), "https://code-boxx.com/");
// (C2) TEL
new QRCode(document.getElementById("qrB"), "tel:+12345678");
// (C3) SMS
new QRCode(document.getElementById("qrC"), "sms:+12345678");
// (C4) VCARD
let card = "BEGIN:VCARD\r\n";
card += "VERSION:3.0\r\n";
card += "FN:John Doe\r\n";
card += "TEL;TYPE=home:tel:+1-123-456-789";
card += "EMAIL;TYPE=internet:john@doe.com";
new QRCode(document.getElementById("qrD"), card);
});
</script>
Website
Tel
SMS
VCARD
Some beginners probably don’t know this, but QR codes can be used to do a plethora of things. These can be telephone numbers, SMS, email, vcard, event, open an app (deep linking), and even more. I shall leave a link to all the barcode data types in the extra section below.
4) PRINT PART OF THE PAGE WITH QR CODE
<!-- (B) QR CODE HERE -->
<div id="printable">
<h1>FOO BAR!</h1>
<p>This can be a Vcard, event, special offer, or something that you want users to print.</p>
<div id="qrcode"></div>
</div>
<button id="qrprint">PRINT</button>
<!-- (C) CREATE QR CODE ON PAGE LOAD -->
<script>
window.addEventListener("load", () => {
// (C1) CREATE QR
var qrc = new QRCode(document.getElementById("qrcode"), {
text: "https://code-boxx.com/",
width: 100,
height: 100,
colorDark: "#bf2a2a"
});
// (C2) PRINT
document.getElementById("qrprint").onclick = () => {
var printwin = window.open("");
printwin.document.write(document.getElementById("printable").innerHTML);
printwin.stop();
let qr = printwin.document.querySelector("#qrcode img");
qr.addEventListener("load", () => {
printwin.print();
printwin.close();
});
});
});
</script>
This can be a Vcard, event, special offer, or something that you want users to print.
This final example is kind of an extra. Yep, we can print part of a page containing the QR code. This can be pretty useful for stuff like VCARDs, events, discount coupons, and stuff.
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
LINKS & REFERENCES
- QRCode JS – Github
- Barcode Contents – Github
- How To Print A Page Using Javascript – Code Boxx
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!