@ydtb/n8n-nodes-qr-style

QR Styled Node for n8n

A powerful n8n community node for generating highly customizable QR codes with advanced styling options, gradients, logos, and professional designs using the popular qr-code-styling library.

Features

✨ Advanced QR Code Styling

• Multiple dot styles: Square, Rounded, Dots, Classy, Extra Rounded
• Customizable corner squares and dots with different shapes
• Full gradient support with multiple color stops
• Logo/image embedding with size and positioning controls
• Transparent backgrounds and custom colors

🎨 Professional Design Options

• Linear and radial gradients for all QR elements
• Color picker UI for easy color selection
• Background transparency toggle
• Margin and spacing controls
• Multiple output formats: SVG, PNG, JPEG, WebP

🔧 Technical Controls

• Error correction levels (L, M, Q, H)
• QR code versions (auto-detection or manual)
• Encoding modes (Auto, Numeric, Alphanumeric, Byte, Kanji)
• Cross-origin settings for external images
• Custom image sizing with scanning optimization warnings

Dependencies

This node uses the excellent qr-code-styling library by kozakdenys, which provides advanced QR code customization options. Dependencies include:

• qr-code-styling - Advanced QR code generation with styling
• sharp - Efficient image processing and format conversion
• jsdom - DOM manipulation in Node.js environment
• canvas - Required for logo/image embedding - HTML5 Canvas API for Node.js

Installation

Install the node directly from npm:

npm install @ydtb/n8n-nodes-qr-style

Or install in your n8n instance:

1. Go to Settings > Community Nodes
2. Enter @ydtb/n8n-nodes-qr-style
3. Click Install

Docker Environment Setup

For Docker environments, canvas requires additional system dependencies. Create a custom Dockerfile:

Dockerfile:

# Use the official n8n image as base
FROM docker.n8n.io/n8nio/n8n:latest

# Switch to root to install system dependencies
USER root

# Install canvas system dependencies (required for node-canvas)
RUN apk add --no-cache \
    cairo-dev \
    jpeg-dev \
    pango-dev \
    giflib-dev \
    librsvg-dev \
    pixman-dev \
    pkgconfig \
    build-base

# Install canvas npm package globally as root
RUN npm install -g canvas

# Switch back to node user
USER node

docker-compose.yml:

services:
  n8n:
    build:
      context: .
    # ... rest of your n8n configuration

Then build and run:

docker compose down
docker compose build --no-cache
docker compose up -d

Note: Without canvas dependencies, the node will still work for QR codes without logos/images and will provide clear error messages when image embedding is attempted.

Usage

Basic QR Code Generation

1. Add the QR Styled Node to your workflow
2. Enter the data you want to encode in the Data field
3. Configure basic options:
   • QR Code Size: Width and height in pixels (default: 600)
   • Shape: Square or Circle
   • Output Format: SVG, PNG, JPEG, or WebP

Advanced Styling

Dots Styling

• Dots Type: Choose from Square, Rounded, Dots, Classy, etc.
• Advanced Dots Options: Access gradient colors, rotation, and size controls

Corner Customization

• Corner Square Type: Style the detection pattern squares
• Corner Dot Type: Style the dots inside detection patterns
• Advanced Corner Options: Apply gradients and custom colors

Background Options

• Transparent Background: Toggle for transparent backgrounds
• Background Color: Solid color picker
• Gradient Options: Linear/radial gradients with multiple color stops

Logo Integration

• Logo Image Source: Choose from three options:
  • None: No logo image
  • URL: Embed images from URLs
  • Binary Data: Use binary image data from previous nodes
• Binary Input: When using binary data, specify the binary property name (defaults to 'data')
• Advanced Image Options: Control size, margin, and dot hiding
• Size Warning: Automatic guidance for optimal scanning

Using Binary Logo Images

To use binary image data as the logo:

1. Set Logo Image Source to "Binary Data"
2. Specify the Input Binary Field name containing your image data (usually 'data')
3. Connect a node that provides binary image data (HTTP Request, File System, etc.)
4. Configure Advanced Image Options as needed

Example workflow:

HTTP Request Node (download image) → QR Styled Node (with binary logo) → Output

Gradient Configuration

The node supports sophisticated gradient configurations:

1. Add Gradient Stops: Use the "Add Gradient Stop" button
2. Position Values: Set from 0.0 to 1.0 in sequential order
3. Color Selection: Use the color picker for each stop
4. Important: Keep gradient stops in sequential order for proper display

Output

The node provides both JSON data and binary image output:

JSON Output:

• data: Original input data that was encoded
• qrCodeBase64: Base64 encoded image with data URI format (data:image/svg+xml;base64,... or similar)
• qrCodeSize: Image dimensions in pixels
• outputFormat: Actual format used (svg, png, jpeg, or webp)
• requestedFormat: Format that was originally requested
• generatedAt: ISO timestamp of when the QR code was generated

Output Format Options:

• SVG: Scalable vector format, perfect for web use and infinite scaling (supports transparency)
• PNG: Raster format with transparency support, ideal for print and graphics (supports transparency)
• JPEG: Compressed raster format, best for photos and smaller file sizes (no transparency support)
• WebP: Modern format with excellent compression and quality balance (supports transparency)
• filename: Auto-generated filename with timestamp

Transparency Support:

• Supported formats: SVG, PNG, WebP
• JPEG handling: When transparency is requested with JPEG, a white background is used instead (with warning message)
• The transparency option is available for all formats but behaves differently based on format capabilities

Binary Output:

• qrCode: Binary image data ready for download, saving to file, or further processing
  • fileName: Generated filename (e.g., qr-code-2025-06-27T10-30-45-123Z.png)
  • mimeType: Image MIME type (image/svg+xml, image/png, image/jpeg, or image/webp)
  • fileExtension: File extension (svg, png, jpeg, or webp)

Development

To set up the development environment:

# Clone the repository
git clone https://github.com/yourdigitaltoolbox/qr-style-node.git
cd qr-style-node

# Install dependencies
npm install

# Build the node
npm run build

# Run linting
npm run lint

# Test locally with n8n
npm link

npm link @ydtb/n8n-nodes-qr-style

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Credits

This node is built using the amazing qr-code-styling library by Denys Kozak. All QR code generation and styling functionality is powered by this excellent library.

License

MIT

Support

If you encounter any issues or have questions:

1. Check the Issues section
2. Create a new issue with detailed description
3. Join the n8n community for general n8n questions

---

Made with ❤️ for the n8n community