Skip to content
html
<div id="qr-code"></div>

<script type="text/javascript">
new QRCode(document.getElementById("qr-code"), "https://stacksjs.org");
</script>

If you want to customize the QR code, you can pass in an options object:

html
<div id="qr-code"></div>

<script type="text/javascript">
const options = {
  width: 2,
  height: 100,
  format: 'auto',
  displayValue: true,
  fontOptions: '',
  font: 'monospace',
  text: undefined,
  textAlign: 'center',
  textPosition: 'bottom',
  textMargin: 2,
  fontSize: 20,
  background: '#ffffff',
  lineColor: '#000000',
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid() { },
}

var qrCode = new QRCode(document.getElementById("qr-code"), options);
</script>

You can also use methods to interact with the QR code:

ts
qrCode.clear() // clear the code
qrCode.makeCode('https://docs.stacksjs.org') // create another code

Released under the MIT License.