Building a QR Code Generator in Salesforce Using LWC

QR codes are a convenient way to share information such as URLs, IDs, or text strings in a compact scannable format. With Salesforce Lightning Web Components (LWC), you can build a QR Code Generator that works directly inside Salesforce pages such as Home, Record, or App Pages. In this blog, we'll walk through how to implement this step by step.

1. Prerequisites

Before you start, make sure you have:

A Salesforce org (Developer Edition or Sandbox is fine)
Familiarity with LWC basics
Access to upload static resources

2. Download and Upload the QR Code Library

We will use the popular QRCode.js library to generate QR codes.

Download the qrcode.min.js file.
In Salesforce Setup, search for Static Resources.
Upload the file as a static resource with the name: qrcode.

3. Create a New Lightning Web Component

Run the following command (if using Salesforce CLI):

sfdx force:lightning:component:create --type lwc --componentname qrcodeGenrate --outputdir force-app/main/default/lwc

This will create the component folder with .js, .html, and .js-meta.xml files.

4. Implement the Component Code

qrcodeGenrate.js

import { LightningElement, track } from 'lwc';
import qrcodeLib from '@salesforce/resourceUrl/qrcode';
import { loadScript } from 'lightning/platformResourceLoader';

export default class QrcodeGenrate extends LightningElement {
    @track inputText = '';
    qrcodeInitialized = false;
    qrLibLoaded = false;

    renderedCallback() {
        if (this.qrcodeInitialized) return;
        this.qrcodeInitialized = true;

        loadScript(this, qrcodeLib)
            .then(() => {
                this.qrLibLoaded = true;
                console.log('✅ QRCode library loaded');
            })
            .catch(error => {
                console.error('❌ Error loading QRCode library', error);
            });
    }

    handleChange(event) {
        this.inputText = event.target.value;
    }

    generateQRCode() {
        if (!this.qrLibLoaded) {
            alert('QR Code library not loaded yet');
            return;
        }

        if (!this.inputText) {
            alert('Please enter some text or URL');
            return;
        }

        const container = this.template.querySelector('.qrcode');
        container.innerHTML = ""; // clear old QR

        // ✅ Use window.QRCode
        new window.QRCode(container, {
            text: this.inputText,
            width: 200,
            height: 200
        });
    }
}

qrcodeGenrate.html

<template>
    <lightning-card title="QR Code Generator">
        <div class="slds-p-around_medium">
            <lightning-input
                label="Enter Text or URL"
                value={inputText}
                onchange={handleChange}>
            </lightning-input>

            <lightning-button
                label="Generate QR Code"
                onclick={generateQRCode}
                class="slds-m-top_small">
            </lightning-button>

            <!-- QR Code will appear here -->
            <div class="qrcode" style="margin-top:20px;"></div>
        </div>
    </lightning-card>
</template>

qrcodeGenrate.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

5. Deploy and Test the Component

Deploy the component to your org.
Open the App Builder (e.g., Home Page → Edit Page).
Drag and drop the QR Code Generator component onto the page.
Enter text or a URL and click Generate QR Code.

6. Possible Enhancements

Auto-generate QR code as you type (no button click needed).
Add a download button to save the QR code as an image.
Store QR code data in Salesforce records.
Support dynamic QR codes that can redirect to Salesforce pages.

Sabir Sheikh @sabir_sheikh_cd49d4c419e3