npm version MIT License

<qr-code> Web Component

A lightweight, framework-agnostic custom element for generating QR codes directly in the browser. Zero dependencies, ~4KB minified + gzipped.

Try Live Demo View on GitHub

Interactive Playground

<qr-code data-text="https://github.com/squidjam/qrcode-element" data-width="220" data-height="220"></qr-code>

Features

✨ Framework Agnostic

Seamlessly works with React, Vue, Svelte, Angular, or vanilla JS.

⚡ Zero Dependencies

Pure JavaScript without bloat or third-party service dependencies.

📦 Ultra Lightweight

~4KB minified and gzipped for optimal performance.

🎨 Custom Options

Choose Canvas or SVG rendering, color choices, and error levels.

Installation

Via NPM

npm install @squidjam/qrcode-element

Then import it into your bundle:

import '@squidjam/qrcode-element';

Via CDN

<script src="https://unpkg.com/@squidjam/qrcode-element@latest/dist/qrcode-element.umd.js"></script>

Attributes & Properties

Attribute Type Default Description
data-text string - Text or URL to encode (required)
data-width number 256 Width in pixels
data-height number 256 Height in pixels
data-render string canvas Render type: canvas or svg
data-foreground string #000000 Foreground color (hex)
data-background string #ffffff Background color (hex)
data-error-level number 0 Error correction level (0-3)

Framework Code Snippets

import '@squidjam/qrcode-element';

function App() {
  return (
    <qr-code
      data-text="https://example.com"
      data-width="256"
      data-height="256"
    />
  );
}
<template>
  <qr-code
    :data-text="url"
    :data-width="256"
    data-render="svg"
  />
</template>

<script setup>
import '@squidjam/qrcode-element';
import { ref } from 'vue';

const url = ref('https://example.com');
</script>
<script>
  import '@squidjam/qrcode-element';
  let text = 'https://example.com';
</script>

<qr-code data-text={text} data-width="256" data-height="256" />
<script src="https://unpkg.com/@squidjam/qrcode-element"></script>

<qr-code data-text="https://example.com" data-width="256" data-height="256"></qr-code>