lazysite

QR codes

Render a QR code for a link, payment URL or wifi string.

QR codes

The ::: qr block renders a QR code for a given value. It is a built-in content component, available on any layout, drawn client-side from the bundled /assets/qrcode.js - no CDN, no network call.

Syntax

::: qr data="https://example.com/pay" size="180"
:::

Pass the value in the data="…" attribute - the fence body is left empty, because Markdown would reflow anything placed there. Note the space after ::: - a fence without it is ignored.

Attributes

  • data (required) - the value to encode: a link, a payment URL, a wifi string, any text
  • size (optional) - rendered size in pixels; default 160

How it renders

The component emits a <div class="lz-qr"> carrying the value in a data-qr attribute (with role="img" and a <noscript> fallback showing the raw value), plus a small loader script. The loader fetches the shared /assets/qrcode.js once per page, however many QR blocks the page has, then draws each code as an inline SVG at error-correction level M.

The library is qrcode-generator (MIT), vendored into the starter assets and listed in THIRD-PARTY-NOTICES.md and the release SBOM. It is pure computation - no DOM access, no eval, no network.

Component resolution

Built-in components ship under lazysite/templates/components/ and act as the fallback for the ::: name component syntax: a fence resolves against the active layout's components/NAME.tt first, then the built-in directory. A layout can therefore override qr with its own template, and ::: qr works even on a layout that ships no components at all.

Notes

  • The value is only ever computed into a matrix and drawn as SVG rectangles - it is never inserted as markup, so there is no injection surface
  • The value and size are HTML-escaped into the wrapper's attributes
  • A ::: qr block without a data attribute renders an HTML comment hinting at the missing attribute