A powerful, real-time web-based database management tool built with modern web technologies. This application provides a comprehensive interface for managing both MySQL and PostgreSQL databases, tables, and data with advanced features like AI-assisted querying, ER diagrams, search, sorting, table alteration, data export, and copy functionality.
- Multi-Engine Support: Connect to and manage both MySQL and PostgreSQL databases.
- Connection Manager: Locally save and manage frequently used connection profiles for quick access.
- Real-time Connection Management: Connect/disconnect with live status updates and session persistence.
- Secure Authentication: Support for username/password authentication with configurable host, port, and SSL/TLS.
- Multi-user Support: Handles multiple concurrent database connections efficiently.
- Natural Language Queries: Ask the integrated Ollama AI to help write complex SQL queries.
- Database Insights: Get AI-driven insights about your database structure and data.
- Chat Interface: Convenient chat UI directly within the database manager.
- Visual Dashboards: See high-level metrics for your database server.
- Storage Analysis: Interactive views showing database sizes and individual table storage utilization.
- Resource Tracking: Easily identify which tables are consuming the most space.
- Entity-Relationship Diagrams: Automatically generate ER diagrams for your databases.
- Visual Schema: Explore table relationships and constraints visually.
- Database Operations: Create, drop, and browse databases.
- Table Management: View table lists, create/drop tables, and explore table relationships.
- Real-time Updates: Instant UI updates when databases or tables are modified via Socket.IO.
- Smart Refresh: Automatic data refresh with manual refresh options.
- Paginated Data Display: Efficient data loading with customizable page sizes.
- Advanced Search: Search within specific columns with pattern matching.
- Dynamic Sorting: Click-to-sort on any column with ascending/descending indicators.
- Data Type Handling: Proper display of NULL values, numbers, strings, and dates.
- Copy Functionality: One-click copy for individual cells and entire rows.
- Column Management: Add, modify, and drop table columns with an intuitive UI.
- Data Type Support: Full MySQL & PostgreSQL data type support.
- Index & Constraint Management: Create, view, and drop table indexes and constraints.
- Table Alteration GUI: Easy-to-use interface for complex table modifications.
- CodeMirror 6 Integration: Premium SQL editor with syntax highlighting, autocomplete, and theme support.
- Multi-query Execution: Execute multiple SQL statements in a single operation.
- Floating Query Window: Run ad-hoc queries from anywhere in the application.
- Query Results Display: Formatted results with proper data type handling.
- Database & Table Export: Export complete databases or individual tables.
- Selective Export: Choose specific tables for database export.
- Custom Filtering: Export data with custom WHERE clauses.
- Multiple Formats: SQL dump format with proper syntax for the target engine.
- Svelte 5 & Tailwind CSS: Modern, reactive, and beautifully styled with Tailwind CSS v4 and Shadcn Svelte.
- Premium Design: Clean aesthetic with 'Inter' typography and smooth animations.
- Dark Mode Sidebar: Professional contrast with a sleek dark sidebar.
- Responsive Layouts: Works seamlessly on all screen sizes.
- Real-time Notifications: Toast notifications for all operations.
- Node.js & TypeScript: Strongly-typed server runtime environment.
- Express.js: Web application framework.
- Socket.IO: Real-time bidirectional communication.
- MySQL2 & pg: Native database drivers with Promise support.
- Express Session & JWT: Secure session management and token authentication.
- Custom DatabaseManager: Abstracted multi-engine database operation handler.
- Svelte 5 & SvelteKit: Cutting-edge reactive UI framework with Runes.
- Tailwind CSS v4 & Shadcn Svelte: Utility-first CSS framework with premium pre-built components.
- Vite: Next-generation frontend tooling.
- CodeMirror 6: Extensible code editor for SQL text areas.
- Socket.IO Client: Real-time communication with the server.
- Lucide Icons: Beautiful, consistent icon set.
mysql_handler/
├── backend/
│ ├── src/
│ │ ├── database/ # Multi-engine database operations
│ │ ├── socket/ # Socket.IO event handlers
│ │ ├── routes/ # Express API routes
│ │ ├── types/ # TypeScript type definitions
│ │ └── index.ts # Server entry point
│ ├── package.json
│ └── tsconfig.json
├── frontend/
│ ├── src/
│ │ ├── lib/
│ │ │ ├── components/ # Svelte components (Dashboard, SqlEditor, etc.)
│ │ │ ├── services/ # Socket & API services
│ │ │ └── state.svelte.ts # Global application state (Svelte 5 Runes)
│ │ ├── routes/ # SvelteKit pages
│ │ └── app.html
│ ├── package.json
│ └── svelte.config.js
├── package.json # Monorepo root
└── pnpm-workspace.yaml # PNPM workspace definition
- Node.js v20.0.0 or higher
- pnpm package manager
- MySQL and/or PostgreSQL server
-
Clone the repository
git clone https://github.com/mmar58/mysql_handler.git cd mysql_handler -
Install Dependencies
pnpm install
-
Environment Configuration Create a
.envfile in thebackenddirectory:PORT=3000 NODE_ENV=development SESSION_SECRET=your_secret_here
-
Start Development Servers
pnpm dev
This will concurrently start the TypeScript backend (via
tsx) and the SvelteKit frontend (viavite). -
Access the application Open your browser and navigate to the URL provided by Vite (usually
http://localhost:5173).
pnpm build
pnpm start- Connecting: Use the Connection Manager to add a new MySQL or PostgreSQL profile.
- Dashboard: View the System Overview to see storage usage.
- Data Grid: Click a table to view, search, sort, and edit its data.
- Structure: Switch to the Structure tab to alter columns, indexes, and constraints.
- AI Chat: Open the Ollama Chat assistant from the top navigation to ask questions or generate SQL.
- SQL Editor: Use the fully-featured CodeMirror SQL editor to run custom queries.
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit changes:
git commit -am 'Add feature' - Push to branch:
git push origin feature-name - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ by mmar58
Happy Database Managing! 🎉