Generate QR Code In Javascript


2 min read

Generate QR Code In Javascript

Hello everyone πŸ‘‹, this is going to be a very short article where I will show how can we generate a QR Code for any content in JavaScript.

Obviously, I am not going to implement everything from scratch and why should one do that when we have a plethora of useful libraries in JavaScript.

I came across this awesome lightweight library or you can say a simple script qrcodejs. It is very easy to use and is reliable too.


  • Download this zip file: qrcodejs

  • Extract it.

  • Now you can use the qrcode.js and qrcode.min.js file in your project.


Include the qrcode.js file in your HTML file.

<script src="./qrcode.js" defer></script>

Give an id to the div where you want to show the generated QR Code. Here I have used "qrcode" as my id.

<div id="qrcode"></div>

Now we will create an object from the QRCode function. Need to pass the id of the output div which is "qrcode" in this case.

var QR_CODE = new QRCode("qrcode", {
  width: 220,
  height: 220,
  colorDark: "#000000",
  colorLight: "#ffffff",
  correctLevel: QRCode.CorrectLevel.H,

correctLevel: L for low, M for medium, H for high.

Generate QRCode by calling the makeCode method of the QRCode object, which expects the data as its argument.


It will automatically insert the generated QRCode in the div whose id has been provided while creating the QRCode object.


Check out the GitHub Repo.

Try it out here: Live.

Demo Image

Screenshot is taken from Google Lens while scanning.

Thank you for reading πŸ™

If you enjoyed this article or found it helpful, give it a thumbs-up πŸ‘

Feel free to connect πŸ‘‹

Twitter | Instagram | LinkedIn

Did you find this article valuable?

Support Bibek Kakati by becoming a sponsor. Any amount is appreciated!