JavaScript QR Code Generator - Browser & Node.js Tutorial

Why JavaScript for QR Codes

Client-Side Generation: No server calls needed for basic codes
Fast Performance: Instant generation in milliseconds
Universal Framework Support: React, Vue, Angular, Svelte all compatible
Multiple Environments: Browser, Node.js, Electron, React Native
Zero Dependencies (Most): Standalone libraries available

Popular JavaScript QR Libraries

Library	Size	Use Case	Browser/Node
qrcode.js	2.8 KB	Browser - lightweight	Browser
qrcode	7 KB	Universal - Node & Browser	Both
qrcode.react	5 KB	React components	Browser
jsQR	3 KB	Reading QR codes	Browser

Browser QR Code Generation

Installation

npm install qrcode

Basic HTML + JavaScript

<html>
<body>
  <div id="qrcode"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode.js/1.0.0/qrcode.min.js"></script>
  <script>
    new QRCode(document.getElementById("qrcode"), "https://example.com");
  </script>
</body>
</html>

With Canvas & Customization

import QRCode from 'qrcode';

QRCode.toCanvas(
  document.getElementById('canvas'),
  'https://qrcodegeneratorjp.com',
  {
    color: {
      dark: '#185FA5',
      light: '#ffffff'
    },
    width: 300,
    errorCorrectionLevel: 'H'
  },
  (error) => {
    if (error) console.error(error);
    console.log('QR code generated!');
  }
);

Download as Image

import QRCode from 'qrcode';

QRCode.toDataURL('https://example.com', {
  errorCorrectionLevel: 'H',
  type: 'image/png',
  quality: 0.95,
  margin: 1,
  color: {
    dark: '#000000',
    light: '#FFFFFF'
  }
})
.then(url => {
  const link = document.createElement('a');
  link.href = url;
  link.download = 'qrcode.png';
  link.click();
});

React Integration

Using qrcode.react

import QRCode from 'qrcode.react';

function MyQRCode() {
  const ref = React.useRef();

  const downloadQR = () => {
    const canvas = ref.current.querySelector('canvas');
    const url = canvas.toDataURL('image/png');
    const link = document.createElement('a');
    link.download = 'qrcode.png';
    link.href = url;
    link.click();
  };

  return (
    <div>
      <QRCode
        ref={ref}
        value="https://example.com"
        size={256}
        bgColor="#ffffff"
        fgColor="#000000"
        level="H"
        includeMargin={true}
      />
      <button onClick={downloadQR}>Download QR</button>
    </div>
  );
}

With State Management

import { useState } from 'react';
import QRCode from 'qrcode.react';

export default function QRGenerator() {
  const [value, setValue] = useState('https://example.com');
  const [color, setColor] = useState('#000000');

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Enter URL or text"
      />
      <input
        type="color"
        value={color}
        onChange={(e) => setColor(e.target.value)}
      />
      <QRCode value={value} fgColor={color} />
    </div>
  );
}

Vue.js Integration

<template>
  <div>
    <input v-model="url" placeholder="Enter URL">
    <qrcode-vue :value="url" :options="options"></qrcode-vue>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue';

export default {
  components: { QrcodeVue },
  data() {
    return {
      url: 'https://example.com',
      options: {
        color: {
          dark: '#185FA5',
          light: '#ffffff'
        },
        width: 300
      }
    };
  }
};
</script>

Node.js Server Usage

Express.js API Endpoint

const express = require('express');
const QRCode = require('qrcode');
const app = express();

app.get('/generate', async (req, res) => {
  try {
    const { data, size = 300 } = req.query;
    
    const qrCode = await QRCode.toDataURL(data, {
      width: size,
      color: {
        dark: '#185FA5',
        light: '#ffffff'
      },
      errorCorrectionLevel: 'H'
    });
    
    res.json({ qrCode });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000, () => console.log('QR API running on :3000'));

Generate & Save PNG

const QRCode = require('qrcode');
const fs = require('fs');

async function generateQR() {
  try {
    await QRCode.toFile('qrcode.png', 'https://example.com', {
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      },
      width: 300,
      margin: 1,
      errorCorrectionLevel: 'H'
    });
    console.log('QR code saved!');
  } catch (error) {
    console.error(error);
  }
}

generateQR();

Advanced Features

Error Correction Levels

L - 7% error correction (indoor use)
M - 15% error correction (standard)
Q - 25% error correction (outdoor use)
H - 30% error correction (print + logo)

Data Types Supported

URLs
Plain text
Email addresses
Phone numbers (tel:+1234567890)
SMS (sms:+1234567890?body=message)
WiFi (WIFI:T:WPA;S:SSID;P:PASSWORD;;)
vCard (contact information)

Performance Optimization

// Memoize generated QR codes in React
import { useMemo } from 'react';

function OptimizedQR({ data }) {
  const qrCode = useMemo(() => data, [data]);
  
  return <QRCode value={qrCode} />;
}

Best Practices

Error Handling: Always wrap generation in try-catch
Size Selection: Minimum 200px for reliable scanning
Color Contrast: Dark on light background works best
Caching: Cache generated QR codes for performance
Testing: Test with multiple QR readers on real devices
Accessibility: Include alt text describing QR purpose

Common Issues & Solutions

Q: QR codes won't scan in certain apps

A: Use error correction level 'H' and test with multiple apps. Some apps have bugs.

Q: Performance issues with large batches

A: Use Worker threads in Node.js or Web Workers in browser for parallel processing.

Q: How to add logo to JavaScript-generated QR?

A: Use Canvas API after generation to overlay logo image.

Q: Can I generate QR codes offline?

A: Yes! JavaScript libraries work completely offline without server dependency.

Generate Your QR Codes

➜ Create QR Codes Now

Related Resources:

QR Code API React QR Code Node.js QR Code Bulk QR Generator