Can I generate QR codes in the browser without a server?

Yes. Libraries like qrcode and qr-code-styling run entirely in the browser using Canvas or SVG rendering. No server-side processing is needed for basic QR code generation.

How do I generate QR codes in Node.js?

Use the qrcode npm package which supports Node.js natively. It can output QR codes as data URLs, buffers, or files. For styled QR codes, you can call the QRCode.fun API from Node.js using fetch or axios.

Can I add a logo to a QR code in JavaScript?

Yes. The qr-code-styling library supports adding logos natively. Alternatively, use the QRCode.fun API which supports logo overlay with automatic quiet zone handling.

What output formats are supported?

Most JavaScript libraries support PNG (via Canvas) and SVG output. The QRCode.fun API also supports both PNG and SVG with consistent high-quality rendering.

JavaScript QR Code Library

Generate QR Codes with JavaScript

JavaScript is the most popular language for web development. Use libraries like qrcode.js or qr-code-styling to generate QR codes in the browser or Node.js, or call the QRCode.fun API for advanced styling.

Try QR Generator View API Docs

Installation

Install popular JavaScript QR code libraries using your preferred package manager.

npm

npm install qrcode

yarn

yarn add qrcode

npm (styled)

npm install qr-code-styling

Generate QR Codes with JavaScript Libraries

Here are code examples using popular JavaScript QR code libraries to generate QR codes in your projects.

Basic QR Code (Node.js)

const QRCode = require('qrcode')

// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)

// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
  width: 300,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})

Browser Canvas Rendering

import QRCode from 'qrcode'

const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
  width: 256,
  margin: 2,
  color: {
    dark: '#1A2B3C',
    light: '#FFFFFF'
  }
})

Styled QR Code with Logo

import QRCodeStyling from 'qr-code-styling'

const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: 'https://qrcode.fun',
  image: '/logo.png',
  dotsOptions: {
    color: '#1A2B3C',
    type: 'rounded'
  },
  cornersSquareOptions: {
    color: '#8564C3',
    type: 'extra-rounded'
  },
  backgroundOptions: {
    color: '#FFFFFF'
  }
})

qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })

QRCode.fun API

Generate QR Codes via API in JavaScript

Use the QRCode.fun API to generate styled QR codes with custom colors, shapes, and logos from your JavaScript application.

JavaScript API Integration

// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    data: 'https://qrcode.fun',
    width: 300,
    height: 300,
    type: 'png',
    margin: 10,
    dotsOptions: {
      color: '#1A2B3C',
      type: 'rounded'
    },
    cornersSquareOptions: {
      color: '#8564C3',
      type: 'extra-rounded'
    },
    backgroundOptions: {
      color: '#FFFFFF'
    }
  })
})

const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)

Live QR Code Preview

Try generating a QR code with JavaScript right now.

Enter text or URL

QR preview

Native Library vs API

Compare using a JavaScript QR code library directly versus the QRCode.fun API.

Feature	Native Library	QRCode.fun API
Setup complexity	Install package, configure bundler	Single HTTP request
Customization	Varies by library	Full styling: colors, shapes, logos
Offline support	Yes	Requires internet
Maintenance	Update dependencies manually	Always up-to-date
Output formats	PNG, SVG (library-dependent)	PNG, SVG

JavaScript QR Code Use Cases

Common scenarios where JavaScript developers generate QR codes.

Web Applications

Generate QR codes dynamically in React, Vue, Angular, or vanilla JS web apps for sharing links, payments, or authentication.

Node.js Backend

Create QR codes server-side for invoices, tickets, shipping labels, and automated email attachments.

Progressive Web Apps

Add QR code generation to PWAs for offline-capable mobile experiences with scannable codes.

Browser Extensions

Build Chrome or Firefox extensions that generate QR codes for the current page URL or selected text.

Frequently Asked Questions

Common questions about generating QR codes with JavaScript.

The two most popular options are qrcode (lightweight, great for simple QR codes) and qr-code-styling (advanced customization with colors, shapes, and logos). Choose qrcode for simplicity or qr-code-styling for design flexibility.

Start generating QR codes with JavaScript

Use our free online generator for quick QR codes, or integrate the API into your JavaScript project for automated generation.

Open QR Generator Explore API Docs