Files
gridline/README.md
T
adrianbonpin 1f081a66e0 feat: Schema Visualizer, docs update & competitor comparison
* chore: add @xyflow/react, dagre, @types/dagre (Task 1)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship types (Task 2)

* feat: add SchemaGraph, TableNode, GraphColumn, Relationship Rust models (Task 3)

* feat: add cardinality color/label helpers and legend data (Task 4)

* feat: add schema_graph command skeleton with validation (Task 5)

* feat: add PostgreSQL schema graph query builder + cardinality inference (Task 6)

* feat: implement get_schema_graph for PostgreSQL + SQLite (Task 7)

* feat: add getSchemaGraph IPC wrapper (Task 8)

* feat: un-stub Schema Visualizer nav + add view branch placeholder (Task 9)

* feat: add SchemaVisualizerNode custom React Flow table card (Task 10)

* feat: add SchemaVisualizerPage with React Flow canvas (Task 11)

* feat: wire SchemaVisualizerPage + error handling + style polish (Tasks 12-14)

* perf: replace information_schema with pg_catalog for schema graph query (500x+ faster on remote PG)

* fix: add DB selector, ghost-style dropdowns, dark controls, minimap styling, attribution

* fix: always show schema selector, move attribution to top-left

* fix: SelectDropdown close on outside click works in React Flow (capture phase)

* style: remove border from attribution badge

* style: restore bg on attribution, no border

* fix: lower attribution z-index so dropdowns render above

* fix: ensure toolbar + dropdowns stack above canvas attribution

* feat: crow's foot markers on edges + collapsible legend

* fix: restore missing tableCount state (was overwritten by legendOpen)

* fix: move crow's foot marker defs inside ReactFlow SVG, remove duplicate external SVGs

* fix: inject crow's foot SVG markers into ReactFlow SVG via DOM ref

* fix: use hidden SVG before ReactFlow for crow's foot markers, remove DOM injection

* feat: custom CrowsFootEdge component with inline crow's foot markers

* feat: custom CrowsFootEdge with zero-or-one/zero-or-many notation + nullability-based cardinality

* fix: strip markers, use clean text labels only on edges

* fix: add SVG marker defs directly inside ReactFlow + url() references for crow's foot

* fix: use custom CrowsFootEdge with BaseEdge + inline SVG symbols (no marker defs needed)

* debug: add red/green circles at edge endpoints to verify custom edge renders

* fix: remove stale duplicate edge data, use clean data.startMarker/endMarker

* fix: use getSmoothStepPath offset points for correct tangent angle at endpoints

* fix: thicker strokeWidth, position at handle coords, use path tangents

* fix: use straight-line angle (not curve tangent) for marker rotation

* fix: compute marker positions directly with raw math, no SVG transforms

* fix: fixed-orientation symbols — | always vertical, crow's foot fans toward node

* fix: dead simple — | vertical line, ← or → horizontal crow's foot based on edge direction

* fix: increase marker gap to 12px so symbols aren't hidden behind handle dots

* fix: correct offset direction (away from card into gap), G=4

* fix: remove duplicate G offset inside Mark (was canceling out the call-site offset)

* fix: crow's foot back to fork shape — three lines converging to a tip

* fix: flip crow's foot direction

* fix: wider crow's foot spread (4→6)

* feat: add crow's foot symbols to relationship legend

* style: cleaner legend — horizontal edge with endpoint symbols + label

* feat: handles on both sides, edge builder picks closest side based on dagre layout

* fix: compute actual handle distances to pick shortest path

* revert: PK always left, FK always right — one handle per column only

* fix: lock edge marker direction via origRight, TB layout for horizontal spread, truncate long types

* fix: semi-transparent minimap mask, border stroke for viewport visibility

* feat: click edge to highlight (amber glow), all others dim to 15% opacity

* feat: legend highlights matching cardinality row when edge is clicked

* fix: crow's foot symbols now read color from edge style (amber when highlighted)

* fix: highlighted edge gets zIndex 1000 to render on top

* fix: folder empty message now checks unfiltered store, shows filter hint when connections exist but filtered out

* feat: flat SVG DB icons from simple-icons (PostgreSQL, MySQL, SQLite, Redis) replacing emoji

* chore: add *.db, *.sqlite, *.sqlite3 to .gitignore

* docs: update README with 3-way competitor comparison + current roadmap; update AGENTS.md schema visualizer status
2026-07-29 22:36:59 +08:00

12 KiB

Gridline

A modern, open-source, high-performance database GUI client for PostgreSQL and beyond. Built with Tauri 2.0, Rust, and React — lightweight by design, powerful by default.

Inspired by DB Pro and Beekeeper Studio's best ideas. Freed from their paywalls. No caps on tabs, connections, or saved queries. Deep PostgreSQL tooling (pg_dump, pg_restore, DB-to-DB sync) that commercial alternatives lock behind paywalls or leave to the CLI.


Why Gridline?

Most database GUI clients either lock essential productivity features behind paywalls or treat PostgreSQL administration as an afterthought. Gridline is different:

Capability DB Pro (Free) Beekeeper (Free) Gridline
Open tabs 3 Unlimited Unlimited
Saved connections 2 Unlimited Unlimited
Saved queries 5 Unlimited Unlimited
Data export (CSV, JSON, SQL) (paid only) Basic only JSON, CSV, SQL, Markdown
Data import (CSV, JSON) (paid only) 🟡 Upcoming
pg_dump / pg_restore GUI (paid only) First-class UI
DB-to-DB sync Built-in pipe sync
Object explorer depth Tables, views Tables, views Functions, Triggers, Enums, Sequences, Extensions
ER diagram / schema visualizer (planned) (paid only) Interactive React Flow
Inline cell editing 🟡 Upcoming
SSH tunneling 🟡 (likely paid) 🟡 Config UI done
OS credential vault Keychain / Secret Service
Workspace / folder hierarchy Multi-level tree + tags
Changes queue (stage & commit) Queue → Commit All
Query history (auto-saved) 🟡 Upcoming
AI assistant (BYO key) (paid only)
Open source (GPLv3) (MIT)
Desktop shell Native webview Electron (~250MB) Tauri 2.0 (~40MB)

🟡 = In progress or planned. Bold = Gridline's strongest differentiators.


Features

Connection & Workspace Management

  • URI Parser — paste postgres://, mysql://, sqlite://, or redis:// connection strings and have all fields auto-populated
  • Workspace Tree — multi-level hierarchy: Workspace → Folder → Connection, with color-coded tags (red = Production, green = Local)
  • Credential Security — passwords stored in the OS keychain (macOS Keychain / Linux Secret Service / Windows Credential Manager), never as plaintext
  • Production Safeguards — read-only locks and high-visibility warnings on connections tagged Production

PostgreSQL Object Explorer

Full tree-view navigation of all native PostgreSQL schema objects:

  • Tables & Views — columns, types, defaults, nullability, primary/foreign keys with popover preview
  • Functions & Procedures — source code with syntax highlighting and line numbers, argument signatures, return types, overload support
  • Triggers & Rules — event bindings with inline definition inspection, color-coded enabled/disabled status
  • Sequences & Enums — current values, increments, cycle flags; enum labels in bordered list view
  • Extensions — installed extensions with version, schema, and comment
  • Schema Visualizer (ER Diagram) — interactive React Flow graph with dagre auto-layout, crow's foot notation (1:1, 1:N, N:M), color-coded relationships, schema selector, zoom controls, collapsible columns (PK/FK/unique-only), cross-schema FK support for PostgreSQL + SQLite

SQL Editor & Query Workbench

  • Multi-Tab Workspace — unlimited named tabs, close with Cmd/Ctrl+W, session persistence across restarts
  • Changes Queue — queue INSERT/UPDATE/DELETE changes; preview before committing all
  • Smart Default Sort — auto-detects updated_at, created_at, _id columns for logical initial sorting
  • (Monaco Editor with SQL autocomplete, query history, and saved snippets — upcoming)

Data Grid & Schema Browser

  • Virtualized Grid — row-level virtualization via @tanstack/react-virtual handles 100k+ rows
  • Column Management — resize with drag handles (double-click to auto-fit), show/hide per column, multi-column sort
  • Server-Side Filtering & Sorting — filters and sorts pushed to SQL WHERE/ORDER BY
  • Export — JSON, CSV, SQL, Markdown via toolbar
  • FK Preview — click a foreign key cell to preview the referenced row
  • JSON/JSONB Viewer — popover with formatted/raw tabs and copy button
  • Auto-Refresh — configurable interval timer
  • (Inline cell editing, visual filter builder, and data import — upcoming)

PostgreSQL Administrative Tools

  • Visual Backuppg_dump wrapper with format selector (Plain SQL, Custom, Tar, Directory), file browser, schema filter, no-owner toggle, real-time progress bar
  • Visual Restorepg_restore wrapper with file browser, format, clean toggle, destructive confirmation checkbox
  • DB-to-DB Sync — pipe pg_dumppg_restore between two connections with source/target pickers, schema filter, flow indicator

App Portability

  • Export — save all workspaces, folders, saved queries, tags, and non-sensitive metadata to a single JSON archive
  • Import — restore your exact workspace setup on any machine instantly

Tech Stack

Layer Technology Role
Desktop Shell Tauri 2.0 Native desktop container (~40MB RAM baseline)
Backend Rust + tokio Async runtime, connection pooling, CLI tool execution
Database Drivers sqlx / tokio-postgres Pure-Rust async PostgreSQL (MySQL, SQLite to follow)
CLI Integration std::process::Command Wraps system pg_dump / pg_restore binaries
Frontend React 19 + TypeScript Component-based UI
Styling Tailwind CSS Utility-first, dark mode, glassmorphic design
State Zustand / Jotai Lightweight client-state for tabs, connections, queries
Code Editor (planned) Monaco Editor IDE-grade SQL editing with autocomplete (coming soon)
Data Grid TanStack Virtual Virtualized row rendering for 100k+ rows
Local DB SQLite via rusqlite User settings, saved queries, workspace state

Development

Prerequisites

  • Rust (latest stable)
  • Bun (or Node.js + npm)
  • Tauri system dependencies (see guide)
  • PostgreSQL client tools (pg_dump, pg_restore) for admin features

Setup

# Clone
git clone https://github.com/adrianbonpin/gridline.git
cd gridline

# Install frontend dependencies
bun install

# Run in development mode (hot-reload)
bun run tauri dev

# Build for production
bun run tauri build

Project Structure

gridline/
├── src/                    # React frontend
│   ├── components/         # Reusable UI components
│   ├── stores/             # Zustand/Jotai state stores
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utilities, types, Tauri bindings
│   ├── App.tsx             # Root component
│   └── main.tsx            # Entry point
├── src-tauri/              # Rust backend
│   ├── src/
│   │   ├── main.rs         # Entry point
│   │   ├── lib.rs          # Tauri command registration
│   │   ├── db/             # Database connection & pooling
│   │   ├── commands/       # Tauri IPC command handlers
│   │   └── models/         # Data structures & serde types
│   ├── Cargo.toml
│   └── tauri.conf.json
├── public/                 # Static assets
├── package.json
├── tsconfig.json
└── vite.config.ts

Architecture

┌──────────────────────────────────────────────────┐
│                    Tauri Shell                     │
│  ┌─────────────────┐   ┌────────────────────────┐ │
│  │   React (WebView)│   │     Rust Backend       │ │
│  │                  │   │                        │ │
│  │  • Monaco Editor │◄──►│ • sqlx/tokio-postgres  │ │
│  │  • Glide Grid    │IPC│ • Connection pool      │ │
│  │  • Tailwind UI   │   │ • pg_dump/restore      │ │
│  │  • Zustand state │   │ • SQLite (local)       │ │
│  │                  │   │ • OS Keychain          │ │
│  └─────────────────┘   └────────────────────────┘ │
└──────────────────────────────────────────────────┘
                          │
                          ▼
              ┌─────────────────────┐
              │  PostgreSQL / MySQL  │
              │  SQLite / Redis      │
              └─────────────────────┘

Roadmap

Completed

  • Phase 1 — Core Shell — Tauri 2.0 + React project, glassmorphic dark-first UI, Zustand state management, SQLite local persistence, OS keychain credentials
  • Phase 2 — Connection Management — Rust connection pool (sqlx/tokio-postgres), PostgreSQL + SQLite browse/query, URI parser with auto-population, SSH/SSL config UI, connection testing for all DB types
  • Phase 3 — Schema Explorer — Full PostgreSQL pg_catalog/information_schema introspection, object tree (Tables, Views, Functions, Triggers, Enums, Sequences, Extensions), per-type detail views, FK preview popover, JSON/JSONB viewer
  • Phase 4 — Data Grid & Filters — Virtualized grid (@tanstack/react-virtual, 100k+ rows), server-side sorting/filtering, column show/hide, column resize, export (JSON/CSV/SQL/Markdown), auto-refresh, pagination
  • Phase 5 — Admin Toolspg_dump/pg_restore UI wrappers with real-time progress, DB-to-DB sync, backup/restore format selectors
  • Phase 6 — Schema Visualizer — Interactive ER diagram with React Flow + dagre, crow's foot notation, schema selector, legend, collapsible column views, PostgreSQL + SQLite support
  • Home Screen & Organization — Connection cards by folder, folders CRUD, tags CRUD with colors, global search (Cmd+K), import/export connections (JSON), bulk select/delete, DB type filter, demo SQLite database

🟡 In Progress / Upcoming

  • SQL Editor — Monaco Editor integration with schema-aware SQL autocomplete, query history, saved queries
  • SSH/SSL Runtime — SSH tunnel via ssh2 crate, SSL/TLS config passed to sqlx/tokio-postgres
  • Inline Cell Editing — Edit cells directly in the data grid
  • Data Import — CSV, JSON import with column mapping

🔮 Future

  • Multi-DB Support — MySQL browsing, Redis key browser, full MySQL/SQLite/Redis parity with PostgreSQL
  • Query Workbench — Multiple result sets, query favorites/pinning, visual query builder
  • Deeper PostgreSQL — Indexes, constraints, materialized views, stored procedure view, user/role management
  • Collaboration — Team workspaces, shared connections, query sharing
  • Notebook Reports — SQL-backed markdown reports with embedded results

License

MIT — see LICENSE for details.


Built with ♥ for developers who believe powerful tools should be free.