Prisma Studio - A Visual Interface for Your Database

Prisma Studio helps developers manage their application data. We're excited to share that it is now part of the stable Prisma release. Try out the online demo or connect it to your existing database.

Contents

• The need for a visual data browser
• What can Studio do?
• Try it out with your existing database
• Let us know what you think

The need for a visual data browser

Databases are often times black boxes with no discernible interface other than SQL queries. This can be inconvenient when building applications. Developers need to be able to quickly verify the application is reading and writing data correctly, and adding a couple of rows of data to the database should be as easy as editing a spreadsheet.

We realized that developers building applications using Prisma would welcome having an intuitive interface providing the productivity and confidence benefits of Prisma Client: an easy access to your application's data, without the need to deal with SQL.

<TweetEmbedComp tweets={["1306291213369315329"]} />

What can Studio do?

In the first generally available version, Prisma Studio provides a straightforward, grid-based view of the data present in the database defined in your Prisma project, no matter if it uses SQLite, MySQL or PostgreSQL under the hood.

It comes with some exciting features and qualities:

You can check out our growing documentation to learn more about Studio.

Try it out with your existing database

Even if you're not using Prisma in your project yet, you can connect Prisma Studio to your database and benefit from Studio's modern interface. Get started in 4 steps:

1. Setup Prisma

First, install the Prisma CLI in your project:

npm install @prisma/cli --save-dev

Now you can initialize a new Prisma project:

npx prisma init

This creates a new directory called prisma with an empty Prisma schema file and a .env file for your databse connection URL.

2. Connect your database

Next, you need to connect your database by providing your connection URL as the DATABASE_URL environment variable in the .env file. Here are a few examples for what you connection URL might look like depending on the database you use:

DATABASE_URL="postgresql://janedoe:mypassword@localhost:5432/mydb?schema=public"

DATABASE_URL="mysql://janedoe:mypassword@localhost:3306/mydb"

DATABASE_URL="file:./mydb.db"

DATABASE_URL=sqlserver://localhost:1433;database=prisma-demo;user=SA;password=Pr1sm4_Pr1sm4;trustServerCertificate=true;encrypt=true

Note that if you're not using PostgreSQL, you also need to adjust the provider field in the datasource block to specify your database:

datasource db {
  url =       env("DATABASE_URL")
  provider = "postgresql"
}

datasource db {
  url =       env("DATABASE_URL")
  provider = "mysql"
}

datasource db {
  url =       env("DATABASE_URL")
  provider = "sqlite"
}

datasource db {
  url =       env("DATABASE_URL")
  provider = "sqlserver"
}

3. Introspect your database

With your database connection URL, you can introspect your database. Note that this will populate your Prisma schema file with Prisma models that represent your database schema:

npx prisma introspect

4. Launch Prisma Studio 🚀

That's it. You can now launch Prisma Studio to view and edit the data in your database:

npx prisma studio

Let us know what you think

While Studio is currently focused to the most common tasks you may want to perform on your data, we're just getting started. We're eager to understand how Studio fits into your development workflow and how we can help you stay productive and confident while building data-powered applications.

Feel free to join us on our Slack in the #prisma-studio channel for help and feedback, or raise an issue on Github if you run into problems.