Docs / Examples / QR Code Generator Example

QR Code Generator

This example shows how to generate QR codes as images. We’ll use the QRCode.js library to create dynamic QR codes with custom styling.

HTML Content

<div class="qr-container">
    <div class="qr-code" id="qrcode"></div>
    <div class="qr-label">Scan to visit our website</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js"></script>
<script>
    new QRCode(document.getElementById("qrcode"), {
        text: "https://html2img.com",
        width: 200,
        height: 200,
        colorDark: "#2563eb",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });
</script>

CSS Styles

body {
    margin: 0;
    padding: 24px;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.qr-container {
    width: 280px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.qr-code {
    display: inline-block;
    padding: 8px;
    background: white;
    border-radius: 8px;
}

.qr-code img {
    display: block;
}

.qr-label {
    margin-top: 16px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
}

API Request

POST https://app.html2img.com/api/html

{
    "html": "<div class=\"qr-container\"><div class=\"qr-code\" id=\"qrcode\"></div><div class=\"qr-label\">Scan to visit our website</div></div><script src=\"https://cdn.jsdelivr.net/npm/[email protected]/qrcode.min.js\"></script><script>new QRCode(document.getElementById(\"qrcode\"), {text: \"https://html2img.com\",width: 200,height: 200,colorDark: \"#2563eb\",colorLight: \"#ffffff\",correctLevel: QRCode.CorrectLevel.H});</script>",
    "width": 375,
    "height": 350,
    "css": "body{margin:0;padding:24px;background:white;font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif}.qr-container{width:280px;padding:24px;background:white;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.1);text-align:center}.qr-code{display:inline-block;padding:8px;background:white;border-radius:8px}.qr-code img{display:block}.qr-label{margin-top:16px;color:#4b5563;font-size:14px;font-weight:500}"
}

Update the QR code content by changing the text parameter in the QRCode initialization.

How it Works

Uses QRCode.js library to generate QR codes
Customizable colors and error correction levels
Clean container design with subtle shadow
Responsive and centered layout

Consider using a webhook URL to ensure the QR code is fully generated before capture.

Customization Options

colorDark: QR code foreground color
correctLevel: Error correction level (L, M, Q, H)
width/height: QR code dimensions
Add a logo by setting logo parameter

Documentation