{"id":"01742773-e14b-40c5-9e78-abf98c9540a0","slug":"appspace-helix","kind":"mcp","name":"helix","summary":"Unified database UI + MCP server for MySQL, PostgreSQL and MongoDB","owner":"appspace","repoUrl":"https://github.com/appspace/helix","license":"AGPL-3.0","licenseTier":"strong-copyleft","trust":"community","stars":1,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-04-21T13:03:22.000Z","addedAt":"2026-10-21T07:22:53.660Z","logoUrl":"https://avatars.githubusercontent.com/u/1199650?v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["databases","cloud-infra","design-media"],"tags":["mysql","db-client","mongo","mysqlworkbench","postgresql"],"runtime":"binary","local":true,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-21T07:23:02.683Z","sample":false,"url":"https://conduits.dev/tools/appspace-helix","language":"TypeScript","transports":["stdio"],"install":{},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# Helix\n\nA MySQL database management web app — a browser-based alternative to MySQL Workbench. Built with React, TypeScript, and Vite. Designed to run locally (e.g. inside a Docker container) and accessed at `localhost`.\n\n![Helix walkthrough — connect, browse, query, edit, insert](docs/demo.gif)\n\n## What it does\n\n- SQL query editor with line numbers and `Ctrl+Enter` to run\n- Schema browser — collapsible tree of tables, columns (with types and PK indicators), views, procedures, triggers\n- Foreign-key diagram — ERD for the whole schema, or for one table's dependencies (right-click a table → Dependencies). Laid out around a centre — the focus table, or the most-connected one — with everything else in rings around it; pan, zoom, drag boxes to rearrange, click a table to open it in a query tab\n- Query results grid — sortable columns, row selection, NULL highlighting, execution time, index marks on indexed column headers (green = the column leads an index, grey = it only sits deeper in a composite one; hover the key for the index names and what the colours mean)\n- Multi-tab query workspace\n- Connection manager modal (host, port, user, password, SSL)\n- Dark and light theme toggle\n\n## Security model — local use only\n\nHelix is a **local-first** tool. The backend has **no authentication**: `/api/connect`, `/api/query`, `/api/delete-row`, and `/api/update-cell` are all open to anyone who can reach port `3001`. The MySQL connection pool is a process-wide singleton, so whoever connects last controls what every subsequent request runs — and every request can execute arbitrary SQL against that connection.\n\n**Do not expose the backend (port `3001`) or the Vite dev server to any network you don't fully control.** Bind to `localhost` only, do not put it behind a public reverse proxy, and do not run it with `--host` on a shared or untrusted network. Treat it like a desktop app: if you wouldn't hand someone raw MySQL credentials, don't give them access to this service either.\n\nIf you need to share access with others, run a separate instance per person and keep each one on its own machine.\n\n## Getting started\n\nInstall dependencies for both the frontend and the backend:\n\n```bash\nnpm install\nnpm install --prefix server\n```\n\nCreate the server env file from the example:\n\n```bash\ncp server/.env.example server/.env\n```\n\nNote: `server/.env.example` ships with `CORS_ORIGIN=http://localhost:5174`, but Vite defaults to `5173`. Set `CORS_ORIGIN=http://localhost:5173` in `server/.env` unless you've overridden Vite's port.\n\nRun the frontend and backend together:\n\n```bash\nnpm run dev:all\n```\n\n- Frontend (Vite): `http://localhost:5173`\n- Backend (Express + mysql2): `http://localhost:3001`\n\nYou can also start them individually with `npm run dev` (frontend only) or `npm run dev:server` (backend only).\n\nTo build the frontend for production:\n\n```bash\nnpm run build\n```\n\n## Desktop app (Electron)\n\nHelix can run as a native desktop app on macOS, Windows, and Linux using Electron. The packaged app bundles both the React frontend and the Express backend into a single installer — no separate server process or browser tab required.\n\n### Run in dev mode (Electron window + hot reload)\n\n```bash\nnpm run electron:dev\n```\n\nThis starts the Vite dev server, the Express backend, and an Electron window all at once. The window loads from the Vite dev server so hot module replacement works as normal.\n\n> **Note:** The Express server must be able to accept requests from `http://localhost:5173`. Make sure `CORS_ORIGIN=http://localhost:5173` is set in `server/.env`.\n\n### Build a distributable installer\n\n```bash\nnpm run electron:build\n```\n\nThis runs three steps in sequence:\n\n1. `npm run build` — compiles TypeScript and bundles the React app into `dist/`\n2. `npm run electron:build:server` — uses esbuild to bundle the Express server and all its dependencies into a single `electron/server.cjs` file\n3. `electron-builder` — packages everything into a platform-specific installer under `release/`\n\nOutput installers:\n\n| Platform | Format | Location |\n|---|---|---|\n| macOS | `.dmg` | `release/*.dmg` |\n| Windows | NSIS `.exe` installer | `release/*.exe` |\n| Linux | `.AppImage` | `release/*.AppImage` |\n\n### Icons\n\nPlace these files in the `build/` directory before running `electron:build`:\n\n| File | Size | Used for |\n|---|---|---|\n| `build/icon.icns` | 512×512+ | macOS app icon |\n| `build/icon.ico` | 256×256 | Windows app icon |\n| `build/icon.png` | 512×512 | Linux app icon, window chrome |\n| `build/tray.png` | 16×16 or 32×32 | Taskbar / menu-bar tray icon |\n\nYou can generate all formats from a single 1024×1024 PNG using [electron-icon-builder](https://www.npmjs.com/package/electron-icon-builder) or a tool like [IconKitchen](https://icon.kitchen). Without icon files the app falls back to a transparent placeholder and won't crash, but icons are required to produce a properly branded installer.\n\n### How the production build works\n\nIn the packaged app, Electron uses Node's `utilityProcess` API to fork the bundled Express server as a subprocess. The server is given the path to `dist/` and serves the React frontend as static files alongside the API, so the Electron window loads everything from `http://localhost:3001` — no separate browser or proxy needed. The server process is terminated automatically when the app quits.\n\n## Tech stack\n\n| Layer | Tool |\n|---|---|\n| Framework | React 19 |\n| Language | TypeScript (strict, `verbatimModuleSyntax`) |\n| Build | Vite 8 + esbuild |\n| Backend | Express 4 + mysql2, run with `tsx watch` |\n| Node | 24 LTS |\n\n## Project structure\n\n```\nsrc/\n├── App.tsx                     # App shell, state, mock data\n├── theme.ts                    # DARK and LIGHT token objects (colors, shadows, SQL palette)\n├── index.css                   # CSS custom properties (design tokens), Google Fonts, resets\n└── components/\n    ├── TopBar.tsx              # Tab bar, logo, theme toggle, connection status\n    ├── SchemaBrowser.tsx       # Left sidebar — schema selector, filter, collapsible tree\n    ├── QueryEditor.tsx         # SQL textarea with line numbers and toolbar\n    ├── ResultsTable.tsx        # Sortable data grid with status bar\n    └── ConnectionManager.tsx   # Connection modal (host/port/user/password/SSL)\n\nserver/\n└── src/\n    └── index.ts               # Express API server (connect, query, schema, MCP)\n\nelectron/\n├── main.cjs                   # Electron main process (window, tray, server lifecycle)\n└── server.cjs                 # Bundled Express server — generated by electron:build:server\n\nbuild/\n├── icon.icns                  # macOS app icon (add your own)\n├── icon.ico                   # Windows app icon (add your own)\n├── icon.png                   # Linux app icon (add your own)\n└── tray.png                   # Taskbar tray icon (add your own)\n```\n\n## Design system\n\nThe visual design is defined in two places:\n\n- **`src/index.css`** — all CSS custom properties: background layers, border levels, accent teal, text hierarchy, semantic colors (error/warning/success), SQL syntax colors, typography scale, spacing, radii, shadows\n- **`src/theme.ts`** — the same tokens as a TypeScript object (`DARK` / `LIGHT`), passed as a `t` prop to every component for inline styles\n\n## License\n\nHelix is licensed under the [GNU Affero General Public License v3.0](LICENSE). You're free to use, modify, and redistribute it, including commercially — but if you run a modified version as a network-accessible service, you must publish your source changes under the same license.\n"}