HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
QR CodeView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA scannable QR code for a short piece of text.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/qr-code'import'@fusion.dev/helix-headless/qr-code'Preview
API ReferenceRoothelix-qr-codeA scannable QR code for a short piece of text.
PropTypeDescriptionaddressLabelstringDefault"{code}, {address}"The name of a code with no label whose value is a web address.
{code} is code-label and {address} the address.codeLabelstringDefault"QR code"The words a code with no label is named by, with its value where the
value is a web address, as address-label says.correction"H"|"L"|"M"|"Q"The error correction level, which sets how much of the code can be lost
and still scan.labelstringDefault""The image's accessible name: what the code is for, such as "Open the
menu".shape"dots"|"rounded"|"square"How the modules are drawn.valuestringDefault""What the code encodes, which is usually a URL.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfallbackShown in place of the code when the value is too long for it, such as the link as text.logoA logo for the center. A code with a logo scans only at a high correction level.
EventTypeDescriptionerrorEventThe value is too long for a code at the correction level, so no code is drawn.
MethodTypeDescriptiondownload(filename: unknown, size: unknown) => Promise<void>Saves the code as a file named filename, size pixels square: an SVG
where the name ends in .svg, and a PNG otherwise.toPng(size: unknown) => Promise<Blob|null>The code as a PNG, size pixels square, drawn from toSvg().toSvg(size: unknown) => stringThe code as an SVG file of its own, size pixels square, in the colors it
is drawn in, with its background under the quiet zone.
PartDescriptioncodeThe square code image.fallbackThe box around the fallback slot, drawn only when the value is too long for a code.findersThe three corner squares, which can take their own color.logoThe box that holds the center logo.modulesEvery module except the three corner squares.
CSS PropertyDescription--qr-code-background-colorThe fill behind the modules, including the quiet zone and the logo's box.--qr-code-colorColor of the dark modules. Defaults to the dark media ink, which is the same in both color schemes so the code scans.--qr-code-fallback-paddingThe space around the fallback inside the square.--qr-code-finder-colorColor of the three corner squares. Defaults to the color of the modules.--qr-code-logo-paddingThe clear space around the center logo.--qr-code-logo-radiusThe corner radius of the logo's box.--qr-code-logo-sizeHow much of the center a logo can cover. Defaults to 27%, which H correction allows, because it can lose thirty percent.--qr-code-radiusThe corner radius of the square.--qr-code-sizeHow wide the square is. Defaults to 12rem.
Custom stateDescriptionoverflowThe value is too long for a code at the correction level, so the fallback shows.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-qr-codeA scannable QR code for a short piece of text.
PropTypeDescriptionaddressLabelstringDefault"{code}, {address}"The name of a code with no label whose value is a web address.
{code} is code-label and {address} the address.codeLabelstringDefault"QR code"The words a code with no label is named by, with its value where the
value is a web address, as address-label says.correction"H"|"L"|"M"|"Q"The error correction level, which sets how much of the code can be lost
and still scan.labelstringDefault""The image's accessible name: what the code is for, such as "Open the
menu".shape"dots"|"rounded"|"square"How the modules are drawn.valuestringDefault""What the code encodes, which is usually a URL.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionfallbackShown in place of the code when the value is too long for it, such as the link as text.logoA logo for the center. A code with a logo scans only at a high correction level.
EventTypeDescriptionerrorEventThe value is too long for a code at the correction level, so no code is drawn.
MethodTypeDescriptiondownload(filename: unknown, size: unknown) => Promise<void>Saves the code as a file named filename, size pixels square: an SVG
where the name ends in .svg, and a PNG otherwise.toPng(size: unknown) => Promise<Blob|null>The code as a PNG, size pixels square, drawn from toSvg().toSvg(size: unknown) => stringThe code as an SVG file of its own, size pixels square, in the colors it
is drawn in, with its background under the quiet zone.
PartDescriptioncodeThe square code image.fallbackThe box around the fallback slot, drawn only when the value is too long for a code.findersThe three corner squares, which can take their own color.logoThe box that holds the center logo.modulesEvery module except the three corner squares.
Custom stateDescriptionoverflowThe value is too long for a code at the correction level, so the fallback shows.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionColoredA code in a brand color, over a background that keeps it scannable.CorrectionThe lowest and highest correction levels, L and H, which trade size against damage tolerance.DownloadA QR code saved as a PNG with download(), called from a press, as Zag's download trigger does.Finder ColorThe three corner squares in a brand color, set with --qr-code-finder-color.LogoA logo in the center, which needs the highest correction level.PreviewA URL as a QR code.PreviewA URL as a QR code.ShapesThe modules drawn as squares, dots, and rounded blocks.SizeA smaller code, set with --qr-code-size.