dbxlite Architecture: Browser-Native SQL at Scale

A deep dive into how dbxlite brings full SQL capabilities to your browser using WebAssembly, DuckDB, and modern web APIs.

10 min read

dbxlite is a browser-native SQL analytics application that runs entirely in your browser. No servers, no uploads, no compromises on privacy. Here's how we built it.

Overview

At its core, dbxlite leverages DuckDB compiled to WebAssembly to provide a full-featured analytical database engine directly in your browser. This architecture enables powerful SQL queries on local files without any data leaving your machine.

ConnectorStatusArchitectureNotes
DuckDBImplementedBrowser-only WASMNo server required
BigQueryImplementedDirect to GCPCORS natively supported
SnowflakePlannedVia CORS proxyFuture release

Key Technical Highlights

  • DuckDB runs entirely in-browser using WebAssembly (~105MB bundle)
  • File handle persistence - local file references survive browser restarts
  • BigQuery connects directly to Google APIs (no proxy needed)
  • Type normalization unifies data types across connectors
  • Memory-safe streaming with backpressure mechanisms

System Architecture

The application follows a layered architecture with clear separation between the UI, query routing, connector implementations, and data transformation layers.

Local Storage Architecture

dbxlite uses multiple storage mechanisms to handle different file types and maintain state across sessions.

Storage TypePersistsLocationPurpose
File handlesYesIndexedDBReferences to local files via File System Access API
User settingsYeslocalStorageTheme, formatting, editor preferences
DuckDB databaseNoBrowser RAMQuery execution engine - tables lost on refresh
Uploaded buffersNoDuckDB virtual FSFiles copied to memory during session
Remote URLsYes*localStorageURL references only, files fetched on-demand

WebAssembly & DuckDB

WebAssembly enables near-native performance in browsers by providing a binary instruction format that can be decoded and executed efficiently.

AspectTraditional JSWebAssembly
FormatText (parsed)Binary (decoded)
SpeedJIT compilationPre-compiled
PerformanceVariable (GC pauses)Predictable

DuckDB WASM is the full DuckDB database engine compiled to WebAssembly - approximately 105MB with all features. It runs entirely in the browser with no server component.

WASM Bundle Selection

dbxlite uses the EH (Exception Handling) bundle for maximum compatibility:

BundleProsCons
EH (Selected)Works everywhere, no special headersSingle-threaded
MVPSmallest sizeLimited features
COIMulti-threaded, fastestRequires COOP/COEP headers

Worker Architecture

All DuckDB operations run in a dedicated Web Worker to keep the main thread responsive. The worker communicates with the main thread using a structured message protocol.

Message Types

Worker → Main Thread:

  • inited - Worker initialized and ready
  • json-schema - Result schema information
  • json / arrow - Result data chunks
  • query-stats - Execution statistics
  • done - Query execution complete
  • error - Error occurred

Main Thread → Worker:

  • init - Initialize with bundle paths
  • run - Execute query with options
  • register_file - Register uploaded file
  • cancel - Cancel running query
  • ack - Acknowledge chunk (backpressure)

Memory Management

Careful memory management is essential when running a database engine in the browser.

SettingValuePurpose
memory_limit-1Unlimited (browser limits)
threads1Reduce fragmentation
MAX_OUTSTANDING2Backpressure limit
MAX_CHUNK_BYTES5MBJSON chunk size
GC_INTERVAL15sPeriodic cleanup

BigQuery Integration

BigQuery integration connects directly to Google APIs without requiring a proxy server. Google's APIs support CORS natively, enabling secure browser-to-API communication.

React Application Structure

The frontend is built with React, using a provider-based architecture for state management and a collection of custom hooks for business logic.

Key Custom Hooks

HookPurpose
useTabManagerTab CRUD operations and persistence
useQueryExecutionQuery execution, streaming, and cancellation
useFileOperationsFile open, save, and SQL insert operations
useFileReloadRestore file handles from IndexedDB on app load
useKeyboardShortcutsGlobal keyboard bindings and shortcuts

Getting Started

Ready to try dbxlite? Head over to sql.dbxlite.com and start querying your data. No signup required, no data uploaded - just powerful SQL in your browser.

The project is open source. Check out the code on GitHub.