QR Code
FreeSelf-contained canvas QR encoder with no external dependencies. Supports error-correction levels L/M/Q/H, an optional center logo, custom colors and PNG download.
Complexity tier: Primitive Presents a value: held to semantic markup and contrast, with its right-to-left and print gaps recorded and the right-to-left debt allowed only to shrink.
import { SvQrCodeComponent } from '@styloviz/commerce';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Branded with center logo
<sv-qr-code value="https://example.com" [size]="240" errorCorrection="H" logo="/logo.svg" [logoSize]="48" />
When to use
- Encoding a URL, payment string or token as a scannable QR — fully offline.
- You want a dependency-free encoder with branding (logo, colors) and PNG export.
- For displaying an existing barcode image, a plain <img> is enough.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | '' | The text or URL to encode. |
| size | number | 200 | Canvas pixel size (width & height). |
| errorCorrection | QrErrorCorrection | 'M' | Error correction level. |
| foreground | string | '#000000' | Foreground (dark module) color. |
| background | string | '#ffffff' | Background (light module) color. Use 'transparent' for no background. |
| logo | string | '' | Optional center logo URL. |
| logoSize | number | 40 | Logo size in pixels. |
| quietZone | number | SV_QR_MIN_QUIET_ZONE | Quiet zone around the code, in modules. ISO/IEC 18004 REQUIRES FOUR. The default was 2, which is not a smaller margin but a code a scanner may be unable to find the edges of against whatever surrounds it. Raised to the specified value; anything lower is still accepted and warned about, because a host may be placing the code on a known blank field. |
| ariaLabel | string | '' | Accessible label override for the rendered code. When empty, falls back to `QR code for: <value>`. Provide a human label (e.g. "Scan to pay") when the encoded value is a long or opaque string. |
| showPayloadMeter | boolean | false | Show a payload meter beneath the code — a native `<meter>` of the encoded bytes against the capacity of the chosen correction level, labelled with `payloadLabel()` (e.g. "180 / 250 bytes"). |
Customization & theming
- Set `value`, `size` and `errorCorrection` (L, M, Q, H).
- Theme with `foreground` / `background` and a configurable `quietZone`.
- Overlay a center `logo` sized with `logoSize`; override the accessible name with `ariaLabel`.
Best practices
- Do: Use a higher `errorCorrection` (Q/H) when overlaying a center logo.
- Do: Keep strong contrast between `foreground` and `background` so scanners cope.
- Tip: Preserve a `quietZone` margin — codes flush to other content scan poorly.
Accessibility
- Rendered on a canvas with `role="img"`; the accessible name defaults to the encoded value and can be overridden with `ariaLabel` (e.g. "Scan to pay") for long or opaque values.
- High-contrast defaults keep the code scannable.
- No interaction required — purely presentational.
Feedback on QR Code
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.