Plain HTML Integration

Learn how to integrate the Rust-to-WebAssembly library using plain HTML and vanilla JavaScript without any UI framework. The example utilizes native browser ES modules to load and run the compiler.

Plain HTML Demo

Open in App

HTML Code Implementation

index.htmlHTML & JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>UPI QR Code Generator</title>
</head>
<body style="background: #faf9f6; color: #1c1917;">
  <form id="payForm">
    <input type="text" id="vpa" placeholder="UPI VPA" required />
    <input type="text" id="name" placeholder="Payee Name" required />
    <input type="number" id="amount" placeholder="Amount" />
    <button type="submit">Generate</button>
  </form>

  <div id="qrContainer"></div>

  <!-- Load library as ES Module from CDN -->
  <script type="module">
    import init, { upiqrcode } from 'https://cdn.jsdelivr.net/npm/upiqrcode@1.5.5/upiqrcode.js';

    document.getElementById('payForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      
      // 1. Initialize WASM Runtime
      await init();
      
      // 2. Generate
      const result = await upiqrcode({
        payeeVPA: document.getElementById('vpa').value,
        payeeName: document.getElementById('name').value,
        amount: document.getElementById('amount').value,
        currency: 'INR'
      });

      // 3. Inject raw SVG string into DOM
      document.getElementById('qrContainer').innerHTML = result.qr;
    });
  </script>
</body>
</html>