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.
Installation
Install popular JavaScript QR code libraries using your preferred package manager.
npm install qrcodeyarn add qrcodenpm install qr-code-stylingGenerate 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' })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.
// 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.
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.
JavaScript QR Code Ecosystem Deep Dive
JavaScript has the richest QR code ecosystem of any language, spanning browser, server, and hybrid environments.
React, Vue & Angular Integration
Modern frontend frameworks each have dedicated QR code wrapper components. react-qr-code provides a declarative React component with SVG rendering. vue-qrcode offers a Vue 3 composable with reactive data binding. For Angular, angularx-qrcode wraps QR generation in a directive. These framework-specific wrappers handle lifecycle management, reactivity, and SSR compatibility automatically — making QR generation feel native to each framework.
Server-Side Rendering (SSR) & Next.js
When using Next.js, Nuxt, or other SSR frameworks, QR code generation can happen either server-side during render or client-side after hydration. Server-side generation with the qrcode npm package produces static SVG strings that embed directly into HTML — ideal for SEO and fast initial page loads. Client-side generation with qr-code-styling enables interactive customization after the page loads. The QRCode.fun API works from both environments via fetch.
npm Ecosystem & Bundle Size Considerations
The JavaScript QR code ecosystem offers libraries at different bundle-size tradeoffs. The core qrcode package is ~33KB minified and supports both Canvas and SVG. qr-code-styling adds advanced visual customization at ~65KB. For ultra-lightweight needs, qrcode-generator is under 10KB. When choosing a library, consider your bundle budget: a landing page might prefer the API approach (zero bundle cost), while an offline-capable PWA benefits from a bundled library.
Frequently Asked Questions
Common questions about generating QR codes with JavaScript.
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.