Gathering detailed insights and metrics for qr-code-styling
Gathering detailed insights and metrics for qr-code-styling
Automaticly generate your styled QR code in your web app.
Installations
npm install qr-code-stylingDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>=18.18.0
Node Version
20.19.0
NPM Version
10.8.2
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,977 Stars
268 Commits
568 Forks
28 Watchers
28 Branches
17 Contributors
Updated on Jul 13, 2025
Maintainers
1
Package Meta Information
Latest Version
1.9.2
Package Id
qr-code-styling@1.9.2
Unpacked Size
503.54 kB
Size
121.50 kB
File Count
43
NPM Version
10.8.2
Node Version
20.19.0
Published on
Apr 11, 2025
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
22
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
Extensions
If you would like to use additional stiles, you can connect extensions.
qr-border-plugin
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 |
| shape | string (`'square' 'circle') | square | The shape of the qr-code, circle shape adds rundom extra dots arround |
| data | string | The data 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 | |
| cornersDotOptions | object | Dots in the corners styling options | |
| backgroundOptions | object | QR background styling options | |
| nodeCanvas | node-canvas | Only specify when running on a node server for canvas type, please refer to node section below | |
| jsDom | jsdom | Only specify when running on a node server for svg type, please refer to node section below |
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. | |
| saveAsBlob | boolean | true | Saves image as base64 blob in svg type, see bellow |
When QR type is svg, the image may not load in certain applications as it is saved as a url, and some svg applications will not render url images for security reasons. Setting saveAsBlob to true will instead save the image as a blob, allowing it to render correctly in more places, but will also increase the file size.
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 |
| roundSize | boolean | true | Whether to round dots size to integer. true value might create extra margin around qr code. If false, shape-rendering="crispEdges" will be applied to SVG element. |
options.backgroundOptions structure
| Property | Type | Default Value |
|---|---|---|
| color | string ('#fff' 'rgb(255,255,255)' 'transparent') | '#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' 'rounded' 'dots' 'classy' 'classy-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' 'rounded' 'dots' 'classy' 'classy-rounded' 'extra-rounded') | 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 on browser, Buffer type on Node |
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) |
Promise returned will resolve into the data URI of the QR code image.
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.
Node Support
You can use this on a node server by passing through the node-canvas or jsdom object depending if your creating a non-svg or svg respectively. You must pass both if using imageOptions.saveAsBlob.
Calling getRawData in node will return a Buffer instead of a Blob.
1const { QRCodeStyling } = require("qr-code-styling/lib/qr-code-styling.common.js");
2const nodeCanvas = require("canvas");
3const { JSDOM } = require("jsdom");
4const fs = require("fs");
5
6const options = {
7 width: 300,
8 height: 300,
9 data: "https://www.facebook.com/",
10 image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg",
11 dotsOptions: {
12 color: "#4267b2",
13 type: "rounded"
14 },
15 backgroundOptions: {
16 color: "#e9ebee",
17 },
18 imageOptions: {
19 crossOrigin: "anonymous",
20 margin: 20
21 }
22}
23
24// For canvas type
25const qrCodeImage = new QRCodeStyling({
26 jsdom: JSDOM, // this is required
27 nodeCanvas, // this is required,
28 ...options,
29 imageOptions: {
30 saveAsBlob: true,
31 crossOrigin: "anonymous",
32 margin: 20
33 },
34});
35
36qrCodeImage.getRawData("png").then((buffer) => {
37 fs.writeFileSync("test.png", buffer);
38});
39
40// For svg type
41const qrCodeSvg = new QRCodeStyling({
42 jsdom: JSDOM, // this is required
43 type: "svg",
44 ...options
45});
46
47qrCodeSvg.getRawData("svg").then((buffer) => {
48 fs.writeFileSync("test.svg", buffer);
49});
50
51// For svg type with the inner-image saved as a blob
52// (inner-image will render in more places but file will be larger)
53const qrCodeSvgWithBlobImage = new QRCodeStyling({
54 jsdom: JSDOM, // this is required
55 nodeCanvas, // this is required
56 type: "svg",
57 ...options,
58 imageOptions: {
59 saveAsBlob: true,
60 crossOrigin: "anonymous",
61 margin: 20
62 }
63});
64
65qrCodeSvgWithBlobImage.getRawData("svg").then((buffer) => {
66 fs.writeFileSync("test_blob.svg", buffer);
67});
68License
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