DuckDB WASM Demo

This page shows off DuckDB running via WebAssembly (WASM) in the browser. A full SQL database engine compiled from C++ to WASM runs entirely client-side with no server required. Below you'll see it query an in-memory table in real-time with no additional server calls!

The WASM binary and worker scripts are fetched from a CDN on page load. A Web Worker is started to keep the UI responsive. A CSV file with sample data is loaded as a table object, and queries execute against this table entirely in your browser's WASM runtime. All of this happens without touching a backend server, but there are startup time penalties.

Our Data

Initial data is loaded from a CSV file. This data contains expense records for different vehicles. We are interested in gas costs, and how often we need to fill up the vehicle's tank. There are "fill-up" records that indicate when a full tank of gas was purchased. We'll use these records to calculate average time and mileage between fill-ups.

The important things here is that vehicle-log-sample.csv is only ~11 KB in size. Deploying database infra for this would be wasteful and complex. We could handle datasets that are several MB in size comfortably, and give users the liberty to run arbitrary SQL queries.

Query goes here...

We can view the important columns and get a feel for the data.

Query goes here...

We care about a single vehicle, and only its gas fill-up records.

Query goes here...

We can now see just the fill-up records for our vehicle.

Query goes here...

Average Fill-Up Statistics

We can create an intermediate table containing mileage differences via a window function. Note that a Common Table Expression (CTE) could be used to avoid creating a physical table.

Query goes here...

We now have access to the mileage and day differences between fill-ups.

Query goes here...

We can find the average mileage and days between fill-ups using an aggregate.

Query goes here...

Yearly Fill-Up Statistics

We can go one step further and aggregate fill-up statistics by year to reveal trends over time.

Query goes here...

Run Custom Queries

Everything above ran automatically, but the database is still live in your browser. Write your own SQL below and run it against the in-memory tables (vehicles, filtered_log, and fillup_differences). Nothing leaves your machine.

Results will appear here after you run a query.

Conclusion

That's it! A really useful pattern to share data directly with clients without server infrastructure. This entire demo is an HTML file, a JavaScript file, and a CSV file. A surprising amount of data analysis is performed on small datasets, which this pattern is well-suited for.