qrcode (JavaScript) Examples You Can Edit and Run
5 small qrcode (JavaScript) examples written by AgentGid from the official docs, one feature each. Every one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. The screenshots are taken from the same code by our server, which also checks that each example starts without errors.
qrcode (JavaScript): usage and stats 115 AI-built projects use it
Drawing a QR code on a canvas with qrcodeType in the box on the right: the QR code is redrawn on every keystroke.
QR code as a data URL with qrcodeChange the text passed to generateQR and run it again to get a new image and data URL.
Error correction levels in qrcodeCompare the four codes and their labels: the same text needs a higher version at level H than at level L.
Setting the QR code version in qrcodeAll four codes hold the same text; higher versions just add more modules.
Encoding modes and segments in qrcodeThe left label lists the modes auto mode chose; the right one lists the segments you passed in.
Try them all in one place
import QRCode from 'qrcode'
const root = document.getElementById('root')
root.style.cssText = 'display:flex;align-items:center;justify-content:center;gap:24px;height:100%;font:14px system-ui,sans-serif;color:#e5e7eb'
// Small helper to create an element with inline styles and text
const el = (tag, css, text) => Object.assign(document.createElement(tag), { style: css || '', textContent: text || '' })
// The QR code is drawn at its natural size, then scaled up crisply with CSS
const canvas = el('canvas', 'width:200px;height:200px;image-rendering:pixelated;border-radius:8px')
const side = el('div', 'display:grid;gap:10px;width:240px')
const input = el('input', 'padding:8px;border-radius:6px;border:1px solid #444;background:#1f1f1f;color:#fff')
input.value = 'sample text'
const status = el('div', 'color:#86efac')
side.append(el('b', '', 'Text to encode'), input, status)
root.append(canvas, side)
function draw () {
QRCode.toCanvas(canvas, input.value || ' ', function (error) {
if (error) console.error(error)
status.textContent = error ? 'error: ' + error.message : 'success! drawn on the canvas'
canvas.style.width = canvas.style.height = '200px'
})
}
input.addEventListener('input', draw)
draw()
Type in the box on the right: the QR code is redrawn on every keystroke. Code written by AgentGid [1]. How it works, with a screenshot →
Type in the box on the right: the QR code is redrawn on every keystroke. Code written by AgentGid [1]. How it works, with a screenshot →Change the text passed to generateQR and run it again to get a new image and data URL. Code written by AgentGid [1]. How it works, with a screenshot →Compare the four codes and their labels: the same text needs a higher version at level H than at level L. Code written by AgentGid [1]. How it works, with a screenshot →All four codes hold the same text; higher versions just add more modules. Code written by AgentGid [1]. How it works, with a screenshot →The left label lists the modes auto mode chose; the right one lists the segments you passed in. Code written by AgentGid [1]. How it works, with a screenshot →Checked Oct 12, 2026: each example starts without errors in Chromium with qrcode 1.5.4. Needs WebGL.
Sources
Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.