JSON Table Explorer

Query your JSON data with SQL using DuckDB Wasm in the browser.

Tech Stack

• DuckDB Wasm - SQL query engine running in WebAssembly
• Svelte - Reactive UI framework
• Tailwind CSS - Utility-first CSS framework
• Vite - Fast build tool

Features

• 📤 Upload JSON files directly in the browser
• 💾 Query JSON data using SQL syntax
• 📊 View results in a formatted table
• ⬇️ Download query results as JSON
• 🚀 Fast in-browser processing with DuckDB Wasm
• 🎨 Modern UI with Tailwind CSS

Getting Started

Installation

npm install

Development

npm run dev

Open your browser to the URL shown in the terminal (typically http://localhost:5173)

Build for Production

npm run build

Preview Production Build

npm run preview

Usage

1. Upload JSON File: Click the file input to upload your JSON file (must be valid JSON)
2. Write SQL Query: Enter your SQL query in the textarea. The JSON data is available as json_data table
3. Execute: Click "Execute Query" to run your SQL query
4. View Results: Results are displayed in a formatted table
5. Download: Click "Download Results" to export results as JSON

Example Queries

Assuming your JSON file contains an array of objects like:

[
  {"id": 1, "name": "Alice", "age": 30, "city": "New York"},
  {"id": 2, "name": "Bob", "age": 25, "city": "London"},
  {"id": 3, "name": "Charlie", "age": 35, "city": "Paris"}
]

Try these SQL queries:

-- Select all data
SELECT * FROM json_data

-- Filter by condition
SELECT * FROM json_data WHERE age > 28

-- Aggregate functions
SELECT city, COUNT(*) as count, AVG(age) as avg_age 
FROM json_data 
GROUP BY city

-- Order results
SELECT name, age FROM json_data ORDER BY age DESC

-- Complex queries
SELECT 
  city,
  COUNT(*) as total_people,
  MIN(age) as youngest,
  MAX(age) as oldest
FROM json_data
GROUP BY city
HAVING COUNT(*) > 0

Notes

• The JSON file should contain either an array of objects or a single object
• DuckDB supports standard SQL syntax including JOINs, aggregations, window functions, and more
• Large JSON files are processed efficiently thanks to DuckDB's columnar storage
• The app requires COOP/COEP headers for SharedArrayBuffer support (configured in Vite)

Todo

Add another DB option: AlaSQL since the DuckDB Asml takes more than 30MB.