Let’s build QR Code Generator in Under 10 Minutes

Let’s build QR Code Generator in Under 10 Minutes
November 28, 2025 | Read time: 4 minutes

Escape the vendor-locked in edge-runtime!

Sevalla is the home to your web projects. Host and manage your applications, databases, and static sites in a single, intuitive platform.

Try Sevalla with $50 credit now

Sponsor this newsletter to reach 9,000+ active developers

Today I’m going to show you how to create the cleanest, fastest QR code generator possible.

Here’s the step-by-step guide.

Step 1: Create the file

Open your favorite code editor (VS Code, Notepad, Sublime, whatever) and create a new HTML file.

Step 2: Add the basic HTML skeleton

Paste this into the file:

                            
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>QR Code Generator</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
</head>
<body>

</body>
</html>

That single <script> line pulls in QRious – a tiny, pure-JavaScript QR code library (≈8 KB gzipped). No installation required.

Step 3: Add the user interface (four elements only)

Inside the <body>, add:

                            
<input type="text" id="inputText" value="https://markodenic.tech" autofocus>
<br><br>

<select id="sizeSelect">
  <option value="150">Small (150px)</option>
  <option value="200" selected>Medium (200px)</option>
  <option value="300">Large (300px)</option>
  <option value="400">Extra Large (400px)</option>
</select>
<br><br>

<canvas id="qrCanvas"></canvas>
<br><br>

<button id="downloadButton">Download as PNG</button>

That’s it for markup:

  • One text field (pre-filled with my site so you see it working instantly)
  • One dropdown for size
  • One canvas where the magic happens
  • One download button

Step 4: Wire everything up with JavaScript

Add this script just before the closing </body> tag:

                            
<script>
  const textInput = document.getElementById('inputText');
  const qrCanvas = document.getElementById('qrCanvas');
  const sizeSelect = document.getElementById('sizeSelect');
  const downloadButton = document.getElementById('downloadButton');

  function generateQR() {
    const text = textInput.value.trim();
    if (!text) return; // do nothing if empty

    const size = parseInt(sizeSelect.value);

    qrCanvas.width  = size;
    qrCanvas.height = size;

    new QRious({
      element: qrCanvas,
      value: text,
      size: size,
      background: '#ffffff',
      foreground: '#000000'
    });

    downloadButton.style.display = 'block';
  }

  textInput.addEventListener('input', () => setTimeout(generateQR, 300));

  sizeSelect.addEventListener('change', generateQR);

  downloadButton.addEventListener('click', () => {
    const link = document.createElement('a');
    link.href = qrCanvas.toDataURL('image/png');
    link.download = 'qrcode.png';
    link.click();
  });

  generateQR();
</script>

Step 5: Save and test

Here’s the full code:

                            
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QR Code Generator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
</head>
<body>

<input type="text" id="inputText" value="https://markodenic.tech" autofocus>
<br><br>

<select id="sizeSelect">
  <option value="150">Small (150px)</option>
  <option value="200" selected>Medium (200px)</option>
  <option value="300">Large (300px)</option>
  <option value="400">Extra Large (400px)</option>
</select>
<br><br>

<canvas id="qrCanvas"></canvas>
<br><br>

<button id="downloadButton">Download as PNG</button>

<script>
  const textInput      = document.getElementById('inputText');
  const qrCanvas       = document.getElementById('qrCanvas');
  const sizeSelect     = document.getElementById('sizeSelect');
  const downloadButton = document.getElementById('downloadButton');

  function generateQR() {
    const text = textInput.value.trim();
    if (!text) return;

    const size = parseInt(sizeSelect.value);

    qrCanvas.width  = size;
    qrCanvas.height = size;

    new QRious({
      element: qrCanvas,
      value: text,
      size: size,
      background: '#ffffff',
      foreground: '#000000'
    });

    downloadButton.style.display = 'block';
  }

  textInput.addEventListener('input', () => setTimeout(generateQR, 300));
  sizeSelect.addEventListener('change', generateQR);

  downloadButton.addEventListener('click', () => {
    const link = document.createElement('a');
    link.href = qrCanvas.toDataURL('image/png');
    link.download = 'qrcode.png';
    link.click();
  });

  generateQR();
</script>

</body>
</html>

If you want a more real-life example, I prepared this demo: QR Code Generator Demo.

Check out the code here: QR Code Demo Source Code.

Further resources: QR Code Generator

Happy coding!