Synth

Query any CSV or JSON file with real SQL, or in plain English, entirely in your browser. There's no database to install and no server to host. When you upload a file, it becomes a SQLite database running client-side in your browser tab.

Live app: synth-sql.com

Features

• The home page opens straight onto the product. Drop a file anywhere on the page (or click to pick one) and you're querying it, with no sign-in. Signed-in users see their saved workspaces in the left column and can reopen any of them, or any saved chat, from there.
• Queries run on a real SQLite database, compiled to WebAssembly by sql.js, so JOINs, GROUP BY, window functions, and subqueries all work against your file.
• Synth reads plain CSV, a JSON array of objects, or newline-delimited JSON (NDJSON). Nested JSON objects flatten into dot-notation columns, and arrays are stored as JSON text you can query with SQLite's json_extract().
• The AI assistant has two modes. SQL Mode returns a query you can run; General Mode answers in plain English. It only sees your tables' schema (column names, types, and row counts), never the rows themselves.
• Signed-in users can turn any query result into a chart: column, bar, line, area, pie, doughnut, or scatter, with editable titles and axis labels and a full-screen view. The AI picks the chart type and writes the titles, working from the same schema-only information as the chat assistant.
• Export to Excel builds a two-sheet .xlsx: the results as an Excel Table, and a native Excel chart linked to those cells, so editing the data updates the chart. The workbook is generated by Python (XlsxWriter) running in the browser through Pyodide, so results never leave your machine.
• You don't need an account to start. Lite Mode keeps everything in memory in your browser. Signing in adds the AI assistant, charts and Excel export, saved queries, and cloud sync for workspaces and chat sessions. Sign in, sign up, email confirmation, and password reset all happen in one modal, opened from the header's Sign in button.
• A workspace can hold up to 10 tables, with table renaming, AI-written joins across tables, and suggested foreign-key relationships. Each CSV can have up to 500,000 rows.
• Your file is only uploaded if you sign in and choose to save it to the cloud.
• Learn SQL has three free interactive courses (SQL Foundations, Joins & Combining Data, and Analytics SQL), 60 lessons in all. Each lesson gives a task, runs your query on real practice tables, checks it against the answer, and tells you exactly what's off. Hints unlock one at a time, the solution unlocks after two tries, and an AI tutor unlocks once you've made an attempt. See LEARN.md.

Pages

Route	File	What it is
/	synth.html	The app: home view (upload and saved workspaces), then the query workspace
/learn	synth.html	Learn SQL: three interactive courses (/learn?lesson=b01 opens a lesson). See LEARN.md
/welcome	welcome.html	About page: Lite vs. Normal Mode comparison, how it works, and background on the project
/about	none	Permanent redirect to /welcome
/guides	guides.html	Index of the SQL how-to guides (/query-csv-with-sql, /sql-cheat-sheet, and others)
/terms, /privacy	terms.html, privacy.html	Terms of Service and Privacy Policy

/?auth=signin or /?auth=signup opens the account modal on load. The /welcome page's Sign in link uses it.

Routes and redirects are defined in vercel.json. The static pages share marketing.css.

How it works

The app is plain HTML, CSS, and JavaScript with no bundler or framework. synth.html holds the markup and styles and loads these scripts in order, sharing globals declared in state.js:

File	Handles
state.js	Shared global state (the database, loaded tables, current user)
csv-parser.js, json-parser.js	Parsing uploaded files into rows
auth.js	Supabase auth and the account modal
checkout.js	Account tiers and feature access
grid.js	The virtualized results grid
charts.js	Charts, the full-screen chart view, SVG download, and Excel export
chat.js	The AI assistant panel
app.js	Home view, uploads, workspaces, and everything else
learn-datasets.js, learn-curriculum.js, learn-grader.js, learn-progress.js, learn.js	The Learn page: lesson tables, the three courses, answer checking, progress, and the page itself (styles in learn.css). See LEARN.md

Other pieces:

• Excel export runs excel_chart.py under Pyodide, which loads only the first time someone exports. The XlsxWriter wheel is vendored in vendor/ so the export doesn't depend on PyPI at runtime.
• The AI assistant goes through a Vercel serverless function (api/chat.js) that proxies to Groq, so the API key never reaches the browser.
• Supabase (Postgres, Auth, and Storage) backs the optional signed-in tier: accounts, saved workspaces, and chat sessions.
• Pushing to main on GitHub deploys to Vercel automatically.

Local development

You'll need Node.js and the Vercel CLI (npm i -g vercel), since the routes under api/ are Vercel serverless functions.

git clone https://github.com/spelillo/synth.git
cd synth
npm install
vercel dev

vercel dev serves synth.html and the api/ functions together, matching production. To work on the front end alone, any static server works (for example python3 -m http.server 8123, then open /synth.html, or /synth.html?view=learn for the Learn page), but the AI assistant, checkout, and the vercel.json routes won't be available.

Tests

npm test           # Learn: answer grader, all 60 lessons against their data, datasets, progress
npm run test:e2e   # Learn: browser test of the whole page (needs Playwright + Chromium)

npm test also runs on every pull request (.github/workflows/test.yml).

Environment variables

The API routes read these from your environment (create a .env.local, which is gitignored):

Variable	Used for
SUPABASE_URL	Server-side Supabase client (admin operations)
SUPABASE_SERVICE_ROLE_KEY	Bypasses RLS for admin routes; never expose this to the client
GROQ_API_KEY	Powers the AI assistant (api/chat.js)
CRON_SECRET	Authenticates scheduled Vercel Cron jobs

The client-side Supabase URL and anon key are hardcoded at the top of auth.js, since there's no bundler to inject them at build time. The anon key is meant to be public. Point both at your own Supabase project for local development.

Tech stack

SQLite (via WebAssembly) · Pyodide + XlsxWriter · Supabase · Groq · Vercel Serverless Functions · vanilla JS/HTML/CSS (no framework, no bundler)

License

There's no LICENSE file, so standard copyright applies: the code isn't licensed for reuse, modification, or redistribution.