0
# Studio Interface
1

2
Web-based GUI for database visualization, data editing, and relationship exploration with real-time updates and intuitive data management capabilities.
3

4
## Capabilities
5

6
### Studio Launch
7

8
Launch Prisma Studio web interface for interactive database management and visualization.
9

10
```bash { .api }
11
/**
12
 * Launch Prisma Studio web interface
13
 * Opens browser-based GUI for database visualization and editing
14
 */
15
prisma studio [options]
16

17
Options:
18
  --port/-p <number>      Custom port (default: 5555-5600 range)
19
  --browser/-b <browser>  Browser selection (chrome, firefox, safari, etc.)
20
  --hostname/-n <host>    Hostname binding (default: localhost)
21
  --schema <path>         Custom schema file path
22
  --help/-h              Show studio command help
23
```
24

25
**Usage Examples:**
26

27
```bash
28
# Launch Studio with default settings
29
prisma studio
30

31
# Launch on custom port
32
prisma studio --port 3333
33

34
# Launch with specific browser
35
prisma studio --browser firefox
36

37
# Launch with custom hostname (for Docker/remote access)
38
prisma studio --hostname 0.0.0.0
39

40
# Launch with custom schema location
41
prisma studio --schema ./custom/schema.prisma
42

43
# Launch on specific port and hostname
44
prisma studio --port 4000 --hostname 0.0.0.0
45
```
46

47
### Port Configuration
48

49
Configure Studio to run on specific ports with automatic fallback for port conflicts.
50

51
```bash { .api }
52
/**
53
 * Configure Studio port binding
54
 * Automatically finds available port in range if default is occupied
55
 */
56
prisma studio --port <number>
57

58
Port Behavior:
59
  Default Range: 5555-5600
60
  Auto-fallback: Finds next available port if specified port is occupied
61
  Port Validation: Ensures port is valid and available
62
```
63

64
**Port Examples:**
65

66
```bash
67
# Specific port
68
prisma studio --port 8080
69

70
# Studio finds available port if 3000 is occupied
71
prisma studio --port 3000
72

73
# Development server alongside Studio
74
npm run dev &          # Starts on 3000
75
prisma studio --port 3001
76
```
77

78
### Browser Integration
79

80
Control browser launching and selection for Studio interface access.
81

82
```bash { .api }
83
/**
84
 * Browser selection and launching
85
 * Supports major browsers with automatic detection
86
 */
87
prisma studio --browser <browser>
88

89
Supported Browsers:
90
  chrome, firefox, safari, edge, opera
91
  Auto-detection: Uses system default browser if not specified
92
```
93

94
**Browser Examples:**
95

96
```bash
97
# Launch with Chrome
98
prisma studio --browser chrome
99

100
# Launch with Firefox
101
prisma studio --browser firefox
102

103
# Launch with system default browser (implicit)
104
prisma studio
105
```
106

107
### Network Configuration
108

109
Configure Studio for remote access and network binding in containerized environments.
110

111
```bash { .api }
112
/**
113
 * Network hostname binding
114
 * Configure Studio accessibility from different network locations
115
 */
116
prisma studio --hostname <host>
117

118
Hostname Options:
119
  localhost (default): Local access only
120
  0.0.0.0: Accept connections from any IP address
121
  specific-ip: Bind to specific network interface
122
```
123

124
**Network Examples:**
125

126
```bash
127
# Local access only (default)
128
prisma studio --hostname localhost
129

130
# Docker/remote access
131
prisma studio --hostname 0.0.0.0 --port 5555
132

133
# Specific network interface
134
prisma studio --hostname 192.168.1.100
135
```
136

137
## Studio Features
138

139
### Data Visualization
140

141
Studio provides comprehensive data visualization capabilities:
142

143
- **Table Browser**: Navigate between database tables and collections
144
- **Record Listing**: View paginated records with sorting and filtering
145
- **Relationship Visualization**: See connected records and foreign key relationships
146
- **Data Type Display**: Proper rendering of different data types (dates, JSON, etc.)
147
- **Query Results**: View results of database operations in real-time
148

149
### Data Editing
150

151
Interactive data editing with validation and error handling:
152

153
- **Inline Editing**: Edit records directly in the table view
154
- **Form-based Editing**: Detailed record editing with form validation
155
- **Relationship Management**: Create and modify record relationships
156
- **Data Validation**: Client-side validation based on schema constraints
157
- **Error Reporting**: Clear error messages for constraint violations
158

159
### Schema Explorer
160

161
Visual schema exploration and understanding:
162

163
- **Model Relationships**: Visual representation of model connections
164
- **Field Details**: Data types, constraints, and validation rules
165
- **Index Information**: View database indexes and performance hints
166
- **Enum Visualization**: Display enum values and options
167

168
## Development Workflows
169

170
### Local Development
171

172
```bash
173
# Start development stack
174
npm run dev &           # Application server
175
prisma studio &         # Database GUI
176
# Both running simultaneously for full development environment
177
```
178

179
### Database Debugging
180

181
```bash
182
# Quick database inspection
183
prisma studio
184

185
# Inspect specific changes after migration
186
prisma migrate dev --name add-feature
187
prisma studio  # Verify migration results
188
```
189

190
### Data Seeding Verification
191

192
```bash
193
# Verify seeded data
194
prisma db seed
195
prisma studio  # Check seeding results visually
196
```
197

198
## Production Considerations
199

200
### Security Configuration
201

202
```bash
203
# Production-safe Studio (internal network only)
204
prisma studio --hostname 127.0.0.1 --port 5555
205

206
# VPN or internal access
207
prisma studio --hostname 10.0.0.100 --port 5555
208
```
209

210
### Docker Integration
211

212
```dockerfile
213
# Dockerfile for Studio container
214
FROM node:18-alpine
215
COPY . .
216
RUN npm install
217
EXPOSE 5555
218
CMD ["npx", "prisma", "studio", "--hostname", "0.0.0.0"]
219
```
220

221
```yaml
222
# docker-compose.yml
223
services:
224
  prisma-studio:
225
    build: .
226
    ports:
227
      - "5555:5555"
228
    environment:
229
      - DATABASE_URL=${DATABASE_URL}
230
    command: npx prisma studio --hostname 0.0.0.0
231
```
232

233
### Reverse Proxy Setup
234

235
```nginx
236
# Nginx configuration for Studio
237
location /studio/ {
238
    proxy_pass http://localhost:5555/;
239
    proxy_http_version 1.1;
240
    proxy_set_header Upgrade $http_upgrade;
241
    proxy_set_header Connection 'upgrade';
242
    proxy_set_header Host $host;
243
    proxy_set_header X-Real-IP $remote_addr;
244
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
245
    proxy_set_header X-Forwarded-Proto $scheme;
246
    proxy_cache_bypass $http_upgrade;
247
}
248
```
249

250
## Error Handling
251

252
Common Studio errors and solutions:
253

254
- **Port Conflicts**: Studio automatically tries alternative ports
255
- **Database Connection**: Check DATABASE_URL and database availability
256
- **Schema Errors**: Invalid schema prevents Studio from starting
257
- **Browser Issues**: Try different browser or disable extensions
258
- **Network Access**: Firewall or network configuration blocking access
259
- **Permission Errors**: Database user lacks necessary permissions
260

261
## Integration Patterns
262

263
### Development Team Workflow
264

265
```bash
266
# Team member workflow
267
git pull origin main          # Get latest schema changes
268
prisma migrate dev           # Apply new migrations
269
prisma generate             # Update client
270
prisma studio               # Explore data changes
271
```
272

273
### Testing Integration
274

275
```bash
276
# Testing workflow with Studio
277
npm run test:setup          # Setup test database
278
prisma studio --port 5556   # Studio for test database inspection
279
npm run test               # Run tests
280
```
281

282
### Multi-Environment Setup
283

284
```bash
285
# Development environment
286
DATABASE_URL=$DEV_DATABASE_URL prisma studio --port 5555
287

288
# Staging environment
289
DATABASE_URL=$STAGING_DATABASE_URL prisma studio --port 5556
290

291
# Local test database
292
DATABASE_URL=$TEST_DATABASE_URL prisma studio --port 5557
293
```
294

295
## Studio Interface Features
296

297
### Navigation
298

299
- **Sidebar**: Model/table navigation with search
300
- **Breadcrumbs**: Track current location in data hierarchy
301
- **Tabs**: Multiple table views open simultaneously
302
- **Search**: Global search across all tables and records
303

304
### Data Operations
305

306
- **CRUD Operations**: Create, read, update, delete records
307
- **Bulk Operations**: Select and modify multiple records
308
- **Export/Import**: Data export in various formats
309
- **Filtering**: Advanced filtering with multiple criteria
310
- **Sorting**: Sort by any column with multiple sort keys
311

312
### Performance Features
313

314
- **Pagination**: Efficient handling of large datasets
315
- **Lazy Loading**: Load data on demand for better performance
316
- **Caching**: Client-side caching for improved responsiveness
317
- **Connection Pooling**: Efficient database connection management
318

319
### Accessibility
320

321
- **Keyboard Navigation**: Full keyboard accessibility
322
- **Screen Reader Support**: ARIA labels and semantic HTML
323
- **High Contrast**: Support for high contrast themes
324
- **Responsive Design**: Works on various screen sizes