DEV Community: RahaLune QR Studio

Building a Client-Side QR Code Debugger with 6 Optical Tests and 10 Languages

RahaLune QR Studio — Wed, 28 Oct 2026 12:10:27 +0000

Have you ever scanned a QR code that looked perfectly fine on a high-resolution screen, but failed miserably when printed?

It happens all the time. Low contrast, missing quiet zones, or oversized logos can easily break the error correction data inside a QR code, rendering it useless to smartphone cameras.

To solve this, we built the RahaLune QR Code Debugger. It is a 100% client-side tool that runs six standardized optical tests on any uploaded QR code image, giving users a clear scannability score before they send anything to the printer.

Recently, we rolled out a massive update: native translation into 10 languages, including full Right-to-Left layout support for Arabic and Urdu.

Here is a look at how we built it and the technical challenges we solved along the way.

The 6 Optical Tests
When a user uploads an image, the tool processes it locally and runs the following checks:

** WCAG 2.1 Luminance:** Calculates the contrast ratio between the foreground modules and the background. If it falls below the 4.5 to 1 accessibility threshold, it flags a warning.

Quiet Zone (Margin): Verifies that there is enough uninterrupted white space around the perimeter, at least 4 modules, for scanners to detect the code boundaries.

Print Quality: Evaluates pixel dimensions against standard 300 DPI print requirements to prevent blurry outputs.

Error Recovery: Identifies the Reed-Solomon resilience level to determine how much damage the code can sustain.

Logo Impact: Measures center obstruction to ensure brand logos do not exceed the 30% error correction ceiling.

Native Scan Test: Runs parallel decode trials using both the jsQR library and the native BarcodeDetector API to simulate real-world hardware and mobile scanners.

The Localization Challenge
We wanted the tool to be accessible globally, so we translated the entire interface into 10 languages: English, French, Spanish, German, Turkish, Chinese, Indonesian, Malay, Arabic, and Urdu.
Since RahaLune is a purely client-side React application, we opted for a lightweight JSON-based translation strategy. We dynamically load the correct JSON file based on the URL parameter. This keeps the initial JavaScript bundle size small and ensures fast load times.

Handling Right-to-Left Layouts
Supporting Arabic and Urdu was not just about swapping text strings. It required a complete structural layout flip.
If you are building a web app with Right-to-Left support, avoid hardcoding directional styles like margin-left or padding-right. Instead, embrace CSS logical properties. For example, use margin-inline-start instead of margin-left, and padding-inline-end instead of padding-right.

We also dynamically update the root HTML element based on the user's selected language, setting the direction attribute to Right-to-Left or Left-to-Right accordingly. This ensures that the six inspection cards, navigation menus, and drag-and-drop upload zones mirror perfectly for Right-to-Left languages, while native font rendering keeps the typography feeling natural.

SEO for Localized Client-Side Apps
Making the app multilingual is only half the battle. Ensuring it gets found is the other half.

To ensure the localized pages rank well, we dynamically update the page title, meta description, and Open Graph tags based on the active language. Additionally, we programmatically inject hreflang tags into the page head to tell search engines exactly where the different language versions are hosted, preventing duplicate content issues and boosting regional search visibility.

Try It Out
We now have a QR code debugger that speaks 10 languages, processes data entirely in the browser, and remains 100% free forever. No logins, no ads, and no server-side image tracking.

If you want to see how the Right-to-Left layout handles the six inspection cards, switch the language to Arabic or Urdu using the header dropdown.

Try the Multi-Language QR Code Debugger here:
https://rahalune-qr-studio.vercel.app/debugger

How We Localized a Client-Side Web App into 10 Languages (With Full RTL Support)

RahaLune QR Studio — Sun, 25 Oct 2026 07:03:53 +0000

We have a simple mission at RahaLune: build professional-grade tools that are 100% free, private, and accessible to everyone.

Until recently, our QR Scanner was English-only. We received feedback from users in the Middle East, South America, and Europe asking for native language support.

Today, I’m thrilled to announce that the RahaLune QR Scanner is now natively translated into 10 languages.

The 10 Languages

We now support:
🇺🇸 English, 🇫🇷 French, 🇪🇸 Spanish, 🇩🇪 German, 🇹🇷 Turkish, 🇨🇳 Chinese (Simplified), 🇮🇩 Indonesian, 🇲🇾 Malay, 🇸🇦 Arabic, and 🇵🇰 Urdu.

It’s Not Just Translation, It’s a Layout Shift

Translating the text was the easy part. The real challenge was supporting Arabic and Urdu.

These are Right-to-Left (RTL) languages, which means the entire scanner interface has to flip. We spent hours ensuring that the upload zone, the scanner tabs, and the navigation menus all look perfect when reading right-to-left.

Still 100% Free & Private

Despite this massive update, our core promises haven't changed:

No Logins: Just open the page and use it.
No Ads: The tools are free, forever.
100% Client-Side: Your images never leave your browser.

Try It Out

I'd love for you to test out the localization. Head over to the scanner, use the language dropdown in the top right corner, and let me know how it feels in your native language.

👉 Try RahaLune QR Scanner

Breaking the Language Barrier: Our Journey to 10 Native Languages

RahaLune QR Studio — Wed, 21 Oct 2026 13:19:59 +0000

We have a simple mission at RahaLune: build professional-grade tools that are 100% free, private, and accessible to everyone.

But "accessible to everyone" is easier said than done.

Until recently, our QR Code Generator was English-only. We received feedback from users in the Middle East, South America, and Europe asking for native language support.

Today, I’m thrilled to announce that RahaLune QR Studio is now natively translated into 10 languages.

The 10 Languages

It’s Not Just Translation, It’s a Layout Shift

Translating the text was the easy part. The real challenge was supporting Arabic and Urdu.

These are Right-to-Left (RTL) languages, which means the entire user interface has to flip. We spent hours ensuring that the navigation bar, the QR input forms, and the design studio controls all look perfect when reading right-to-left.

We also made sure the fonts were correct (using Amiri or Noto Sans Arabic) so the text feels native, not machine-generated.

Still 100% Free & Private

Despite this massive update, our core promises haven't changed:

No Logins: Just open the page and use it.
No Ads: The tools are free, forever.
100% Client-Side: All translation files are loaded locally. Your QR code data never leaves your browser.

Try It Out

I'd love for you to test out the localization. Head over to the site, use the language dropdown in the top right corner, and let me know how it feels in your native language.

👉 Try RahaLune QR Studio

Happy building!

Building a Client-Side Batch QR Code Generator (No Backend Required)

RahaLune QR Studio — Sat, 17 Oct 2026 11:54:13 +0000

How we handled generating 100+ styled QR codes and packaging them into a ZIP entirely in the browser.

Have you ever needed to generate 50 QR codes for event badges, or 100 codes for a marketing campaign?

Most tools require you to create an account, upload your data to their server, and generate them one by one. That's slow, frustrating, and a privacy nightmare.

We wanted to build something better: a 100% client-side Batch QR Generator.

Here's a look at what we built and how it handles scale without touching a backend.

The Workflow

Input: Paste a list of URLs, upload a CSV, or use manual entry.
Style: Apply a unified design (colors, eye markers, logo) to every QR code in the batch simultaneously.
Generate: Click one button to render up to 100 unique styled QR codes.
Export: Bundle all the QR codes into a single .zip file or download a print-ready PDF.

The Technical Challenge: Client-Side Scaling

Generating one QR code in the browser is easy. Generating 100+ high-resolution styled QR codes, rendering them to canvas, and packaging them into a ZIP file without freezing the UI requires a bit of care.

We utilized:

qr-code-styling for generating the vector and raster outputs.
jszip and file-saver to package the outputs directly in memory.
Asynchronous processing to ensure the browser UI doesn't lock up while processing the batch.

No servers. No data limits. Just pure client-side speed.

Why Client-Side Matters

When you're generating QR codes for a business, your data (URLs, text payloads, UTM parameters) is often sensitive. By keeping the entire process in the browser, your data never leaves your machine.

Try It Out

You can test the tool right now. It's free forever, requires no login, and has no ads.

👉 Try the RahaLune Batch QR Generator

I'd love to hear your feedback on the implementation or any features you'd like to see added next!

We Built a Bulk QR Generator That Handles 500 Codes in the Browser

RahaLune QR Studio — Mon, 12 Oct 2026 05:02:04 +0000

100% client-side, no backend, no uploads. Built with React, JSZip, and Canvas.

We just launched the RahaLune Bulk QR Generator — a tool that generates up to 500 QR codes at once, entirely in the browser.

Here's why we built it and what we learned.

The Problem

Most QR generators create one code at a time. For anyone who needs more than 10 (event organizers, retailers, marketers), this is a nightmare.

We wanted to remove that friction entirely.

What It Does

Upload a CSV file, paste a list, or add items manually. Customize the design once. Generate up to 500 QR codes.

Download as:

ZIP file with PNGs
ZIP file with JPGs
Print sheet PDF

Each QR code can have:

Unique content (URL, text, WiFi, vCard)
Custom filename
Unified styling (colors, logo, pattern)

The Tech Stack

We Built 100+ Free QR Templates (100% Client-Side)

RahaLune QR Studio — Thu, 08 Oct 2026 12:24:07 +0000

A no-login, no-upload templates library that runs entirely in the browser.

We just launched the RahaLune Templates Library — 100+ pre-designed QR code templates, ready to use.

No signup. No uploads. No tracking. Everything runs in the browser.

Why We Built It

Most QR tools expect you to design from scratch. For each QR code:

Pick colors
Choose a pattern
Add a logo
Set the eye marker style
Test scannability
Export

15-30 minutes per QR code. Multiply that by 10 QR codes and it's a full day.

We wanted to remove that friction.

What It Does

100+ templates across 8 categories:

Restaurant & Food — menus, table numbers
Business & Professional — business cards, LinkedIn
Events & Entertainment — wedding invites, tickets
Payment & Finance — PayPal, UPI, Bitcoin
Social Media — Instagram, TikTok, YouTube
Real Estate — property listings
Health & Emergency — medical info, hotlines
Retail & E-commerce — product info, store locators

Pick a template, customize colors, download in PNG/SVG/JPG/PDF. Done in 30 seconds.

Why Client-Side

Everything renders in your browser. No server processes or stores your QR codes.

This matters because QR codes can contain sensitive data — WiFi passwords, payment links, contact info. We don't store any of it.

What We Learned

Categories beat search.
Users don't always know what to search for. Browse-first UX wins.

Scannability > Beauty.
A beautiful QR that doesn't scan is useless. Every template is tested.

Instant customization.
Pre-designed templates are pointless if you can't personalize them.

Multiple formats matter.
PNG for digital, SVG for print, JPG for smaller files, PDF for documents.

Free forever builds trust.
No login. No ads. No watermarks. This is what users want.

Try It

RahaLune Templates Library — free and 100% client-side.

Try it: https://rahalune-qr-studio.vercel.app/templates

What's Next

More templates per category
Seasonal collections
Community submissions
Industry-specific bundles

The promise stays: no login, no ads, no watermarks, free forever.

Let us know what you think in the comments! 💬

Try it: https://rahalune-qr-studio.vercel.app/templates

Support our work: Gumroad · Payhip · PayPal · Fourthwall

Tags: #webdev #javascript #react #design

We Built a Free QR Code Debugger (100% Client-Side)

RahaLune QR Studio — Mon, 05 Oct 2026 17:34:37 +0000

A tool that tests QR codes before you print them. No backend, no uploads, no login.

We recently launched RahaLune QR Code Debugger — a free tool that tests QR codes before printing.

It runs entirely in the browser. No server, no uploads, no tracking.

Here's why we built it and what makes it different.

The Problem

QR codes fail more often than people realize. The usual suspects:

Low contrast between colors
Missing white space (quiet zone)
Low resolution for print
Weak error correction
Oversized logo
Never tested before mass printing

Most of these issues aren't visible on screen — they only show up after printing thousands of copies.

What It Does

Upload any QR code image and get an instant report on 6 diagnostic checks:

Contrast Ratio — WCAG 2.1 luminance difference
White Space — ISO/IEC 18004 compliance
Print Quality — Pixel resolution vs 300 DPI
Error Recovery — Reed-Solomon resilience
Logo Impact — Center obstruction vs error correction ceiling
Scan Test — Parallel decode trials

You get a score from 0-100, plain language explanations, and clear recommendations.

No login. No ads. No uploads.

Why 100% Client-Side

QR codes can contain sensitive data — WiFi passwords, payment links, contact info.

We didn't want to build a tool that stores QR codes on a server. So we didn't.

Every analysis runs in your browser. Your image never leaves your device.

Zero uploads. Zero logging. Zero tracking.

What We Learned

Real-world testing beats theory.
Standard specs don't account for fingerprints, bad lighting, or low-quality phone cameras.

Plain language wins.
Nobody wants to learn about "Reed-Solomon error correction." They want to know: will this scan?

Small fixes have big impact.
Most failed QR codes just need a slight contrast bump or a smaller logo.

Simplicity is hard.
Our first version had 15 features. We removed 9. What's left is what matters.

Try It

RahaLune QR Code Debugger is free and works entirely in your browser.

Try it: https://rahalune-qr-studio.vercel.app/debugger

What's Next

Batch debugging (test 100+ QR codes at once)
PDF report exports
Integration with the main QR Generator

And the promise stays the same: no login, no ads, no tracking, free forever.

If you've ever had a QR code fail after printing, we'd love to hear about it.

Feedback welcome in the comments. 💬

Try it: https://rahalune-qr-studio.vercel.app/debugger

Support our work: Gumroad · Payhip · PayPal · Fourthwall

Tags: #webdev #javascript #react #privacy

We Built a Free QR Scanner That Never Uploads Your Images

RahaLune QR Studio — Sat, 03 Oct 2026 16:23:49 +0000

100% client-side. No backend. No uploads. No tracking.

We just launched RahaLune QR Scanner — a free QR code scanner that runs entirely in the browser.

No login. No ads. No uploads. Just scan.

Why We Built It

Every QR scanner we tried had the same problems:

Required an app download
Asked for unnecessary permissions
Uploaded our images to a server
Showed ads
Tried to upsell us to premium

We wanted something better. So we built it.

What Makes It Different

100% Client-Side
Every scan happens in your browser. Images never leave your device.

No Login
Open the page and start scanning. No account, no email, no friction.

No Ads
No pre-roll. No banners. No sponsored content.

Works Offline
Once loaded, it works without internet.

Handles Edge Cases
Damaged QRs. Low-contrast QRs. QRs with logos. We handle them all.

Core Features

Single Scanner
Upload an image or use your camera to decode one QR at a time.

Batch Scanner
Upload up to 100 QR images at once. Exports results as CSV or JSON.

Formatted Results
Instead of raw strings, we show clean formatted views with action buttons:

URL → "Open Link"
Email → "Send Email"
Phone → "Call Number"
WiFi → "Copy Password"
vCard → "Save Contact"
Location → "Open in Maps"

One-tap Actions
Every QR type has relevant actions. No confusion, no manual parsing.

Why Client-Side Matters

QR codes can contain anything:

A WiFi password
Your full contact info
Payment links
Private messages
Location pins

When you scan these in a third-party app, you're trusting that app with sensitive data.

We believe that trust is misplaced in most tools.

So we built one that treats every QR as if it contains your most sensitive information — because it might.

Zero uploads. Zero logging. Zero tracking.

What We Learned

Simplicity is hard.
Our first version had 15 features. We removed 10. What's left is what matters.

Privacy is a feature, not a constraint.
No backend means faster, safer, and cheaper to run.

Edge cases matter most.
Most scanners work for 90% of QRs. We focused on the 10% that fail — that's where users get frustrated.

Native browser APIs are underused.
Modern browsers offer powerful capabilities that many developers overlook in favor of external libraries.

Camera cleanup is non-negotiable.
Forgetting to release the camera stream leaves the LED on. Users notice. Trust drops.

Try It

RahaLune QR Scanner is free, private, and works entirely in your browser.

Try it: https://rahalune-qr-studio.vercel.app/scanner

What's Next

More QR types with formatted output
Better edge-case handling
Sharing results via URL (still 100% client-side)

The promise stays the same:

No login
No ads
No tracking
Free forever

If you build for real users — not for data harvesting — we'd love to connect.

Let us know what you think in the comments. 💬

Try it: https://rahalune-qr-studio.vercel.app/scanner

Support our work: Gumroad · Payhip · PayPal · Fourthwall

Tags: #webdev #javascript #react #privacy

Building a Privacy-First QR Studio in React (No Backend, No Auth, No Ads)

RahaLune QR Studio — Thu, 01 Oct 2026 17:58:13 +0000

Hey Devs! 👋

I recently launched RahaLune QR Studio — a free QR code generator that runs entirely in the browser. No backend. No login. No ads. Just React + client-side magic.

Since this community loves technical deep dives, I want to share how I built it, what worked, what didn't, and why a client-side approach is underrated.

Let's dive in. 👇

The Core Idea

Most QR generators work like this:

User enters data
Data is sent to a server
Server generates QR with a library
Server returns image

I did the opposite.

Everything happens in the browser:

User enters data
QR is generated client-side with qr-code-styling
No network request. No server. No tracking.

Why Client-Side?

Benefit	Why It Matters
Privacy	User data never leaves the device
Speed	Zero latency from server round-trips
Cost	No server bills, no scaling concerns
Offline	Works without internet (after first load)
Trust	Users can audit the code

The Tech Stack

Here's what powers RahaLune QR Studio:

Why I Stop Using Server-Side QR Generators (And Built a Client-Side Alternative)

RahaLune QR Studio — Sat, 19 Sep 2026 11:07:40 +0000

If you are a developer, you have probably needed to generate a QR code at some point. Maybe for a local dev environment, a conference badge, or a side project.

You go to Google, search for a free QR code generator, pick the first result, paste your URL, download the image, and move on.
But as developers, we should know better. Most of these free tools are server-side traps.

The Problem with Server-Side QR Generators

When you use a traditional online QR generator, here is the typical data flow:

• You type your payload (a URL, Wi-Fi password, vCard, or crypto address) into a form.
• The browser sends an HTTP request to the provider's backend API.
• The server generates the image and returns it.
• The catch: The server now has a permanent log of your payload, your IP address, and your user agent.

Many of these services then use this data for analytics, sell it, or worse: they generate dynamic QR codes that route through their redirect servers. If they decide to introduce a paywall later, your QR codes break, or you are held hostage by a subscription.

As a developer who values privacy and performance, I believe everyday web utilities should not require a backend round-trip.

The Solution: 100% Client-Side Rendering

The modern, secure way to build this utility is entirely in the browser. By leveraging JavaScript to manipulate the canvas or generate inline SVG elements, we can achieve:
• Zero Data Retention: The payload never leaves the user's device.
• Zero Latency: No network requests mean instant generation.
• True Permanence: The output is a static representation of the data. It will work forever, even if the domain that generated it goes offline.

Showcasing: RahaLune QR Studio

I want to share a tool that embodies this client-first philosophy: RahaLune QR Studio.
It is a free, privacy-first QR generator built specifically to avoid the pitfalls of legacy tools.

Here is why it stands out from a technical and practical standpoint:

1. True Local Execution

All rendering happens locally in your browser. Whether you are generating a simple URL or a complex, multi-field vCard payload, the data is processed in memory and immediately discarded. No backend database, no tracking scripts.

2. High-Fidelity, Vector-Ready Exports

Most free tools cap you at low-resolution raster images. RahaLune allows you to export in SVG, PDF, and up to 4096x4096px (4K) PNG or JPG. This is critical for developers and designers who need to embed QR codes into print-ready assets or high-DPI product packaging without pixelation.

3. Intelligent Error Correction

When you add a center logo to a QR code, you are physically destroying data modules. RahaLune automatically boosts the Reed-Solomon Error Correction Level (to Level H, roughly 30% redundancy) when a logo is detected, ensuring the code remains 100% scannable by any standard smartphone camera.

4. Real-Time WCAG Contrast Checking

A beautiful QR code is useless if it cannot be scanned. The studio includes a built-in contrast checker that calculates the WCAG ratio of your custom foreground and background colors in real-time, warning you if the contrast drops below the 4.5:1 threshold required for reliable scanning.

5. Purpose-Built Payload Formats

Beyond standard URLs, it supports structured data formats out of the box, properly encoding them according to their respective specifications:
• Wi-Fi Network configs
• vCard 3.0 and 4.0 contacts
• Crypto wallet addresses (BTC, ETH, etc.)
• Calendar events, SMS, and Multi-URL hubs.

How to Use It

You do not need to write a single line of code to use it, but as a developer, you will appreciate the transparency of the architecture:

-Navigate to RahaLune QR Studio.
-Select your payload format from the sidebar.
-Enter your data and customize the design (gradients, eye markers, margins).
-Observe the real-time scannability checker.
-Download your 4K or vector file. No login, no watermarks, no tracking.

Final Thoughts

As the web moves toward a more privacy-centric future, with the deprecation of third-party cookies, stricter Content Security Policies, and increased browser sandboxing, our everyday tools need to adapt.

We should not have to sacrifice our data or our design quality just to generate a simple matrix barcode. Tools like RahaLune prove that high-performance, beautiful, and completely private web applications are not only possible but should be the standard.

Have you built or used any other great client-side web tools lately?

I would love to hear your thoughts or feedback on the RahaLune implementation in the comments below!