A QR Code is a type of two-dimensional barcode that representing data in a visual, machine-readable form.

QR codes are ideal components for programmatically encoding data. They are often cused to ontain data for a locator, identifier, or tracker that points to a website or application.

QR Code rendering modes

QR Codes can be rendered as an <svg> and <canvas> element.
Using the svg rendering mode is recommended as the QR Code doesn't lose quality when it is zoomed.

QR Code Encoding Modes

The qrcode element supports the following encoding modes:

  • Numeric
  • Alphanumeric
  • Byte / Binary
  • Kanji

QR Code Error Correction Levels

The QR Code component supports all four error correction levels: L, M, Q, and H.
The higher the Error Correction Level, the higher is the amount of data that can be retrieved if part of the QR Code is damaged or hidden.

L level encoding of "Hello world"

H level encoding of "Hello world"

QR Code Embed Image

When the Error Correction Level is sufficiently high, it is possible to embed an Image inside the QR Code.
The maximum size of the image depends on the Error Correction Level and the QR Code value.


The QR Code's color, background color and square dimensions can be customized by their respective properties.

The label of the QR Code can be set to visible or hidden with displayLabel. Its color, font, size, margins and position can be customized by their respective properties.


Rock Concert

Rock Concert

For more information:

7-day Spa Vacation

Spa massage

For more information:

10-day Skiing Holiday

Skiing village

For more information: