Skip to content


Repository files navigation

Published on


Web Component for generating QR Codes, using (a fork of) qr.js lib.


Check it live.


npm install webcomponent-qr-code


import 'webcomponent-qr-code'
<qr-code data="hello world!"></qr-code>

Custom element name

import QRCode from 'webcomponent-qr-code/qr-code'

customElements.define('myapp-qrcode', QRCode)
<myapp-qrcode data="hello world!"></myapp-qrcode>

Custom styles

Use the part pseudo-element to style shadow DOM elements:

/* format="png" */
qr-code::part(img) {}

/* format="html" */
qr-code::part(table) {}

/* format="svg" */
qr-code::part(svg) {}


Attribute Options Default Description
data string null The information encoded by the QR code.
format png, html, svg png Format of the QR code rendered inside the component.
modulesize int 5 Size of the modules in pixels.
margin int 4 Margin of the QR code in modules.
unit string px CSS units of the modulesize (Supported for HTML generation only)
ratio int 1 Multiplier for the modulesize. Example: if units is rem and the ratio is 0.0625, a modulesize of 5px will be translated to 0.3125rem. (Supported for HTML generation only)


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


  • v1.2.0 July 12, 2023
    • Support for any CSS unit in HTML generated codes.
  • v1.1.0 November 15, 2022
    • Support for custom styles with the ::part CSS pseudo-element
  • v1.0.0 July 13, 2018
    • Use new API customElements.define
    • Support for a custom element name
    • Keep support for document.register() in /qr-code.es5.js
  • v0.1.9 December 9, 2016
    • Updated docs
  • v0.1.7 April 11, 2015
    • Support for SVG
  • v0.1.6 April 10, 2015
    • Default attributes
    • qr.js removed and used as a dependency
    • Available in NPM
  • v0.1.1 March 31, 2015
    • Framework-agnostic webcomponent (no use of Polymer)
    • Available in Bower
  • v0.0.1 September 18, 2013


MIT License