Skip to main content

​
QR Code Styling

Atomix QRGen uses the qr-code-styling library to generate customizable QR codes. Currently, the application provides a default styling configuration optimized for readability and scannability.

​
Default Configuration

The QR codes are generated with the following settings: 
new QRCodeStyling({
  width: 280,
  height: 280,
  data: "",
  dotsOptions: { type: "rounded", color: "#000" },
  backgroundOptions: { color: "#ffffff" },
})
Reference: src/components/qr-code-app/cards/qr-preview/card-qr-preview.tsx:27-33

​
Current Features

Size

Fixed at 280x280 pixels for optimal scanning

Dot Style

Rounded dots for a modern, friendly appearance

Colors

Black dots on white background for maximum contrast

Error Correction

Level M (15%) for balance between size and reliability

​
Available Customization Options

The qr-code-styling library supports extensive customization. Here are the options that could be implemented:
The library supports multiple dot styles:
  • rounded (current default)
  • dots
  • classy
  • classy-rounded
  • square
  • extra-rounded
Different dot patterns can affect scanability. Always test QR codes after changing the pattern.
You can customize:
  • Dot color - Currently #000 (black)
  • Background color - Currently #ffffff (white)
  • Gradient colors - For advanced styling
Ensure sufficient contrast between dots and background. Light-colored dots on light backgrounds will not scan properly.
Customize the three corner squares (position detection patterns):
cornersSquareOptions: {
  type: 'dot' | 'square' | 'extra-rounded',
  color: '#000000'
}
Style the dots inside corner squares:
cornersDotOptions: {
  type: 'dot' | 'square',
  color: '#000000'
}
Add a logo to the center of your QR code:
image: 'path/to/logo.png',
imageOptions: {
  hideBackgroundDots: true,
  imageSize: 0.4,
  margin: 0
}
Keep logos small (0.2-0.4 size ratio) to maintain scanability. The error correction helps preserve readability even with a centered image.

​
Error Correction Levels

The application currently uses error correction Level M (15%), visible in the preview card: 
<div class="flex justify-between">
  <span class="text-gray-600">Corrección</span>
  <span class="font-medium text-gray-900">Nivel M (15%)</span>
</div>
Reference: src/components/qr-code-app/cards/qr-preview/card-qr-preview.tsx:330-332
Error correction levels determine how much of the QR code can be damaged while still being readable:
  • L (Low): 7% recovery
  • M (Medium): 15% recovery (current)
  • Q (Quartile): 25% recovery
  • H (High): 30% recovery
Higher levels allow for more customization (like logos) but create larger QR codes.

​
Future Customization

To implement custom styling in your fork of Atomix QRGen, you would modify the QRCodeStyling initialization in card-qr-preview.tsx:
1

Add state for customization options

const [dotStyle, setDotStyle] = useState<'rounded' | 'square' | 'dots'>('rounded');
const [dotColor, setDotColor] = useState('#000000');
const [bgColor, setBgColor] = useState('#ffffff');
2

Update QRCodeStyling configuration

qr.current = new QRCodeStyling({
  width: 280,
  height: 280,
  data: "",
  dotsOptions: { type: dotStyle, color: dotColor },
  backgroundOptions: { color: bgColor },
});
3

Add UI controls

Create color pickers and style selectors in the preview card UI to allow users to customize their QR codes in real-time.
4

Update QR code on changes

useEffect(() => {
  if (qr.current) {
    qr.current.update({
      dotsOptions: { type: dotStyle, color: dotColor },
      backgroundOptions: { color: bgColor },
    });
  }
}, [dotStyle, dotColor, bgColor]);

​
Best Practices

Test Scanability

Always test your QR codes with multiple scanning apps and devices before using them in production.

Maintain Contrast

Ensure at least a 3:1 contrast ratio between dots and background for reliable scanning.

Consider Context

Choose colors and styles appropriate for where the QR code will be displayed (print, screen, etc.).

Keep It Simple

Simpler designs scan more reliably. Avoid overly complex customizations for critical use cases.

Build docs developers (and LLMs) love

Get started for freeTalk to us