{"id":25628176,"url":"https://github.com/stacksjs/qrx","last_synced_at":"2025-07-04T07:34:55.208Z","repository":{"id":270740711,"uuid":"910985985","full_name":"stacksjs/qrx","owner":"stacksjs","description":"🔒 QR \u0026 Bar Code generating \u0026 reading. Lightweight \u0026 powerful.","archived":false,"fork":false,"pushed_at":"2025-06-15T11:28:11.000Z","size":1936,"stargazers_count":10,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T15:35:46.907Z","etag":null,"topics":["barcode","generator","jsbarcode","qrcode","qrcodejs","reader","scanner","typescript"],"latest_commit_sha":null,"homepage":"https://ts-quick-reaction.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stacksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["stacksjs","chrisbbreuer"],"open_collective":"stacksjs"}},"created_at":"2025-01-02T01:29:22.000Z","updated_at":"2025-06-25T17:02:34.000Z","dependencies_parsed_at":"2025-02-08T00:24:29.168Z","dependency_job_id":"09a5124b-e229-421a-b149-15b6f32a5b68","html_url":"https://github.com/stacksjs/qrx","commit_stats":null,"previous_names":["stacksjs/qar","stacksjs/qrx"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/stacksjs/qrx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fqrx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fqrx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fqrx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fqrx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stacksjs","download_url":"https://codeload.github.com/stacksjs/qrx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fqrx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263469330,"owners_count":23471503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["barcode","generator","jsbarcode","qrcode","qrcodejs","reader","scanner","typescript"],"created_at":"2025-02-22T18:21:51.521Z","updated_at":"2025-07-04T07:34:55.187Z","avatar_url":"https://github.com/stacksjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/stacksjs","https://github.com/sponsors/chrisbbreuer","https://opencollective.com/stacksjs"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\".github/art/cover.jpg\" alt=\"Social Card of this repo\"\u003e\u003c/p\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![GitHub Actions][github-actions-src]][github-actions-href]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\u003c!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] --\u003e\n\u003c!-- [![Codecov][codecov-src]][codecov-href] --\u003e\n\n# qrx\n\n\u003e A QR \u0026 Barcode Library \u0026 CLI for Node.js/Bun/Browser.\n\n## Features\n\n- 🤖 **QR Code**: Customizable Generation \u0026 Reading\n- 📊 **Barcode**: `CODE128`, `EAN`, `EAN-13`, `EAN-8`, `EAN-5`, `EAN-2`, `UPC (A)`, `CODE39`, `ITF-14`, `MSI`, `Pharmacode`, `Codabar`—Generation \u0026 Reading\n- 📦 **Lightweight**: Zero dependencies\n- 🚀 **Fast**: Built with performance in mind\n- 📜 **TypeScript**: Strongly typed\n- 📚 **Simple**: Easy to use\n- 📖 **Documentation**: Well-documented\n- 🛠 **Library \u0026 CLI**: Interact in different ways\n\n## Install\n\nIt's simple to install the library and CLI:\n\n```sh\nnpm install qrx\nbun add qrx\nyarn add qrx\npnpm add qrx\n```\n\n_Check out the package.json scripts for more commands._\n\n## Usage\n\n### QR Code\n\n```html\n\u003cdiv id=\"qr-code\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\nnew QRCode(document.getElementById(\"qr-code\"), \"https://stacksjs.org\");\n\u003c/script\u003e\n```\n\nIf you want to customize the QR code, you can pass in an options object:\n\n```html\n\u003cdiv id=\"qr-code\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\nconst options = {\n  width: 2,\n  height: 100,\n  format: 'auto',\n  displayValue: true,\n  fontOptions: '',\n  font: 'monospace',\n  text: undefined,\n  textAlign: 'center',\n  textPosition: 'bottom',\n  textMargin: 2,\n  fontSize: 20,\n  background: '#ffffff',\n  lineColor: '#000000',\n  margin: 10,\n  marginTop: undefined,\n  marginBottom: undefined,\n  marginLeft: undefined,\n  marginRight: undefined,\n  valid() { },\n}\n\nvar qrCode = new QRCode(document.getElementById(\"qr-code\"), options);\n\u003c/script\u003e\n```\n\nYou can also use methods to interact with the QR code:\n\n```ts\nqrCode.clear() // clear the code\nqrCode.makeCode('https://docs.stacksjs.org') // create another code\n```\n\n### Barcode\n\nA lightweight Barcode library with zero dependencies. It supports multiple barcode formats and works in browsers and with _Node.js \u0026 Bun_.\n\n#### Supported Formats\n\n- [CODE128](https://ts-quick-reaction.netlify.app/api/barcode/CODE128)\n  - CODE128 (automatic mode switching)\n  - CODE128 A/B/C (force mode)\n- [EAN](https://ts-quick-reaction.netlify.app/api/barcode/EAN)\n  - EAN-13\n  - EAN-8\n  - EAN-5\n  - EAN-2\n  - UPC (A)\n  - UPC (E)\n- [CODE39](https://ts-quick-reaction.netlify.app/api/barcode/CODE39)\n- [ITF](https://ts-quick-reaction.netlify.app/api/barcode/ITF-14)\n  - ITF\n  - ITF-14\n- [MSI](https://ts-quick-reaction.netlify.app/api/barcode/MSI)\n  - MSI10\n  - MSI11\n  - MSI1010\n  - MSI1110\n- [Pharmacode](https://ts-quick-reaction.netlify.app/api/barcode/pharmacode)\n- [Codabar](https://ts-quick-reaction.netlify.app/api/barcode/codabar)\n\n#### Browser Example\n\n````html\n\u003csvg id=\"barcode\"\u003e\u003c/svg\u003e\n\u003c!-- or --\u003e\n\u003ccanvas id=\"barcode\"\u003e\u003c/canvas\u003e\n\u003c!-- or --\u003e\n\u003cimg id=\"barcode\"/\u003e\n````\n\n##### Simple example\n\n````javascript\nbarcode('#barcode', 'Hi!')\n````\n\n![Result](https://s3-eu-west-1.amazonaws.com/js-barcode/barcodes/simple.svg)\n\n#### Example with options\n\n```ts\nimport { barcode } from '@stacksjs/qrx'\n\nbarcode('#barcode', '1234', {\n  format: 'pharmacode',\n  lineColor: '#0aa',\n  width: 4,\n  height: 40,\n  displayValue: false\n})\n```\n\n![Result](https://s3-eu-west-1.amazonaws.com/js-barcode/barcodes/advanced.svg)\n\n#### More advanced use case\n\n```ts\nimport { barcode } from '@stacksjs/qrx'\n\nbarcode('#barcode')\n  .options({ font: 'OCR-B' }) // Will affect all barcodes\n  .EAN13('1234567890128', { fontSize: 18, textMargin: 0 })\n  .blank(20) // Create space between the barcodes\n  .EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16, marginTop: 15 })\n  .render()\n```\n\n![Result](https://s3-eu-west-1.amazonaws.com/js-barcode/barcodes/simple.svg)\n\n#### Or define the value and options in the HTML element\n\nUse any `barcode-*` or `data-*` as attributes where `*` is any option.\n\n````html\n\u003csvg\n  class=\"barcode\"\n  barcode-format=\"upc\"\n  barcode-value=\"123456789012\"\n  barcode-text-margin=\"0\"\n  barcode-font-options=\"bold\"\n\u003e\u003c/svg\u003e\n````\n\nAnd then initialize it with:\n\n```ts\nbarcode('.barcode').init()\n```\n\n![Result](https://s3-eu-west-1.amazonaws.com/js-barcode/barcodes/init.svg)\n\n#### Retrieve the barcode values so you can render it any way you'd like\n\nPass in an object which will be filled with data.\n\n```ts\nconst data = {}\nbarcode(data, 'text', { ...options })\n```\n\ndata will be filled with a ``` encodings ``` property which has all the needed values. See docs for examples of what data looks like.\n\n#### Node.js \u0026 Bun\n\n----\n\n#### With canvas\n\n```ts\nimport { barcode } from '@stacksjs/qrx'\nimport { createCanvas } from 'canvas'\n\nconst canvas = createCanvas()\n\nbarcode(canvas, 'Hello')\n\n// As this is a node-canvas, you can configure it as you like:\n// see https://github.com/Automattic/node-canvas for more information\n```\n\n#### With svg\n\n```ts\nimport { DOMImplementation, XMLSerializer } from 'xmldom'\n\nconst xmlSerializer = new XMLSerializer()\nconst document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null)\nconst svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg')\n\nBarcode(svgNode, 'test', {\n  xmlDocument: document,\n})\n\nconst svgText = xmlSerializer.serializeToString(svgNode)\n```\n\n#### Options\n\nFor information about how to use the options, see the docs.\n\n| Option | Default value | Type |\n|--------|---------------|------|\n| [`format`](https://ts-quick-reaction.netlify.app/api/barcode/#format) | `\"auto\" (CODE128)` | `String` |\n| [`width`](https://ts-quick-reaction.netlify.app/api/barcode/#width) | `2` | `Number` |\n| [`height`](https://ts-quick-reaction.netlify.app/api/barcode/#height) | `100` | `Number` |\n| [`displayValue`](https://ts-quick-reaction.netlify.app/api/barcode/#display-value) | `true` | `Boolean` |\n| [`text`](https://ts-quick-reaction.netlify.app/api/barcode/#text) | `undefined` | `String` |\n| [`fontOptions`](https://ts-quick-reaction.netlify.app/api/barcode/#font-options) | `\"\"` | `String` |\n| [`font`](https://ts-quick-reaction.netlify.app/api/barcode/#font) | `\"monospace\"` | `String` |\n| [`textAlign`](https://ts-quick-reaction.netlify.app/api/barcode/#text-align) | `\"center\"` | `String` |\n| [`textPosition`](https://ts-quick-reaction.netlify.app/api/barcode/#text-position) | `\"bottom\"` | `String` |\n| [`textMargin`](https://ts-quick-reaction.netlify.app/api/barcode/#text-margin) | `2` | `Number` |\n| [`fontSize`](https://ts-quick-reaction.netlify.app/api/barcode/#font-size) | `20` | `Number` |\n| [`background`](https://ts-quick-reaction.netlify.app/api/barcode/#background)  | `\"#ffffff\"` | `String (CSS color)` |\n| [`lineColor`](https://ts-quick-reaction.netlify.app/api/barcode/#line-color) | `\"#000000\"` | `String (CSS color)` |\n| [`margin`](https://ts-quick-reaction.netlify.app/api/barcode/#margins) | `10` | `Number` |\n| [`marginTop`](https://ts-quick-reaction.netlify.app/api/barcode/#margins) | `undefined` | `Number` |\n| [`marginBottom`](https://ts-quick-reaction.netlify.app/api/barcode/#margins) | `undefined` | `Number` |\n| [`marginLeft`](https://ts-quick-reaction.netlify.app/api/barcode/#margins) | `undefined` | `Number` |\n| [`marginRight`](https://ts-quick-reaction.netlify.app/api/barcode/#margins) | `undefined` | `Number` |\n| [`valid`](https://ts-quick-reaction.netlify.app/api/barcode/#valid) | `function(valid){}` | `Function` |\n\n## Testing\n\n```bash\nbun test\n```\n\n## Changelog\n\nPlease see our [releases](https://github.com/stackjs/qrx/releases) page for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/stacksjs/qrx/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Stacks Discord Server](https://discord.gg/stacksjs)\n\n## Postcardware\n\n“Software that is free, but hopes for a postcard.” We love receiving postcards from around the world showing where `qrx` is being used! We showcase them on our website too.\n\nOur address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎\n\n## Sponsors\n\nWe would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.\n\n- [JetBrains](https://www.jetbrains.com/)\n- [The Solana Foundation](https://solana.com/)\n\n## Credit\n\nMany thanks for the libraries that laid the groundwork:\n\n- **JsBarcode**: \u003chttps://github.com/lindell/JsBarcode\u003e\n- **Quagga**: \u003chttps://github.com/ericblade/quagga2\u003e\n- **QRCode.js**: \u003chttps://github.com/davidshimjs/qrcodejs\u003e\n\n## License\n\nThe MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.\n\nMade with 💙\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/@stacksjs/qrx?style=flat-square\n[npm-version-href]: https://npmjs.com/package/@stacksjs/qrx\n[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/qrx/ci.yml?style=flat-square\u0026branch=main\n[github-actions-href]: https://github.com/stacksjs/qrx/actions?query=workflow%3Aci\n\n\u003c!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/qrx/main?style=flat-square\n[codecov-href]: https://codecov.io/gh/stacksjs/qrx --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fqrx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstacksjs%2Fqrx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fqrx/lists"}