Database Studio 🚀

Database Studio is a high-performance, full-stack database viewer and schema explorer. Designed for developers and DBAs, it provides a modern interface to explore, analyze, and document your MySQL and MongoDB databases.

npx database-studio

🌟 Key Features

📊 Interactive Data Viewer

Browse your data with a paginated table interface. Works with MySQL tables and MongoDB collections seamlessly.

📐 Visual Schema Explorer

Visualize your entire database architecture at a glance. Grid-based Schema View with interactive cards and dynamic color-coding. For MongoDB, schemas are automatically inferred by sampling collection documents.

🎨 Canvas View

Drag-and-drop schema visualization with table relationships rendered as an interactive canvas.

📄 PDF Export

Generate professional A4 schema documentation with a single click. Powered by Puppeteer server-side rendering with full style fidelity.

🔐 License-Gated Access

• JWT session management with HTTP-only cookies
• RSA-256 offline verification
• Machine-ID binding for license integrity

🛠️ Developer-First

• Toggle between 1-4 column grid layouts
• Switch between Data View, Schema View, and Canvas View
• Starts in setup mode with inline docs when no database is configured

🚀 Quick Start

Prerequisites

• Node.js v18+
• MySQL or MongoDB instance

Usage via npx

npx database-studio

Usage via global install

npm i -g database-studio
database-studio

Environment Configuration

Create a .env file in your project root with one of the following:

# For MySQL
MYSQL_URL=mysql://user:password@localhost:3306/your_database

# For MongoDB (either variable name works)
MONGODB_URL=mongodb://user:password@localhost:27017/your_database
MONGODB_URI=mongodb+srv://user:[email protected]/your_database

Optional:

PORT=5555   # defaults to 5555

Database Studio auto-detects which database to connect to based on the env variable present. If neither is set, it starts in setup mode showing configuration docs in the browser.

💻 Tech Stack

• Frontend: React 18, React Router 6, Tailwind CSS 3
• Backend: Express 5, Puppeteer
• UI Components: Radix UI, Lucide Icons
• Databases: MySQL via mysql2, MongoDB via native driver
• Build: Vite, tsup

🏗️ Architecture

client/              # React SPA
├── components/      # UI & feature components
├── pages/           # Route-level views
└── lib/             # Utilities and API wrappers

server/              # Express API
├── index.ts         # Routes, license, PDF export
├── config/          # Server configuration
└── drivers/         # Database driver abstraction
    ├── types.ts     # DbDriver interface
    ├── mysql.ts     # MySQL implementation
    ├── mongodb.ts   # MongoDB implementation
    └── index.ts     # Auto-detection factory

bin/                 # CLI entry point

Driver Pattern

All database operations go through a DbDriver interface. The server auto-detects which driver to use based on environment variables — zero conditionals in route handlers.

| Method | MySQL | MongoDB | |--------|-------|---------| | getDatabaseName() | SELECT DATABASE() | db.databaseName | | getTables() | SHOW TABLES | db.listCollections() | | getTableSchema() | SHOW COLUMNS + FK query | Sample 100 docs, infer types | | getTableData() | SELECT * LIMIT OFFSET | find().skip().limit() |

📑 PDF Export Engine

1. Headless Navigation: Puppeteer visits ?view=schema&export=true
2. Adaptive CSS: Print-specific layout with hidden interactive elements
3. Full Fidelity: Captures Tailwind styles into multi-page A4 PDF

🔒 License & Security

Requires a license key on first use. The licensing system uses RSA-256 signatures and Machine-ID hashing.

Part of the Database Studio Workspace.