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

Version 3

Modules 29×29

Bytes 38

Capacity 2%

`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"
/>

Full API and SSR notes in the docs.