aditya
H
o
m
e
M
y
S
e
l
f
E
x
p
e
r
i
e
n
c
e
M
y
W
o
r
k
R
e
v
i
e
w
s
C
e
r
t
i
f
i
c
a
t
i
o
n
s
B
l
o
g
C
y
b
e
r
s
e
c
u
r
i
t
y
C
o
n
t
a
c
t
Return to Articles
Web Engineering

How I Built QueryCanvas: Bringing SQL to the Browser Without a Server

2024-04-18

🚀 How I Built QueryCanvas: Serverless SQL in the Browser

Blog Graphic

Let's be real—spinning up an entire PostgreSQL database just to analyze a single, moderately sized CSV file for a side project is exhausting. You have to configure Docker, manage constraints, and deal with boilerplate before writing your very first SELECT.

I wanted a better way. I wanted to drop a file into a browser window and immediately start querying. No servers. No wait times. Total privacy.

That itch led to the creation of sql.adityakasyap.com (QueryCanvas).

🤯 Enter DuckDB-Wasm

The magic behind QueryCanvas isn't a complex backend infrastructure; it's the sheer power of WebAssembly (Wasm). By compiling DuckDB—a notoriously fast analytical SQL engine—into Wasm, the entire database runs directly inside your browser tab's memory.

When you drop a file into QueryCanvas, it never touches the cloud.

The Technical Stack:

  • Next.js & TypeScript: For a robust, type-safe frontend experience.
  • DuckDB-Wasm: The core database engine running client-side.
  • Cloudflare Workers: Handling the lightweight AI Copilot logic without slowing down the primary thread.

🔥 Overcoming the Challenges

It wasn't a plug-and-play experience. Managing an in-memory SQL database inside a browser introduces fascinating challenges.

1. State Management & Sharing

How do you "share" a database session with a colleague if no server exists to host it?

Instead of traditional database saving, I engineered a solution to serialize the current SQL queries and UI state, compressing it tightly, and injecting it directly into the URL fragment (the # portion). If you write an amazing query, you literally just copy and paste the URL. When your friend opens it, the application unpacks the state and reconstructs the IDE instantly.

2. The AI Copilot 🤖

Not everyone remembers the exact syntax for a moving average window function. I built an AI copilot that translates plain English into executable SQL.

Because the data never leaves the browser, how does the AI know what to write? The system extracts only the table schemas (Column Names and Types) and sends that metadata via a Cloudflare Worker to a Language Model. Your actual row data remains 100% private.

💡 The Takeaway

Building QueryCanvas radically changed how I view frontend development. The browser is no longer just a document viewer; it's an incredibly powerful computing environment capable of running complex data pipelines.

If you want to see what serverless analytics feels like, try dropping a CSV into QueryCanvas today.