Manuele Capacci




QRGen is Framer component to easily generate QR codes built by Manuele Capacci

QRGen is based on ‘node-qrcode’ npm module and exposes several configuration options. You can choose a color for background and foreground and padding. As well as the QR Code symbol version, the error correction level, and mask pattern.

Size of the QRCode is derived from the component itself, so you can simply resize it an see the graphic change accordingly.


The player includes the following properties.

Property Type Description Default
Text text The data to ember in. https://ourfir.es
Version number QR Code Symbol Version. 4
Error Correction enum Level of error correction. medium
Mask Pattern number Pattern to use. 4
Padding number Padding around the QR Code. 4
Foreground color A color for the Code Elements. #000000FF
Background color Color of the background. #FFFFFFFF

Follow me on Twitter for updates on the component or contacting me