SQL Tool

English | 中文

A MySQL database client tool built with Electron + Vue 3.

Fully developed with AI assistance. I created this because existing database management tools always had some aspects I wasn't satisfied with. It will continue to be optimized as issues are discovered during use.

The AI-assisted requirement documents are also included in the repository. They may not be perfect, but hopefully they're helpful.

Screenshot

Features

Database Connection Management

• Create, edit, and delete MySQL database connections
• Connection credentials stored locally with AES encryption
• Tree view displaying databases, tables, views, columns, etc.
• Double-click to switch current database
• Right-click context menu for refreshing nodes

SQL Editor

• Professional SQL editor powered by Monaco Editor
• Auto-completion: Real-time suggestions for keywords, table names, column names, functions, etc.
• Syntax Checking: MySQL syntax error detection with red squiggly underlines + hover tooltips
• Code Formatting: Shift+Alt+F shortcut, uppercase keywords, auto-indentation
• Hover Information: Mouse hover displays detailed information for tables, columns, and functions
• Multi-tab management for editing multiple SQL files simultaneously
• Ctrl+S shortcut to save current query

SQL Execution

• Execute selected SQL or entire editor content
• Batch execution of multiple statements, stops on first error
• Stop running queries (sends KILL QUERY)
• Default timeout: 10 minutes
• Configurable maximum result set rows (default: 5000)

Query Results

• Multiple result sets displayed in tabs
• Cell editing support (for single-table queries with primary key)
• Export functionality: CSV, JSON, Excel formats
• Message panel shows affected rows for non-SELECT statements

Execution Plan

• MySQL EXPLAIN format support
• Flowchart visualization of query execution plan
• Table view for detailed execution plan data

Tech Stack

• Frontend Framework: Vue 3 + TypeScript
• Desktop Framework: Electron 28
• UI Components: Element Plus
• Code Editor: Monaco Editor + monaco-languageclient
• SQL Parsing: sql-parser-cst
• SQL Formatting: sql-formatter
• Database Driver: mysql2
• Build Tools: Vite + electron-builder

Development

Requirements

• Node.js >= 18
• npm >= 9

Install Dependencies

npm install

Development Mode

npm run dev

Build

npm run build

Packaging & Release

Windows

# Package for Windows (x64 + arm64)
npm run pack:win

# Package x64 only
npm run pack:win:x64

# Package arm64 only
npm run pack:win:arm64

Output:

• release/SQL Tool Setup x.x.x.exe - NSIS installer
• release/SQL Tool x.x.x.exe - Portable version

macOS

# Package for macOS (x64 + arm64)
npm run pack:mac

# Package x64 only (Intel Mac)
npm run pack:mac:x64

# Package arm64 only (Apple Silicon)
npm run pack:mac:arm64

Output:

• release/SQL Tool-x.x.x.dmg - DMG installer

Linux

# Package for Linux (x64 + arm64)
npm run pack:linux

# Package x64 only
npm run pack:linux:x64

# Package arm64 only
npm run pack:linux:arm64

Output:

• release/SQL Tool-x.x.x.AppImage - AppImage format
• release/sql-tool_x.x.x_amd64.deb - Debian package

Project Structure

sql-tool/
├── src/
│   ├── main/              # Electron main process
│   │   ├── index.ts       # Main process entry
│   │   ├── database/      # Database connection management
│   │   └── language-server/ # SQL Language Server
│   └── renderer/          # Renderer process (Vue app)
│       ├── components/    # Vue components
│       ├── composables/   # Composable functions
│       ├── stores/        # Pinia state management
│       └── types/         # TypeScript type definitions
├── resources/             # Application resources
├── requirements/          # Requirement documents
└── release/               # Build output directory

License

MIT