QR codes for Svelte 5

Zero-dependency. Pure-TypeScript encoder. SVG output. One component, one API, works everywhere SvelteKit does.

pnpm add @nomideusz/svelte-qr

Playground

edit anything → regenerates instantly

Data

Error correction

~15% recovery

Size: 256px

Quiet zone: 4 modules

Foreground

Background

Tap the code to enlarge it (1.0's enlargeable) — or (downloadQrPng, rendered client-side, zero dependencies).

Version 3

Modules 29×29

Bytes 38

Capacity 90%

`matrixToSvg()` output

use directly with {@html svg} — no component needed

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37" width="128" height="128" shape-rendering="crispEdges">
<rect width="37" height="37" fill="#ffffff"/>
<path d="M4 4h7v1h-7zM14 4h1v1h-1zM16 4h1v1h-1zM18 4h1v1h-1zM20 4h5v1h-5zM26 4h…

Total length: 3132 bytes. Each dark module is a single <rect>; the outer <svg> has shape-rendering="crispEdges" so it stays sharp at any DPR.

Use it

matches the current playground settings

<script>
  import { QrCode } from '@nomideusz/svelte-qr';
</script>

<QrCode
  data="https://github.com/nomideusz/svelte-qr"
  size={256}
  errorCorrection="M"
  padding={4}
  foreground="#18181b"
  background="#ffffff"
/>

`qrPng()` — PNG on the server

server-only — import from @nomideusz/svelte-qr/png

// server-only (Node) — needs the optional peer: pnpm add sharp
import { qrPng } from '@nomideusz/svelte-qr/png';

const png = await qrPng("https://github.com/nomideusz/svelte-qr", {
  scale: 8,             // px per QR module (default 8)
  errorCorrection: 'M',
  padding: 4,
}); // Promise<Buffer> — white background, black modules

sharp is an optional peer dependency imported only by the /png subpath — the main entry stays zero-dependency and browser-safe, so installing sharp is only needed if you use /png. Prefer your own image encoder? matrixToRaster() (main entry) returns the raw greyscale bitmap { data, width, height, channels } that raw-image encoders take.

Full API and SSR notes in the docs.