Get Started

There are two ways of using this QR & Bar Code tool: as a library or as a CLI.

Library

Given the npm package is installed:

QR Code

<div id="qr-code"></div>

<script type="text/javascript">
new QRCode(document.getElementById("qr-code"), "https://stacksjs.org");
</script>

If you want to customize the QR code, you can pass in an options object:

<div id="qr-code"></div>

<script type="text/javascript">
const options = {
  width: 2,
  height: 100,
  format: 'auto',
  displayValue: true,
  fontOptions: '',
  font: 'monospace',
  text: undefined,
  textAlign: 'center',
  textPosition: 'bottom',
  textMargin: 2,
  fontSize: 20,
  background: '#ffffff',
  lineColor: '#000000',
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  valid() { },
}

var qrCode = new QRCode(document.getElementById("qr-code"), options);
</script>

You can also use methods to interact with the QR code:

qrCode.clear() // clear the code
qrCode.makeCode('https://docs.stacksjs.org') // create another code

Barcode

A lightweight Barcode library with zero dependencies. It supports multiple barcode formats and works in browsers and with Node.js & Bun.

Supported Formats

• CODE128
  • CODE128 (automatic mode switching)
  • CODE128 A/B/C (force mode)
• EAN
  • EAN-13
  • EAN-8
  • EAN-5
  • EAN-2
  • UPC (A)
  • UPC (E)
• CODE39
• ITF
  • ITF
  • ITF-14
• MSI
  • MSI10
  • MSI11
  • MSI1010
  • MSI1110
• Pharmacode
• Codabar

Browser Example

<svg id="barcode"></svg>
<!-- or -->
<canvas id="barcode"></canvas>
<!-- or -->
<img id="barcode"/>

Simple example

barcode('#barcode', 'Hi!')

Example with options

Barcode('#barcode', '1234', {
  format: 'pharmacode',
  lineColor: '#0aa',
  width: 4,
  height: 40,
  displayValue: false
})

More advanced use case

barcode('#barcode')
  .options({ font: 'OCR-B' }) // Will affect all barcodes
  .EAN13('1234567890128', { fontSize: 18, textMargin: 0 })
  .blank(20) // Create space between the barcodes
  .EAN5('12345', { height: 85, textPosition: 'top', fontSize: 16, marginTop: 15 })
  .render()

Or define the value and options in the HTML element

Use any barcode-* or data-* as attributes where * is any option.

<svg
  class="barcode"
  barcode-format="upc"
  barcode-value="123456789012"
  barcode-text-margin="0"
  barcode-font-options="bold"
></svg>

And then initialize it with:

barcode('.barcode').init()

Retrieve the barcode values so you can render it any way you'd like

Pass in an object which will be filled with data.

const data = {}
barcode(data, 'text', { ...options })

data will be filled with a encodings property which has all the needed values. See docs for examples of what data looks like.

Node.js & Bun

---

With canvas

import { barcode } from '@stacksjs/qrx'
import { createCanvas } from 'canvas'

const canvas = createCanvas()

barcode(canvas, 'Hello')

// As this is a node-canvas, you can configure it as you like:
// see https://github.com/Automattic/node-canvas for more information

With svg

import { DOMImplementation, XMLSerializer } from 'xmldom'

const xmlSerializer = new XMLSerializer()
const document = new DOMImplementation().createDocument('http://www.w3.org/1999/xhtml', 'html', null)
const svgNode = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

barcode(svgNode, 'test', {
  xmlDocument: document,
})

const svgText = xmlSerializer.serializeToString(svgNode)

Options

For information about how to use the options, see the docs.

Option	Default value	Type
format	"auto" (CODE128)	String
width	2	Number
height	100	Number
displayValue	true	Boolean
text	undefined	String
fontOptions	""	String
font	"monospace"	String
textAlign	"center"	String
textPosition	"bottom"	String
textMargin	2	Number
fontSize	20	Number
background	"#ffffff"	String (CSS color)
lineColor	"#000000"	String (CSS color)
margin	10	Number
marginTop	undefined	Number
marginBottom	undefined	Number
marginLeft	undefined	Number
marginRight	undefined	Number
valid	function(valid){}	Function

CLI

rpx --from localhost:3000 --to my-project.localhost
rpx --from localhost:8080 --to my-project.test --keyPath ./key.pem --certPath ./cert.pem
rpx --help
rpx --version

Testing

bun test