# park-bit/sqlide architecture

> Architecture diagram of the GitHub repository park-bit/sqlide, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-05-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/park-bit/sqlide
- Repository: https://github.com/park-bit/sqlide

## Overview

1. **Overall shape**
   SQLide is a client-side, browser-only SQL workbench. There is no traditional backend service in this repo; the app’s core runtime is React in the browser, with database execution handled locally through SQLite compiled to WebAssembly.

2. **Application bootstrap**
   `src/main.tsx` is the entry point that mounts the React app into `index.html`. The app is built with Vite, so the browser receives a static frontend bundle plus static assets from `public/`.

3. **Top-level UI shell**
   `src/App.tsx` acts as the main page composition layer. It likely lays out the editor, results, schema browser, table viewer, and ER diagram into a dashboard-style workspace, while also handling cross-panel coordination through shared state.

4. **Shared coordination layer**
   `src/SqlContext.tsx` is the main architectural boundary for state and actions. It centralizes the in-memory SQLite database instance, query execution, schema metadata, and any derived state consumed by the rest of the UI. This keeps the panels loosely coupled and prevents each component from managing its own database connection.

5. **Local database engine**
   The database is powered by `sql.js`, with the WebAssembly binary stored at `public/sql-wasm.wasm`. Queries run entirely in the browser against an in-memory SQLite database, which is the key local-first design choice and the main data-processing subsystem.

6. **Query authoring**
   `src/SqlEditor.tsx` is the code entry surface, backed by Monaco Editor according to the README. Its role is to accept SQL, support editor conveniences like autocomplete and formatting features, and submit statements into the shared SQL context for execution.

7. **Result presentation**
   `src/ResultPanel.tsx` renders query output and execution feedback. This is the primary sink for SELECT results, execution errors, and likely other run metadata. It depends on the shared context rather than querying the database directly.

8. **Schema exploration and table browsing**
   `src/SchemaExplorer.tsx` and `src/TableDataViewer.tsx` are read-only inspection surfaces for the current database. The schema explorer is for tables/views/columns, while the table viewer is for row-level inspection. Both consume the same context-derived metadata and database state.

9. **Relationship visualization**
   `src/ERDiagram.tsx` visualizes table relationships based on schema metadata and foreign key detection. It is another consumer of the shared database context, transforming relational metadata into a graph-like UI for understanding schema structure.

10. **Session-level external dependency**
    The README mentions a Kanye quote fetched from an external REST API at session start. Architecturally, this is a non-core, optional network dependency that sits outside the database path and does not affect query execution.

11. **Static assets and styling**
    Presentation is implemented with CSS in `src/App.css` and `src/index.css`, plus SVG/icon assets under `src/assets` and `public/`. The app is styled as a polished single-page workbench rather than a server-rendered product.

12. **Build and deployment boundary**
    `vite.config.ts` and the TypeScript config files define the frontend build pipeline. `vercel.json` indicates static deployment on Vercel, which fits the app’s architecture: compiled assets are hosted, while all SQL execution remains in the browser.

13. **Persistence and portability model**
    The system is designed for local memory-first use, with import/export support for `.sqlite` files and CSV/JSON result export as described in the README. That means persistence is user-managed and file-based, not server-backed.

14. **Diagramming the main dependency flow**
    For an architecture diagram, the central path is: React bootstrap → app shell → SQL context → sql.js/WASM database → derived consumers. The UI panels are dependent views of the same local database state, not separate services.

Main entry points: [`src/App.tsx`](https://github.com/park-bit/sqlide/blob/main/src/App.tsx) (App shell), [`src/SqlContext.tsx`](https://github.com/park-bit/sqlide/blob/main/src/SqlContext.tsx) (SQL context), [`src/SqlEditor.tsx`](https://github.com/park-bit/sqlide/blob/main/src/SqlEditor.tsx) (SQL editor), [`src/ResultPanel.tsx`](https://github.com/park-bit/sqlide/blob/main/src/ResultPanel.tsx) (Results panel)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser UI"]
  node_main["main<br/>bootstrap<br/>[main.tsx]"]
  node_app["App shell<br/>layout<br/>[App.tsx]"]
  node_editor["SQL editor<br/>query editor<br/>[SqlEditor.tsx]"]
  node_results["Results panel<br/>output view<br/>[ResultPanel.tsx]"]
  node_schema["Schema explorer<br/>metadata view<br/>[SchemaExplorer.tsx]"]
  node_table["Table viewer<br/>row browser"]
  node_diagram{{"ER diagram<br/>relational viz<br/>[ERDiagram.tsx]"}}
end

subgraph group_engine["Local SQL Engine"]
  node_context[("SQL context<br/>state hub<br/>[SqlContext.tsx]")]
  node_sqljs[("sql.js<br/>wasm sqlite")]
  node_wasm["SQLite wasm<br/>binary runtime<br/>[sql-wasm.wasm]"]
  node_importexport["File I/O<br/>data portability"]
end

subgraph group_platform["Build and Static Assets"]
  node_quoteapi(("Quote API<br/>external dependency"))
  node_vite["Vite build<br/>frontend build<br/>[vite.config.ts]"]
  node_vercel["Vercel deploy<br/>static hosting<br/>[vercel.json]"]
  node_styles["Styles & assets<br/>presentation assets<br/>[App.css]"]
end

node_main -->|"mounts"| node_app
node_app -->|"provides"| node_context
node_app -->|"contains"| node_editor
node_app -->|"contains"| node_results
node_app -->|"contains"| node_schema
node_app -->|"contains"| node_table
node_app -->|"contains"| node_diagram
node_editor -->|"runs queries"| node_context
node_results -->|"reads state"| node_context
node_schema -->|"reads metadata"| node_context
node_table -->|"reads rows"| node_context
node_diagram -->|"reads schema"| node_context
node_context -->|"uses engine"| node_sqljs
node_sqljs -->|"loads runtime"| node_wasm
node_context -->|"imports/exports"| node_importexport
node_app -.->|"styled by"| node_styles
node_vite -->|"builds for"| node_vercel
node_quoteapi -.->|"optional data"| node_app

click node_main "https://github.com/park-bit/sqlide/blob/main/src/main.tsx"
click node_app "https://github.com/park-bit/sqlide/blob/main/src/App.tsx"
click node_context "https://github.com/park-bit/sqlide/blob/main/src/SqlContext.tsx"
click node_editor "https://github.com/park-bit/sqlide/blob/main/src/SqlEditor.tsx"
click node_results "https://github.com/park-bit/sqlide/blob/main/src/ResultPanel.tsx"
click node_schema "https://github.com/park-bit/sqlide/blob/main/src/SchemaExplorer.tsx"
click node_table "https://github.com/park-bit/sqlide/blob/main/src/TableDataViewer.tsx"
click node_diagram "https://github.com/park-bit/sqlide/blob/main/src/ERDiagram.tsx"
click node_wasm "https://github.com/park-bit/sqlide/blob/main/public/sql-wasm.wasm"
click node_vite "https://github.com/park-bit/sqlide/blob/main/vite.config.ts"
click node_vercel "https://github.com/park-bit/sqlide/blob/main/vercel.json"
click node_styles "https://github.com/park-bit/sqlide/blob/main/src/App.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_app,node_editor,node_results,node_schema,node_table,node_diagram toneBlue
class node_context,node_sqljs,node_wasm,node_importexport toneAmber
class node_quoteapi,node_vite,node_vercel,node_styles toneMint
```

## Components

### Browser UI

React application shell and interactive workbench panels

- [main](https://github.com/park-bit/sqlide/blob/main/src/main.tsx): bootstrap · Mounts the React app into the page · `src/main.tsx`
- [App shell](https://github.com/park-bit/sqlide/blob/main/src/App.tsx): layout · Composes the workbench panels and overall page structure · `src/App.tsx`
- [SQL editor](https://github.com/park-bit/sqlide/blob/main/src/SqlEditor.tsx): query editor · Monaco-backed SQL authoring surface · `src/SqlEditor.tsx`
- [Results panel](https://github.com/park-bit/sqlide/blob/main/src/ResultPanel.tsx): output view · Renders query output and execution errors · `src/ResultPanel.tsx`
- [Schema explorer](https://github.com/park-bit/sqlide/blob/main/src/SchemaExplorer.tsx): metadata view · Browses tables, views, and columns from shared schema state · `src/SchemaExplorer.tsx`
- [Table viewer](https://github.com/park-bit/sqlide/blob/main/src/TableDataViewer.tsx): row browser · Inspects table rows from the current database · `src/TableDataViewer.tsx`
- [ER diagram](https://github.com/park-bit/sqlide/blob/main/src/ERDiagram.tsx): relational viz · Visualizes foreign-key relationships from schema metadata · `src/ERDiagram.tsx`

### Local SQL Engine

In-browser SQLite runtime and shared data coordination

- [SQL context](https://github.com/park-bit/sqlide/blob/main/src/SqlContext.tsx): state hub · Centralized database instance, query actions, and derived schema state · `src/SqlContext.tsx`
- **sql.js**: wasm sqlite · In-browser SQLite execution engine compiled to WebAssembly
- [SQLite wasm](https://github.com/park-bit/sqlide/blob/main/public/sql-wasm.wasm): binary runtime · WebAssembly module loaded by sql.js for local query execution · `public/sql-wasm.wasm`
- **File I/O**: data portability · Imports SQLite/CSV/JSON data and exports query results

### Build and Static Assets

Frontend build, deployment, and packaged assets

- **Quote API**: external dependency · Optional session-start REST call mentioned in the README
- [Vite build](https://github.com/park-bit/sqlide/blob/main/vite.config.ts): frontend build · Bundles the client application for static hosting · `vite.config.ts`
- [Vercel deploy](https://github.com/park-bit/sqlide/blob/main/vercel.json): static hosting · Deployment boundary for the compiled frontend assets · `vercel.json`
- [Styles & assets](https://github.com/park-bit/sqlide/blob/main/src/App.css): presentation assets · CSS and static assets used by the single-page workbench · `src/App.css`

## Connections

- main → App shell: mounts · Entry point renders the top-level application shell
- App shell → SQL context: provides · App shell wires shared SQL state into the workspace
- App shell → SQL editor: contains · Workspace includes the SQL authoring surface
- App shell → Results panel: contains · Workspace includes query output and errors
- App shell → Schema explorer: contains · Workspace includes schema exploration panel
- App shell → Table viewer: contains · Workspace includes row-level table inspection
- App shell → ER diagram: contains · Workspace includes ER diagram view
- SQL editor → SQL context: runs queries · Submitted SQL is executed through shared database actions
- Results panel → SQL context: reads state · Results panel consumes execution output from the context
- Schema explorer → SQL context: reads metadata · Schema explorer uses derived schema information
- Table viewer → SQL context: reads rows · Table viewer reads table data from the shared database
- ER diagram → SQL context: reads schema · ER diagram renders relationships from schema metadata
- SQL context → sql.js: uses engine · Context delegates actual SQL execution to sql.js
- sql.js → SQLite wasm: loads runtime · sql.js relies on the packaged SQLite WebAssembly binary
- SQL context → File I/O: imports/exports · Local-first file exchange supports portable data workflows
- App shell → Styles & assets: styled by · UI presentation is driven by CSS and static assets
- Vite build → Vercel deploy: builds for · Frontend bundle is prepared for static deployment
- Quote API → App shell: optional data · Session-start external fetch is non-core and orthogonal to query execution