QR Code Styling

Extend functionality with plugins:

• Border plugin – add borders + text
• Custom shape plugins – create plugins to draw your own dots/corners

Example – border with text:

import BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'
import FontFacesPlugin from '@liquid-js/qr-code-styling/font-faces-plugin'

const options = {
    plugins: [
        new BorderPlugin({
            round: 0.8,
            size: 0.15,
            proportional: true,
            color: '#000000',
            text: {
                color: '#ffffff',
                top: {
                    content: 'Scan me!'
                },
                bottom: {
                    content: 'Visit our website'
                }
            }
        }),
        /**
         * Embed fonts used with BorderPlugin
         * 
         * Not needed when using standard or local fonts, but recommended for portability
         * and consistency; use subsetting if possible to reduce the generated file size.
         */
        new FontFacesPlugin([{
            font: 'sans-serif',
            src: `url(data:font/otf;base64,d09GMgABAA...)`
        }])
    ]
}

Example – custom shapes:

import BorderPlugin from '@liquid-js/qr-code-styling/border-plugin'

const options = {
    plugins: [
        {
            drawDot: (args: DrawArgs): SVGElement | undefined => {
                const { size, x, y, document } = args

                const element = document.createElementNS('http://www.w3.org/2000/svg', 'path')
                // Insert your own SVG path definition, or implement neighbour-aware logic through args.getNeighbor()
                element.setAttribute(
                    'd',
                    svgPath`M ${x} ${y + (size - size) / 2}
                  v ${size}
                  h ${size / 2}
                  a ${size / 2} ${size / 2} 0 0 0 0 ${-size}
                  z`
                )

                return element
            }
        }
    ]
}

Tip: see Border plugin and figures for further reference

Backwards compatibility

Before @liquid-js/qr-code-styling version 5.0.0, the generator only supported a single postProcess hook via applyExtension. Existing extensions can still be used, but should be included as plugins: [{ postProcess: extensionFn }] to maintain forwards compatibility once the deprecated extension interface is removed.