Drizzle Studio: The Complete Guide to Visual Database Management

Drizzle Studio is a powerful visual database browser that comes bundled with Drizzle Kit. It provides a clean, intuitive interface for exploring your database schema, running queries, and editing data—all without leaving your development environment.

What is Drizzle Studio?

Drizzle Studio is a lightweight database GUI that launches directly from your terminal. Unlike standalone database tools like pgAdmin, TablePlus, or DBeaver, Drizzle Studio:

• Understands your schema — It reads your Drizzle schema files directly
• Zero configuration — Uses your existing drizzle.config.ts
• Runs locally — Opens in your browser at https://local.drizzle.studio
• Type-aware — Displays data according to your TypeScript types

Quick Start

If you already have Drizzle ORM set up in your project, launching Studio is simple:

npx drizzle-kit studio

Or if you have a custom config path:

npx drizzle-kit studio --config=drizzle.config.ts

This opens Drizzle Studio in your default browser at https://local.drizzle.studio.

Setting Up Drizzle Studio

Prerequisites

1. Drizzle ORM installed in your project
2. Drizzle Kit as a dev dependency
3. A valid drizzle.config.ts configuration file

Installation

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

Configuration

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

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  dialect: 'postgresql', // or "mysql" | "sqlite"
  schema: './lib/db/schema/index.ts',
  out: './lib/db/migrations',
  dbCredentials: {
    url: process.env.DATABASE_URL as string
  }
});

Adding an npm Script

Add a convenient script to your package.json:

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

Now you can launch Studio with:

npm run db:studio

Drizzle Studio Features

1. Schema Browser

The left sidebar displays all your database tables. Click any table to:

• View all columns with their types
• See indexes and constraints
• Understand relationships between tables

2. Data Browser

Select a table to view its data in a spreadsheet-like interface:

• Pagination — Navigate through large datasets
• Sorting — Click column headers to sort
• Filtering — Use the filter bar to narrow results
• Column resizing — Drag column borders to resize

3. Inline Data Editing

Edit data directly in the table view:

1. Double-click any cell to edit
2. Make your changes
3. Press Enter to save or Escape to cancel
4. Changes are committed immediately to the database

Warning: Edits are permanent. There's no undo button, so be careful when editing production data.

4. SQL Query Editor

Run custom SQL queries directly in Studio:

SELECT
  u.name,
  u.email,
  COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
GROUP BY u.id
ORDER BY order_count DESC
LIMIT 10;

Results appear in a table below the query editor.

5. Insert New Records

Click the "+" button to add new rows:

1. A form appears with all columns
2. Fill in the required fields
3. Click "Insert" to save

The form respects your schema constraints (NOT NULL, defaults, etc.).

6. Delete Records

Select rows using the checkboxes, then click "Delete" to remove them.

Real-World Schema Example

Here's how a typical SaaS schema looks in Drizzle (the same structure visible in Studio):

import { boolean, pgTable, text, timestamp, uuid } from 'drizzle-orm/pg-core';

export const userTable = pgTable('user', {
  id: uuid('id').primaryKey().defaultRandom(),
  name: text('name').notNull(),
  email: text('email').notNull().unique(),
  emailVerified: boolean('email_verified').notNull().default(false),
  image: text('image'),
  role: text('role').notNull().default('user'),
  createdAt: timestamp('created_at', { withTimezone: true })
    .notNull()
    .defaultNow(),
  updatedAt: timestamp('updated_at', { withTimezone: true })
    .notNull()
    .defaultNow()
    .$onUpdate(() => new Date())
});

export const organizationTable = pgTable('organization', {
  id: uuid('id').primaryKey().defaultRandom(),
  name: text('name').notNull(),
  slug: text('slug').notNull().unique(),
  logo: text('logo'),
  createdAt: timestamp('created_at', { withTimezone: true })
    .notNull()
    .defaultNow()
});

export const memberTable = pgTable('member', {
  id: uuid('id').primaryKey().defaultRandom(),
  organizationId: uuid('organization_id')
    .notNull()
    .references(() => organizationTable.id, { onDelete: 'cascade' }),
  userId: uuid('user_id')
    .notNull()
    .references(() => userTable.id, { onDelete: 'cascade' }),
  role: text('role').notNull().default('member'),
  createdAt: timestamp('created_at', { withTimezone: true })
    .notNull()
    .defaultNow()
});

In Drizzle Studio, you'll see these tables with their relationships, making it easy to understand your data model.

Drizzle Studio vs Other Database GUIs

Verdict: Drizzle Studio excels at quick, schema-aware database browsing during development. For complex database administration, use a full-featured tool alongside it.

Common Use Cases

1. Debugging Data Issues

When your app behaves unexpectedly, Studio lets you quickly inspect the actual database state:

npm run db:studio

Navigate to the relevant table and verify the data matches your expectations.

2. Seeding Test Data

During development, manually insert test records:

1. Open the target table
2. Click "+" to add a row
3. Fill in test values
4. Repeat as needed

3. Cleaning Up Development Data

Select all rows (or use a filter) and delete them to reset your local database state.

4. Verifying Migrations

After running a migration, open Studio to confirm:

• New tables exist
• Columns have correct types
• Indexes are in place
• Constraints are applied

Advanced Configuration

Custom Port

Run Studio on a different port:

npx drizzle-kit studio --port 3333

Verbose Mode

Enable detailed logging:

npx drizzle-kit studio --verbose

Multiple Databases

If your project uses multiple databases, create separate config files:

npx drizzle-kit studio --config=drizzle.primary.config.ts
npx drizzle-kit studio --config=drizzle.analytics.config.ts

Troubleshooting

"Cannot connect to database"

1. Verify your DATABASE_URL environment variable is set
2. Ensure the database server is running
3. Check firewall/network settings

# Load env vars before running
dotenv -e .env -- npx drizzle-kit studio

"Schema not found"

Ensure your schema path in drizzle.config.ts points to an existing file:

export default defineConfig({
  schema: './lib/db/schema/index.ts' // Must exist!
  // ...
});

"Tables not showing"

If you're using a tablesFilter, ensure it matches your table names:

export default defineConfig({
  tablesFilter: ['user_*', 'organization_*'] // Only shows matching tables
  // ...
});

Best Practices

1. Never use Studio on production databases — Accidental edits can cause data loss
2. Use for development only — Keep your production database access locked down
3. Combine with migrations — Don't use Studio to make schema changes; use migrations instead
4. Document your schema — Studio makes it easy to understand your data model; share screenshots with your team

Conclusion

Drizzle Studio is an excellent companion for Drizzle ORM development. It removes the friction of switching to external database tools and provides a fast, schema-aware way to interact with your data.

For a production-ready Next.js starter kit with Drizzle ORM already configured (including Studio), check out Achromatic's Drizzle starter kit.

Related Resources

• Drizzle ORM Documentation
• Drizzle Kit CLI Reference
• Multi-Tenancy with Drizzle ORM