Drizzle Studio: The Modern Developer's Database GUI

In the ever-evolving landscape of TypeScript ORMs, Drizzle ORM has emerged as a lightweight, SQL-like alternative to heavier solutions like Prisma. One of its standout features is Drizzle Studio—a built-in visual database browser that transforms how developers interact with their data during development.

What is Drizzle Studio?

Drizzle Studio is a web-based database GUI that launches directly from your terminal. Unlike traditional database management tools such as pgAdmin, TablePlus, or DBeaver, Drizzle Studio is deeply integrated with your Drizzle ORM workflow. It reads your TypeScript schema files directly, requires zero additional configuration, and opens instantly in your browser at https://local.drizzle.studio

The tool provides an intuitive interface for exploring database schemas, running queries, and editing data—all without leaving your development environment. According to the official documentation, it supports explicit null and empty string values, booleans, numbers, big integers, JSON objects, and JSON arrays .

Getting Started

Setting up Drizzle Studio is remarkably simple. First, ensure you have Drizzle ORM and Drizzle Kit installed:

npm install drizzle-orm
npm install -D drizzle-kit

Create a drizzle.config.ts configuration file in your project root:

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  dialect: 'postgresql', // or "mysql" | "sqlite"
  schema: './src/db/schema.ts',
  out: './drizzle',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

Then launch Studio with a single command:

npx drizzle-kit studio

For convenience, add an npm script to your package.json:

{
  "scripts": {
    "db:studio": "drizzle-kit studio --config=drizzle.config.ts"
  }
}

Key Features

1. Schema Browser

The left sidebar displays all your database tables with their columns, types, indexes, and constraints. Click any table to understand its structure and see relationships between tables at a glance

2. Data Browser

View your data in a spreadsheet-like interface with:

• Pagination for navigating large datasets

• Sorting by clicking column headers

• Filtering to narrow down results

• Column resizing by dragging borders

3. Inline Data Editing

Double-click any cell to edit data directly. Press Enter to save or Escape to cancel. Changes are committed immediately to the database—making it perfect for quick debugging or seeding test data

4. SQL Query Editor

Run custom SQL queries directly in Studio with full syntax support. Results appear in a formatted table below the editor, making it easy to prototype complex queries before implementing them in your application code

5. Real-Time Schema Sync

Studio reads your schema files in real-time, so you see changes immediately when you update your TypeScript schema—no need to restart the application

Multi-Database Support

Drizzle Studio works seamlessly with all databases supported by Drizzle ORM:

Table

DatabaseProvidersPostgreSQLNeon, Supabase, Vercel Postgres, AWS RDS, PGliteMySQLPlanetScale, TiDBSQLiteTurso, Cloudflare D1, Bun SQLite

Advanced Configuration

Custom Ports and Hosts

Run Studio on a different port or expose it to your local network:

# Custom port
npx drizzle-kit studio --port 3333

# Network access for team collaboration
npx drizzle-kit studio --host 0.0.0.0 --port 4983

Then access from other devices using: https://local.drizzle.studio?host=YOUR_IP&port=4983

Multiple Database Environments

Switch between development, staging, and production databases using different config files:

drizzle-kit studio --config=drizzle.prod.config.ts
drizzle-kit studio --config=drizzle.staging.config.ts

Verbose Mode

Enable detailed logging to see all SQL statements Studio executes—useful for debugging and understanding query performance:

npx drizzle-kit studio --verbose

How It Compares

FeatureDrizzle StudiopgAdminTablePlusDBeaverPriceFreeFree$99FreeSchema-aware✅ Yes❌ No❌ No❌ NoZero config✅ Yes❌ No❌ No❌ NoTypeScript integration✅ Yes❌ No❌ No❌ NoMulti-database✅ YesPostgreSQL only✅ Yes✅ YesERD diagrams❌ No✅ Yes❌ No✅ Yes

Drizzle Studio excels at rapid, schema-aware database browsing during development. For complex database administration tasks like ERD visualization or advanced query building, it complements rather than replaces full-featured database tools.

Production Considerations

While Drizzle Studio is primarily designed for local development, some teams have explored deploying it for production access. The community has discussed using Drizzle Gateway—an enhanced, self-hosted version that provides password protection and persistent storage for database connections

. However, for production environments, proper authentication and security measures are essential.

Conclusion

Drizzle Studio represents a new paradigm in database tooling—one that embraces the TypeScript-native approach of Drizzle ORM. By eliminating the friction between code and data, it allows developers to inspect, modify, and understand their databases with unprecedented ease. Whether you're debugging an issue, seeding test data, or verifying migrations, Drizzle Studio provides the visual interface modern developers need without sacrificing the type safety and transparency that make Drizzle ORM compelling.

For teams already invested in the Drizzle ecosystem, Studio isn't just a nice-to-have—it's an essential part of the developer experience that keeps your database interactions visible, intuitive, and fully integrated with your codebase.