Generate QR Code With JavaScript

June 27, 2023 by Andreas Wik

Generate QR code JavaScript

There are numerous JavaScript libraries out there for generating QR codes. Let’s take a look at one of them; qrcode.js.

It’s very straightforward, and while it gives you quite a few options you can tinker with, simply generating a QR with default settings is just one line of code.

First, let’s grab qrcode.js from cdnjs.

<script src=""></script>


Now, we create our QRcode object, passing it the ID of the element where you want it to be created, in this case qr-result.

const myQrCode = new QRCode("qr-result");


All we need to do to generate a QR code is to call makeCode(), passing the URL of our choice to it.



There are a number of options you can also tinker with. As you can see in the CodePen below, I have set the two colors to be used for the QR codes; colorDark and colorLight. I have also set the width and height to 200 px.

const myQrCode = new QRCode("qr-result", {
    width: 200,
    height: 200,
    colorDark : "#000000",
    colorLight : "#ffffe3"


See the Pen Untitled by Andreas Wik (@andreaswik) on CodePen.

Share this article

Recommended articles