DEV Community

Cover image for We Built an Advanced QR & Barcode Toolkit for the Web
Emir Baycan
Emir Baycan

Posted on

We Built an Advanced QR & Barcode Toolkit for the Web

QR Code Generator

The generator supports many different data types.

You can create QR codes for:

  • text
  • URLs
  • email
  • phone numbers
  • SMS
  • WiFi credentials
  • contact cards
  • locations
  • calendar events

It also supports social links such as:

  • WhatsApp
  • Twitter
  • Instagram
  • Facebook
  • YouTube

And payment formats including:

  • PayPal
  • Bitcoin
  • Ethereum

Deep QR Customization

Instead of generating plain black-and-white QR codes, the generator allows extensive visual customization.

Dot Styles

QR modules can be rendered using different shapes such as:

  • square
  • dots
  • rounded
  • diamond
  • pentagon
  • hexagon
  • star
  • heart
  • triangle
  • leaf
  • gear
  • crescent

Eye Frame Styles

The finder patterns (corner squares) can be customized with styles like:

  • square
  • circle
  • rounded
  • directional frames
  • corner-only styles
  • cut styles

Eye Ball Styles

The center eye elements can be customized independently with shapes including:

  • square
  • circle
  • rounded
  • directional cuts
  • diagonal shapes
  • heart style

Size & Error Correction

QR codes can be generated in multiple sizes:

  • 250px
  • 300px
  • 400px
  • 500px

Error correction levels are configurable:

  • Low (7%)
  • Medium (15%)
  • Quality (25%)
  • High (30%)

Higher error correction allows QR codes to remain scannable even if partially damaged or partially covered.


Color Customization

You can customize:

  • QR foreground color
  • background color
  • gradient effects
  • custom eye colors

This allows the QR code to match a brand or design system.


Advanced Rendering Options

Additional styling options include:

  • rotation
  • liquid radius
  • dot spacing
  • piece stroke
  • gradient rendering

These options allow creating unique QR designs while maintaining scan reliability.


Logo Embedding

You can embed a logo in the center of the QR code.

Because of QR error correction, the code can still be scanned even when part of it is covered by the logo.


Built-in QR Scanner

The platform also includes scanning capabilities.

You can scan codes using:

  • your device camera
  • uploaded images
  • screenshots

The scanner detects both QR codes and traditional barcodes.


Barcode Generator

In addition to QR codes, the platform supports generating traditional barcodes used in:

  • retail
  • logistics
  • inventory systems
  • warehouses

Try It

You can try the platform here:

🔗 https://qr-bar-code.com/

You can:

  • generate QR codes
  • generate barcodes
  • scan QR codes using your camera
  • decode QR codes from images

All directly in your browser.

Top comments (0)