</> ConvertAtlas Developer Tools
Bootstrap 5 · Intermediate

Live QR Code Generator

A QR code that regenerates live as you type a URL, via QRCode.js.

Requires Bootstrap 5, QRCode.js. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<div class="card border-0 shadow-sm" style="max-width:320px"><div class="card-body text-center"><input class="form-control form-control-sm mb-2" id="qrInput" value="https://convertatlas.org"><div id="qrBox" class="d-inline-block"></div></div></div>
var box=document.getElementById('qrBox'),inp=document.getElementById('qrInput'),qr=new QRCode(box,{text:inp.value,width:140,height:140});
inp.addEventListener('input',function(){qr.clear();qr.makeCode(inp.value||' ')});
Free to use.This component uses Bootstrap 5, QRCode.js (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.