# VS Modules / QR

Build one local QR component using the project's existing inputs, layout and tokens.
Use qrcode for encoding; do not recreate the QR algorithm or install a VisualSystem package.
The example is a server-side TypeScript starting point. Keep the encoder behind the project's existing server boundary, or use qrcode's browser API for local-only generation.

## Content

Encode the payload unchanged: HTTPS URL, plain text, WIFI credentials, vCard 3.0, mailto, tel, sms or geo URI.
Escape structured fields before encoding. Validate URLs, numbers and coordinates; limit content to 1,200 UTF-8 bytes.
Wi-Fi uses WPA for personal networks or nopass for open networks. Never persist passwords in preferences or log payloads.

## Defaults

384px; four-module quiet zone; black on white; high error correction; SVG.
Sizes: 192, 256, 384, 512, 768. Spacing: 0, 4, 6, 8. Transparent backgrounds are supported.
Keep scanning contrast and quiet zones appropriate to the destination. Decode generated images in tests.
Reuse one encoder for preview and SVG/PNG export. Keep all options and content drafts temporary; reset to defaults on each visit. Abort stale previews and disable exports until they match the current inputs.

## Optional hosted rendering

GET https://visual.systems/api/modules/qr?url=example.com
Parameters: s=size, m=margin, c=color, bg=background, f=svg|png. Omit defaults; hex colors need no #.
For other payloads use data instead of url. POST the same URL-encoded parameters for previews and downloads without putting content in request URLs.
Copying a hosted image URL exposes its payload in that URL; prefer a downloaded file for private content.
400: correct inputs. 422: shorten content or correct rendering settings. Scanner actions depend on the device.

Example: https://visual.systems/api/modules/qr/example.tsx