A visual interface for managing database schemas, migrations, connections, and data — built with NestJS + React. Part of the @sqlml/cli toolkit.

Quick Start

The easiest way to use @sqlml/ui is through the CLI:

npm install -g @sqlml/cli
sqlml ui

Opens at http://localhost:4200. Press Ctrl+C to stop.

Screenshots & Features

Dashboard

Project overview with ORM type indicator (TypeORM/Prisma), quick stats, and an organized command reference for the CLI.

Schema Editor

Full DBML schema editing powered by Monaco Editor (the same editor behind VS Code). Create, edit, and manage multiple .dbml schema files with syntax highlighting.

Schema Diff

Visual side-by-side comparison between schema snapshots. Auto-loads the latest vs previous snapshot. Color-coded additions, deletions, and changes.

Migrations

View all migration files and their status (pending, applied, reverted). Run and revert migrations directly from the UI. Manage migration templates.

Database

All-in-one database management page:

| Feature | Description | |---------|-------------| | Connection Manager | Add, edit, test, and delete database connections. Auto-creates from .config-sqlml | | Schema Browser | Expandable tree of schemas and tables with column details, types, primary keys, and row estimates | | Data Grid | Paginated table viewer with column sorting. Double-click to edit cells inline. Add and delete rows | | Query Editor | Write and execute SQL queries with Cmd/Ctrl+Enter. Results in a scrollable grid. Schema-aware search path |

Settings

Edit database connection, generation options, file paths, and other configuration — all persisted to .config-sqlml.

  UI_PORT=4200
  UI_THEME=dark
  UI_OPEN_BROWSER=true

Links

• GitHub Repository
• Report Issues
• @sqlml/cli on npm

License

MIT