QRcode — Smart UI JavaScript API

QRcode — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>QRcode - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-qrcode id="demo-qrcode"></smart-qrcode>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.qrcode.js';

    const el = document.getElementById('demo-qrcode');
    if (el) {

      el.value = 'https://www.htmlelements.com';
      el.labelPosition = 'bottom';
      el.showLabel = true;
      el.errorLevel = 'quartile';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: QRcode   Framework: JavaScript   Selector: smart-qrcode

API counts: 19 properties, 4 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: export(), getDataURL(), getDataURLAsync(), isValid()

Common events: invalid

Module hint: smart-webcomponents/source/modules/smart.qrcode.js

QR Codes encode text values in a two-dimensional pattern.

Class

QRcode

QRcode

QR Codes encode text values in a two-dimensional pattern.

Selector

smart-qrcode

Quick picks

value

Properties

BbackgroundColorSpecifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.
DdisplayLabelDetermines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.
EembedImageEmbeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.
EerrorLevelSpecifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.
HheightSpecifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.
IimageBackgroundColorSpecifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.
IimageHeightSpecifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.
IimageWidthSpecifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.
LlabelColorSpecifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.
LlabelFontSpecifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.
LlabelFontSizeSpecifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).
LlabelMarginBottomSpecifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.
LlabelMarginTopSpecifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.
LlabelPositionSpecifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image.
LlineColorSpecifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.
RrenderAsSpecifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application.
SsquareWidthSpecifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.
VvalueGets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.
WwidthSpecifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.

Events

IinvalidThis event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.

Methods

EexportExports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.
GgetDataURLRetrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.
GgetDataURLAsyncRetrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.
IisValidRetrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.

Properties

backgroundColorSpecifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.string

Specifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design.

Default value

"white"

Examples

Markup and runtime examples for backgroundColor:

HTML:

<smart-qrcode background-color="white"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.backgroundColor = "yellow";

Read the current value:

const el = document.querySelector('smart-qrcode');
const backgroundColor = el.backgroundColor;

displayLabelDetermines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.boolean

Determines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden.

Default value

false

Examples

Markup and runtime examples for displayLabel:

HTML attribute:

<smart-qrcode display-label></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.displayLabel = true;

Read the current value:

const el = document.querySelector('smart-qrcode');
const displayLabel = el.displayLabel;

embedImageEmbeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.string

Embeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data.

Default value

""

Examples

Markup and runtime examples for embedImage:

HTML:

<smart-qrcode embed-image=""></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.embedImage = "";

Read the current value:

const el = document.querySelector('smart-qrcode');
const embedImage = el.embedImage;

errorLevelSpecifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.string

Specifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size.

Default value

"H"

Examples

Markup and runtime examples for errorLevel:

HTML:

<smart-qrcode error-level="H"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.errorLevel = "L";

Read the current value:

const el = document.querySelector('smart-qrcode');
const errorLevel = el.errorLevel;

heightSpecifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.number

Specifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height.

Default value

0

Examples

Markup and runtime examples for height:

HTML:

<smart-qrcode height="10"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.height = 10;

Read the current value:

const el = document.querySelector('smart-qrcode');
const height = el.height;

imageBackgroundColorSpecifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.string

Specifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through.

Default value

""

Examples

Markup and runtime examples for imageBackgroundColor:

HTML:

<smart-qrcode image-background-color="blue"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.imageBackgroundColor = "white";

Read the current value:

const el = document.querySelector('smart-qrcode');
const imageBackgroundColor = el.imageBackgroundColor;

imageHeightSpecifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.number

Specifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size.

Default value

15

Examples

Markup and runtime examples for imageHeight:

HTML:

<smart-qrcode image-height=""></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.imageHeight = ;

Read the current value:

const el = document.querySelector('smart-qrcode');
const imageHeight = el.imageHeight;

imageWidthSpecifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.number

Specifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage.

Default value

15

Examples

Markup and runtime examples for imageWidth:

HTML:

<smart-qrcode image-width=""></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.imageWidth = ;

Read the current value:

const el = document.querySelector('smart-qrcode');
const imageWidth = el.imageWidth;

labelColorSpecifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.string

Specifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors.

Default value

"black"

Examples

Markup and runtime examples for labelColor:

HTML:

<smart-qrcode label-color="white"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelColor = "red";

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelColor = el.labelColor;

labelFontSpecifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.string

Specifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code.

Default value

"monospace"

Examples

Markup and runtime examples for labelFont:

HTML:

<smart-qrcode label-font="monospace"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelFont = "sans-serif";

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelFont = el.labelFont;

labelFontSizeSpecifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).number

Specifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem).

Default value

14

Examples

Markup and runtime examples for labelFontSize:

HTML:

<smart-qrcode label-font-size="14"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelFontSize = 10;

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelFontSize = el.labelFontSize;

labelMarginBottomSpecifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.number

Specifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it.

Default value

5

Examples

Markup and runtime examples for labelMarginBottom:

HTML:

<smart-qrcode label-margin-bottom="5"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelMarginBottom = 0;

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelMarginBottom = el.labelMarginBottom;

labelMarginTopSpecifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.number

Specifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it.

Default value

5

Examples

Markup and runtime examples for labelMarginTop:

HTML:

<smart-qrcode label-margin-top="5"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelMarginTop = 5;

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelMarginTop = el.labelMarginTop;

labelPositionSpecifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image."top" | "bottom"

Specifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image.

Default value

"bottom"

Examples

Markup and runtime examples for labelPosition:

HTML:

<smart-qrcode label-position="bottom"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.labelPosition = "top";

Read the current value:

const el = document.querySelector('smart-qrcode');
const labelPosition = el.labelPosition;

lineColorSpecifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.string

Specifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting.

Default value

"black"

Examples

Markup and runtime examples for lineColor:

HTML:

<smart-qrcode line-color="balck"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.lineColor = "green";

Read the current value:

const el = document.querySelector('smart-qrcode');
const lineColor = el.lineColor;

renderAsSpecifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application."svg" | "canvas"

Specifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application.

Default value

"svg"

Examples

Markup and runtime examples for renderAs:

HTML:

<smart-qrcode render-as="svg"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.renderAs = "canvas";

Read the current value:

const el = document.querySelector('smart-qrcode');
const renderAs = el.renderAs;

squareWidthSpecifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.number

Specifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page.

Default value

7

Examples

Markup and runtime examples for squareWidth:

HTML:

<smart-qrcode square-width="4"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.squareWidth = 6;

Read the current value:

const el = document.querySelector('smart-qrcode');
const squareWidth = el.squareWidth;

valueGets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.string

Gets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code.

Default value

""

Examples

Markup and runtime examples for value:

HTML:

<smart-qrcode value="A2402B"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.value = "example";

Read the current value:

const el = document.querySelector('smart-qrcode');
const value = el.value;

widthSpecifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.number

Specifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code.

Default value

0

Examples

Markup and runtime examples for width:

HTML:

<smart-qrcode width="10"></smart-qrcode>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-qrcode');
el.width = 10;

Read the current value:

const el = document.querySelector('smart-qrcode');
const width = el.width;

Events

invalidThis event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.CustomEvent

This event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onInvalid

Arguments

evCustomEvent
ev.detailObject
ev.detail.invalidCharacters - An array indicating the invalid characters.
ev.detail.lengthValidity - A boolean indicating the length validity.
ev.detail.patternValidity - A boolean indicating the pattern validity.
ev.detail.value - the invalid value of the QR Code.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for invalid using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-qrcode')?.addEventListener('invalid', (event) => {
    const detail = event.detail,
        invalidCharacters = detail.invalidCharacters,
        lengthValidity = detail.lengthValidity,
        patternValidity = detail.patternValidity,
        value = detail.value;

	// event handling code goes here.
})

Methods

export( format: string, fileName?: string): voidExports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.

Exports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.

Arguments

formatstring

The format of the exported file - svg, png, jpg

fileName?string

The name of the exported file

On the custom element in the DOM (narrow the selector, e.g. to #my-qrcode, if you host multiple widgets):

document.querySelector('smart-qrcode')?.export();

getDataURL( format: string): stringRetrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.

Retrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsstring

On the custom element in the DOM (narrow the selector, e.g. to #my-qrcode, if you host multiple widgets):

const result = document.querySelector('smart-qrcode')?.getDataURL("svg","png");

getDataURLAsync( format: string): objectRetrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.

Retrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.

Arguments

formatstring

The dataURL format of the string - svg, png, jpg

Returnsobject

On the custom element in the DOM (narrow the selector, e.g. to #my-qrcode, if you host multiple widgets):

const result = document.querySelector('smart-qrcode')?.getDataURLAsync("svg","png");

isValid(): booleanRetrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.

Retrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.

Returnsboolean

On the custom element in the DOM (narrow the selector, e.g. to #my-qrcode, if you host multiple widgets):

const result = document.querySelector('smart-qrcode')?.isValid();