Gathering detailed insights and metrics for @solana/qr-code-styling
Gathering detailed insights and metrics for @solana/qr-code-styling
Automaticly generate your styled QR code in your web app.
Installations
npm install @solana/qr-code-stylingDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.18.0
NPM Version
8.19.2
Score
85.9
Supply Chain
100
Quality
75.4
Maintenance
100
Vulnerability
100
License
Releases
21
Languages
3
TypeScript
HTML
JavaScript
TypeScript (48.35%)
HTML (35.57%)
JavaScript (16.07%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
1,978 Stars
268 Commits
568 Forks
28 Watchers
28 Branches
17 Contributors
Updated on Jul 13, 2025
Maintainers
13
Package Meta Information
Latest Version
1.6.0
Package Id
@solana/qr-code-styling@1.6.0
Unpacked Size
257.91 kB
Size
62.19 kB
File Count
29
NPM Version
8.19.2
Node Version
16.18.0
Published on
Mar 08, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
20
@typescript-eslint/eslint-plugin@typescript-eslint/parsercanvasclean-webpack-plugineslinteslint-config-prettiereslint-loadereslint-plugin-jesteslint-plugin-prettierhtml-webpack-pluginjestjest-environment-jsdom-fifteenprettierts-jestts-loadertypescriptwebpackwebpack-cliwebpack-dev-serverwebpack-merge
QR Code Styling
JavaScript library for generating QR codes with a logo and styling.
Try it here https://qr-code-styling.com
If you have issues / suggestions / notes / questions, please open an issue or contact me. Let's create a cool library together.
Examples
Installation
npm install qr-code-styling
Usage
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>QR Code Styling</title> 6 <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script> 7</head> 8<body> 9<div id="canvas"></div> 10<script type="text/javascript"> 11 12 const qrCode = new QRCodeStyling({ 13 width: 300, 14 height: 300, 15 type: "svg", 16 data: "https://www.facebook.com/", 17 image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", 18 dotsOptions: { 19 color: "#4267b2", 20 type: "rounded" 21 }, 22 backgroundOptions: { 23 color: "#e9ebee", 24 }, 25 imageOptions: { 26 crossOrigin: "anonymous", 27 margin: 20 28 } 29 }); 30 31 qrCode.append(document.getElementById("canvas")); 32 qrCode.download({ name: "qr", extension: "svg" }); 33</script> 34</body> 35</html>
API Documentation
QRCodeStyling instance
new QRCodeStyling(options) => QRCodeStyling
| Param | Type | Description |
|---|---|---|
| options | object | Init object |
options structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| width | number | 300 | Size of canvas |
| height | number | 300 | Size of canvas |
| type | string ('canvas' 'svg') | canvas | The type of the element that will be rendered |
| data | string | The date will be encoded to the QR code | |
| image | string | The image will be copied to the center of the QR code | |
| margin | number | 0 | Margin around canvas |
| qrOptions | object | Options will be passed to qrcode-generator lib | |
| imageOptions | object | Specific image options, details see below | |
| dotsOptions | object | Dots styling options | |
| cornersSquareOptions | object | Square in the corners styling options | |
| cornersDotOptionsHelper | object | Dots in the corners styling options | |
| backgroundOptions | object | QR background styling options |
options.qrOptions structure
| Property | Type | Default Value |
|---|---|---|
| typeNumber | number (0 - 40) | 0 |
| mode | string ('Numeric' 'Alphanumeric' 'Byte' 'Kanji') | |
| errorCorrectionLevel | string ('L' 'M' 'Q' 'H') | 'Q' |
options.imageOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| hideBackgroundDots | boolean | true | Hide all dots covered by the image |
| imageSize | number | 0.4 | Coefficient of the image size. Not recommended to use ove 0.5. Lower is better |
| margin | number | 0 | Margin of the image in px |
| crossOrigin | string('anonymous' 'use-credentials') | Set "anonymous" if you want to download QR code from other origins. |
options.dotsOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | '#000' | Color of QR dots |
| gradient | object | Gradient of QR dots | |
| type | string ('rounded' 'dots' 'classy' 'classy-rounded' 'square' 'extra-rounded') | 'square' | Style of QR dots |
options.backgroundOptions structure
| Property | Type | Default Value |
|---|---|---|
| color | string | '#fff' |
| gradient | object |
options.cornersSquareOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Square | |
| gradient | object | Gradient of Corners Square | |
| type | string ('dot' 'square' 'extra-rounded') | Style of Corners Square |
options.cornersDotOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| color | string | Color of Corners Dot | |
| gradient | object | Gradient of Corners Dot | |
| type | string ('dot' 'square') | Style of Corners Dot |
Gradient structure
options.dotsOptions.gradient
options.backgroundOptions.gradient
options.cornersSquareOptions.gradient
options.cornersDotOptions.gradient
| Property | Type | Default Value | Description |
|---|---|---|---|
| type | string ('linear' 'radial') | "linear" | Type of gradient spread |
| rotation | number | 0 | Rotation of gradient in radians (Math.PI === 180 degrees) |
| colorStops | array of objects | Gradient colors. Example [{ offset: 0, color: 'blue' }, { offset: 1, color: 'red' }] |
Gradient colorStops structure
options.dotsOptions.gradient.colorStops[]
options.backgroundOptions.gradient.colorStops[]
options.cornersSquareOptions.gradient.colorStops[]
options.cornersDotOptions.gradient.colorStops[]
| Property | Type | Default Value | Description |
|---|---|---|---|
| offset | number (0 - 1) | Position of color in gradient range | |
| color | string | Color of stop in gradient range |
QRCodeStyling methods
QRCodeStyling.append(container) => void
| Param | Type | Description |
|---|---|---|
| container | DOM element | This container will be used for appending of the QR code |
QRCodeStyling.getRawData(extension) => Promise<Blob>
| Param | Type | Default Value | Description |
|---|---|---|---|
| extension | string ('png' 'jpeg' 'webp' 'svg') | 'png' | Blob type |
QRCodeStyling.update(options) => void
| Param | Type | Description |
|---|---|---|
| options | object | The same options as for initialization |
QRCodeStyling.applyExtension(extension) => void
| Param | Type | Description |
|---|---|---|
| extension | (svg, options) => void | Extension is a function that takes svg and previously applied options and modifies an svg |
applyExtension example
1const extension = (svg, options) => { 2 const { width, height } = options; 3 const size = Math.min(width, height); 4 const border = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 5 const borderAttributes = { 6 "fill": "none", 7 "x": (width - size + 40) / 2, 8 "y": (height - size + 40) / 2, 9 "width": size - 40, 10 "height": size - 40, 11 "stroke": 'black', 12 "stroke-width": 40, 13 "rx": 100, 14 }; 15 Object.keys(borderAttributes).forEach(attribute => { 16 border.setAttribute(attribute, borderAttributes[attribute]); 17 }); 18 svg.appendChild(border); 19};
QRCodeStyling.deleteExtension() => void
QRCodeStyling.download(downloadOptions) => Promise<void>
| Param | Type | Description |
|---|---|---|
| downloadOptions | object | Options with extension and name of file (not required) |
downloadOptions structure
| Property | Type | Default Value | Description |
|---|---|---|---|
| name | string | 'qr' | Name of the downloaded file |
| extension | string ('png' 'jpeg' 'webp' 'svg') | 'png' | File extension |
Building this repo
If you get an error running npm install referring to node-pre-gyp, this is caused by an attempt to compile the canvas dependency. See Compiling instructions in the README. For example on MacOS you need to install dependencies: brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman.
License
MIT License. Copyright (c) 2021 Denys Kozak
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/8 approved changesets -- score normalized to 2
Reason
9 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-7q7g-4xm8-89cq
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/release.yml:23
- Warn: jobLevel 'packages' permission set to 'write': .github/workflows/release.yml:56
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release.yml:53
- Warn: topLevel 'contents' permission set to 'write': .github/workflows/create-release-pr.yml:15
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/create-release-pr.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/create-release-pr.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/create-release-pr.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/create-release-pr.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/create-release-pr.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/create-release-pr.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:95: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/kozakdenys/qr-code-styling/release.yml/master?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/release.yml:76
- Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Score
2.8
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More