prisma/prisma

Studio

prisma studio is the GUI for browsing and editing data in a Prisma project. The implementation has two parts: the server (in this repo) and the frontend (a separate React project, pre-bundled into this repo).

Components

Layer	Location	Purpose
CLI dispatch	`packages/cli/src/CLI.ts`	Routes `prisma studio` to `Studio.ts`
Studio command	`packages/cli/src/Studio.ts` (~21KB)	Boots the HTTP server, opens the browser
Server bindings	`packages/cli/src/studio-server.ts`	Runtime-specific HTTP server glue
Frontend bundle	`packages/cli/build/studio.js`, `studio.css`	Pre-built React app, served by the server
Frontend entry	`packages/cli/src/studio-entry.ts`	Loader that the bundled frontend imports
Underlying client	`@prisma/client` instantiated by Studio	Used to query the user's database

The frontend source code is not in this repo. It's a separate project; the bundled output is committed here and bumped automatically by update-studio-version.yml.

How a `prisma studio` invocation flows

sequenceDiagram
    participant User
    participant CLI as prisma studio (cli/Studio.ts)
    participant Server as studio-server.ts
    participant Bundle as build/studio.js
    participant Client as PrismaClient
    participant DB

    User->>CLI: prisma studio
    CLI->>CLI: load prisma.config.ts
    CLI->>Server: start HTTP server on free port
    Server->>Server: register Studio routes
    CLI->>User: open browser at localhost:port
    User->>Server: GET /
    Server-->>User: index.html (loads bundle)
    User->>Server: GET /studio.js, /studio.css
    Server-->>User: bundled assets
    User->>Server: API call to /api/...
    Server->>Client: prisma.<model>.findMany()
    Client->>DB: SQL
    DB-->>Client: rows
    Client-->>Server: typed objects
    Server-->>User: JSON

Routes

From AGENTS.md:

Studio is now pre-bundled into packages/cli/build/studio.js and packages/cli/build/studio.css, served only through explicit routes in packages/cli/src/Studio.ts via the runtime-specific packages/cli/src/studio-server.ts bindings.

That is, the server doesn't blanket-serve the build directory; it has explicit routes for each asset. This avoids accidentally exposing other things in packages/cli/build/.

A subtle bug history

A past Node regression treated GET requests with bodies like HEAD requests and dropped them. Studio was affected because some of its API calls had bodies. Listener-level coverage in packages/cli/src/__tests__/studio-server.vitest.ts exists to prevent recurrence.

If you change studio-server.ts, run the Vitest suite specifically — the regression is subtle and easy to reintroduce.

Cell editing rules

Studio's cell-edit behavior depends on whether the column is writable. Per AGENTS.md:

If Enter or click does not open a cell editor in Studio, verify that the current table and column are writable before assuming a keyboard regression; views/system tables and read-only columns legitimately stay non-editable.

This is not a bug — system catalogs and views shouldn't be editable in-place. When debugging "Studio's cell editor isn't opening", confirm the column is writable first.

Running Studio in isolation

For debugging Studio without dragging in bin.ts:

pnpm exec tsx packages/cli/src/Studio.ts

You can pass a config object that preserves loadedFromFile: true so SQLite URLs continue to resolve relative to the config file.

Studio version bumping

The frontend bundle is updated by update-studio-version.yml. It runs periodically and PRs new studio.js / studio.css artifacts. A separate workflow than the engines bumps; the resulting commits are typically authored by Prismo.