Executing User-Supplied SQL In An Interactive DuckDB WASM Session

Problem

You want to load up data into DuckDB WASM in-browser and let users edit and run SQL against it.

Solution

Create a small Monaco-editor component and wire it up to DuckDB.

Discussion

For this section, we:

  • load up the Monaco editor (the thing that powers VS Code)
  • tell it we’re in SQL land
  • add some JavaScripe glue to handle query submission events
  • display output in a separate pane
  • use try … catch to gracefully handle and notify the user about query errors

There is one table which is sourced form one of the 2013 “taxi” Parquet files we covered in the Parquet chapter. While we could have used all of them, the point was to show how efficient DuckDB is and how easy it is to wite up an interactive editor.

The code is annotated so please either view the source or hit up the Quarto source document.

🔵 DuckDB loading…

Type in a SQL query and tap the “Submit” button (or use CMD+Enter), or tap one of the example queries.