HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
QR CodeView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorEncodes a short piece of text as a scannable square.StableSince 0.1.0MediaUsageimport'@fusion.dev/helix/qr-code'import'@fusion.dev/helix-headless/qr-code'Preview
API ReferenceRoothelix-qr-codeEncodes a short piece of text as a scannable square.
PropTypeDefaultDescriptioncorrectionQrCorrectionHow much of the code can be lost and still read.labelstring""What the image is called.shapeQrStyle"square"How the modules are drawn.valuestring""What the code encodes, which is usually a URL.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionlogoA mark for the center, which only reads at a high correction.
PartDescriptioncodeThe square itself.findersThe three corner squares, which can take their own color.logoThe box holding the center mark.modulesEverything but the three corner squares.
CSS PropertyDescription--qr-code-background-colorBehind them, including the quiet zone.--qr-code-colorThe dark modules. Defaults to the page's ink.--qr-code-finder-colorThe three corner squares. Defaults to the same ink as the modules.--qr-code-logo-paddingThe quiet zone around that mark.--qr-code-logo-sizeHow much of the middle a mark may cover. Defaults to `27%`, which `H` correction carries: it can lose thirty percent.--qr-code-sizeHow wide the square is. Defaults to `12rem`.
Roothelix-headless-qr-codeEncodes a short piece of text as a scannable square.
PropTypeDefaultDescriptioncorrectionQrCorrectionHow much of the code can be lost and still read.labelstring""What the image is called.shapeQrStyle"square"How the modules are drawn.valuestring""What the code encodes, which is usually a URL.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionlogoA mark for the center, which only reads at a high correction.
PartDescriptioncodeThe square itself.findersThe three corner squares, which can take their own color.logoThe box holding the center mark.modulesEverything but the three corner squares.
ExamplesNameDescriptionColoredA code in a brand color, over a ground that keeps it scannable.CorrectionThe four correction levels, which trade size against damage tolerance.FindersThe three corner marks drawn in each shape they take.LogoA mark in the middle, which is what the highest correction level buys.PreviewA URL as a code.PreviewA URL as a code.ShapesThe modules drawn as squares, dots and rounded blocks.SizeThe same code at the sizes a print and a screen want.