DEV Community: sharefun2023

How I Built a Free SVG to PNG Converter in 1 Hour

sharefun2023 — Tue, 04 Aug 2026 08:05:54 +0000

I needed a quick way to convert SVG icons to PNG for a project. Every online converter I found required uploading files to a server — slow, privacy-invasive, and overkill for a 2KB icon.

So I built imgloft.com — a free, client-side SVG to PNG converter that works entirely in your browser. No uploads, no server, 100% private.

The Problem

Most online SVG-to-PNG tools follow the same pattern:

Upload your SVG to their server
Server runs a conversion library (ImageMagick, librsvg, etc.)
Download the result

This is fine for occasional use, but it breaks down when:

You're working with sensitive design assets
The file is large and upload takes forever
You're offline or behind a restrictive firewall
You just want to convert a tiny icon without waiting

The 1-Hour Solution

The entire converter is built with three browser APIs:

// 1. Read the SVG file
const reader = new FileReader();
reader.onload = (e) => {
  const svgText = e.target.result;

  // 2. Draw it on a canvas at the desired resolution
  const img = new Image();
  const svgBlob = new Blob([svgText], {type: 'image/svg+xml'});
  img.src = URL.createObjectURL(svgBlob);

  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // 3. Export as PNG
    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob);
      // Trigger download
    }, 'image/png');
  };
};
reader.readAsText(file);

That's it. Three APIs, zero dependencies, zero server cost.

Why It Only Took 1 Hour

No backend. The entire tool runs in the browser using the Canvas API. No Express, no ImageMagick, no Docker container. Just a static HTML file served from Cloudflare Pages.

No auth. Users don't need accounts — they come, convert, and leave. No database, no user management, no session tokens.

No framework. Plain HTML, vanilla JavaScript, and a few lines of CSS. No React, no build step, no node_modules.

What I Learned

Client-side is underrated. The browser can do way more than we give it credit for. SVG rendering, image encoding, even basic image manipulation — all built in.

Ship the MVP. I could have spent weeks adding batch conversion, format options, color filters. Instead I shipped the core feature in an afternoon and let users tell me what they need.

Free tools attract real users. Within days of going live, Google started indexing the site. People are searching for "svg to png converter" — 40,000 times a month. The demand is real.

Try It Yourself

imgloft.com — drag any SVG, get a PNG instantly. Also includes compress, resize, and crop tools.

If you're thinking about building a micro-tool site, just do it. Ship the simplest version first. The browser is your backend.

Building a Client-Side SQL Formatter with Vanilla JS and Web Workers

sharefun2023 — Mon, 20 Jul 2026 15:35:46 +0000

Most SQL formatters process queries server-side. That means every time you click "Format", your SQL gets sent to a random backend — with no guarantee of what happens to it.

I wanted something different: a formatter where your data never leaves your browser.

The Stack

sqlformat.io is built with:

Vanilla JavaScript — no framework, no build step
sql-formatter — the formatting engine
Web Workers — formatting runs off the main thread so the UI stays snappy even on 1000+ line queries
Cloudflare Pages — zero-cost hosting with global edge caching

Architecture

User pastes SQL
  ↓
Main thread sends to Web Worker
  ↓
Worker calls sql-formatter with dialect-specific options
  ↓
Formatted SQL sent back to main thread
  ↓
Rendered with syntax highlighting (no library needed — just regex + <span>)

Key insight: the sql-formatter library alone is ~50KB gzipped. Running it in a Web Worker means the main thread never blocks, and the user can keep typing while large queries format in the background.

Why No Server?

Privacy — zero bytes leave the user browser
Offline — works after the page loads, no internet needed
Scale — no server costs, no rate limits, no API keys
Speed — no round trip, instant formatting

Lessons Learned

Web Workers are underrated — they turn a potentially laggy text processor into a buttery-smooth UX
SQL dialects are deceptively complex — MySQL vs PostgreSQL vs BigQuery all have different quoting rules, and the formatter needs to handle inline comments and dollar-quoted strings that span multiple lines
Regex-based syntax highlighting works surprisingly well for SQL — you do not need a parser, just a few well-placed regex patterns for keywords, strings, numbers, and comments

Try it: sqlformat.io

Source: github.com/sharefun2023/sqlformat.io

I Got Tired of Slow SQL Formatters That Upload My Queries — So I Built a Free One

sharefun2023 — Mon, 20 Jul 2026 15:35:08 +0000

I write a lot of SQL every day. And every online formatter I tried had the same problems:

Uploads queries to their server — privacy nightmare when you are working with production schema
Tiny text area — cannot handle 500+ line queries without lag
3 ads before you even see the formatted output

So I built sqlformat.io — a no-BS SQL formatter.

What It Does

Client-side only — everything runs in YOUR browser via Web Worker. Zero bytes leave your device
15+ SQL dialects — MySQL, PostgreSQL, SQLite, BigQuery, Snowflake, T-SQL, and more
No signup, no ads, no upload — ever
Instant — paste, click Format, done

Why I Built It

I got tired of copy-pasting production queries into random websites and wondering where they ended up. With sqlformat.io, you can disconnect your internet after the page loads and keep formatting offline.

Extra Tools Included

It is not just a formatter — the site has several free SQL tools:

Diff — compare two SQL queries side by side
Minify/Compress — strip whitespace for embedding in code
Validate — syntax check across dialects
ER Diagram — visualize table relationships
SQL to JSON — convert query results
Data Generator — generate test data
Explain Visualizer — MySQL/PostgreSQL EXPLAIN output as a tree

Tech Stack

Vanilla JS + sql-formatter library, hosted on Cloudflare Pages. All formatting runs in a Web Worker so the UI stays responsive even on huge queries.

Open source: github.com/sharefun2023/sqlformat.io

Would love feedback from folks who format SQL daily!