Admin UI

Web-based interface for database management.

Overview

The Postbase Admin UI provides a visual interface for:

• Browsing database schemas
• Viewing and editing data
• Executing SQL queries
• Managing migrations

Starting the UI

# From postbase directory
pnpm --filter @postbase/ui dev

Open http://localhost:3000

Features

Dashboard

The dashboard shows:

• Connected databases
• Quick stats (tables, size, connections)
• Recent activity

Schema Browser

Navigate your database structure:

📁 public
├── 📋 users
│   ├── id (serial)
│   ├── email (varchar)
│   ├── name (varchar)
│   └── created_at (timestamp)
├── 📋 posts
│   ├── id (serial)
│   ├── user_id (integer)
│   └── content (text)
└── 📋 comments

Click any table to view its structure and data.

Data Viewer

Browse and edit table data:

Features:

• Pagination - Navigate large datasets
• Sorting - Click column headers
• Filtering - Filter by column values
• Inline editing - Double-click to edit
• Add/Delete rows - CRUD operations

Schema Editor

Create and modify tables visually:

Create Table

1. Click "New Table"
2. Enter table name
3. Add columns with types
4. Configure constraints (PK, NOT NULL, UNIQUE)
5. Click "Create"

Modify Table

1. Select table from browser
2. Click "Structure" tab
3. Add/edit/remove columns
4. Manage indexes
5. Configure foreign keys

Supported Column Types

SQL Editor

Execute arbitrary SQL:

SELECT 
  u.name,
  COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON p.user_id = u.id
GROUP BY u.id
ORDER BY post_count DESC
LIMIT 10;

Features:

• Monaco editor - VS Code-like experience
• Syntax highlighting - PostgreSQL-aware
• Auto-completion - Table and column names
• Multiple queries - Run multiple statements
• Export results - CSV/JSON export

Keyboard shortcuts:

• Ctrl+Enter / Cmd+Enter - Execute query
• Ctrl+Shift+Enter - Execute selected text
• Ctrl+S / Cmd+S - Save to history

Migration Manager

View and manage migrations:

Applied Migrations

Pending Migrations

Actions:

• Apply All - Run all pending migrations
• Apply One - Run specific migration
• Rollback - Revert last migration

Configuration

Theme

Toggle dark/light mode in Settings.

Connection

View and copy connection details:

Host:     localhost
Port:     5432
Database: myapp
User:     postgres
Password: postgres

Preferences

• Default schema
• Results per page
• Editor font size
• Auto-refresh interval

Screenshots

Dashboard

View all your databases at a glance.

Schema Browser

Navigate tables, views, and functions in a tree structure.

Data Viewer

Edit data inline with pagination and filtering.

SQL Editor

Execute queries with syntax highlighting and auto-completion.

Keyboard Shortcuts