Qr Showcase
Example
https://www.sveltekit-ui.com
Example2
Example3
Component Documentation
Component Name
Qr
Builder Function Name
create_qr_manager
Description
Generates a stylized QR code with optional image in the center, supporting download and copying features.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| data | string | The primary data/content encoded within the QR code. | |
| image | string or null (URL) | Optional image URL to place in the center of the QR code. | |
| image_size | number | 0.5 | How large the center image is as a fraction of overall QR size (0.5 means 50%). |
| size | number | 200 | Width/height in px for the QR code. |
| margin | number | 10 | Margin in px around the QR code. |
| type_number | number | 0 | Integer (0-40) specifying detail level of QR. 0 means auto, higher means more capacity but bigger code. |
| error_correction_level | string | Q | Amount of error correction. 'L' ~7%, 'M' ~15%, 'Q' ~25%, 'H' ~30%. Higher can handle more damage but uses bigger code. |
| color | string (CSS color) | var(--primary-t) | Main dots color of the QR code. |
| corner_color | string (CSS color) | color-mix(in oklab, var(--primary-t), var(--bg) 20%) | Special color for the larger 'corner squares' in the QR code. |
| background_color | string (CSS color) | var(--shadow1-t) | Background fill behind the QR code (the 'negative space' inside the bounding square). |
| border_color | string (CSS color) | var(--shadow7-t) | Border color of the QR container. |
| border_width | number | 1 | Width in px of the QR container border. |
| border_radius | number | (size + 2 * margin) / 100 | Border radius (in rem or direct numeric) for the QR container. |
| extension | string | svg | File type for the download if is_show_download is true. |
| quality | number (0.0 to 1.0) | 0.8 | Used when downloading as raster formats like png or webp to specify image quality. |
| is_show_copy | boolean | false | If true, displays a text input of `data` plus a button to copy it to clipboard. |
| is_show_download | boolean | false | If true, shows a dropdown to pick file extension and a button to download the generated QR. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| init | Initializes the manager with config values, sets up the internal managers (text, copy, download). | No Params | |
| on_mount | Called typically on Svelte's onMount. Creates the QR code with QRCodeStyling and appends to the DOM. If there's an error (e.g. data too large for type_number), sets error_message. | No Params | |
| update | Re-generates/updates the QR code with any changed config (color, data, etc.). | No Params | |
| download | Triggers a file download of the QR code with the chosen extension and quality. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | Unique ID for the QR container. |
| error_message | string or null | Displays any generation errors encountered, e.g. if the data is too large for the chosen type_number/error_correction_level. |
| is_loaded | boolean | True once the QR code is fully rendered. If false, shows a loading spinner. |
| text_manager | object | A text input manager for the main data. If is_show_copy=true, this is displayed. |
| copy_button_manager | object | Button manager for copying data to clipboard if is_show_copy=true. |
| download_button_manager | object | Button manager for triggering the QR code download if is_show_download=true. |
| extention_dropdown_manager | object | Dropdown manager controlling which extension is used when downloading (svg, png, webp). |
