diff --git a/content/100-getting-started/02-prisma-orm/100-quickstart/200-sqlite.mdx b/content/100-getting-started/02-prisma-orm/100-quickstart/200-sqlite.mdx index 14f227368c..09a11a2665 100644 --- a/content/100-getting-started/02-prisma-orm/100-quickstart/200-sqlite.mdx +++ b/content/100-getting-started/02-prisma-orm/100-quickstart/200-sqlite.mdx @@ -266,6 +266,14 @@ You should see the created user and all users printed to the console! +:::note[SQLite requirements for Prisma Studio] +- File paths must have a `file:` protocol right now in the database url for SQLite +- Node.js 22.5+: Works out of the box with the built-in `node:sqlite` module +- Node.js 20: Requires installing `better-sqlite3` as a dependency + - If using pnpm 10+, you'll also need to allow the `better-sqlite3` install script + +::: + ## Next steps diff --git a/content/100-getting-started/02-prisma-orm/100-quickstart/700-cockroachdb.mdx b/content/100-getting-started/02-prisma-orm/100-quickstart/700-cockroachdb.mdx index 601a6a775b..043ae8af05 100644 --- a/content/100-getting-started/02-prisma-orm/100-quickstart/700-cockroachdb.mdx +++ b/content/100-getting-started/02-prisma-orm/100-quickstart/700-cockroachdb.mdx @@ -268,9 +268,11 @@ npx tsx script.ts You should see the created user and all users printed to the console! -## 9. Explore your data with Prisma Studio +## 9. Explore your data - +Explore the options suggested by [CockroachDB](https://www.cockroachlabs.com/blog/cockroachdb-gui-options/) to view and manage your data. + +[Prisma Studio](/orm/tools/prisma-studio) does not currently support CockroachDB. Support may be added in a future release. See [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio) for more information. ## Next steps diff --git a/content/100-getting-started/02-prisma-orm/100-quickstart/800-mongodb.mdx b/content/100-getting-started/02-prisma-orm/100-quickstart/800-mongodb.mdx index 13b0375a2e..b9914f6bb0 100644 --- a/content/100-getting-started/02-prisma-orm/100-quickstart/800-mongodb.mdx +++ b/content/100-getting-started/02-prisma-orm/100-quickstart/800-mongodb.mdx @@ -276,9 +276,11 @@ npx tsx script.ts You should see the created user and all users printed to the console! -## 9. Explore your data with Prisma Studio +## 9. Explore your data - +You can use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas), the MongoDB shell, or MongoDB Compass to view and manage your data. + +[Prisma Studio](/orm/tools/prisma-studio) does not currently support MongoDB. Support may be added in a future release. See [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio) for more information. ## Next steps diff --git a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/200-sqlite.mdx b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/200-sqlite.mdx index 4829c9be51..2730ac382c 100644 --- a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/200-sqlite.mdx +++ b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/200-sqlite.mdx @@ -249,6 +249,15 @@ This command will: +:::note[SQLite requirements for Prisma Studio] + +- File paths must have a `file:` protocol right now in the database url for SQLite +- Node.js 22.5+: Works out of the box with the built-in `node:sqlite` module +- Node.js 20: Requires installing `better-sqlite3` as a dependency + - If using pnpm 10+, you'll also need to allow the `better-sqlite3` install script + +::: + ## Next steps diff --git a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/700-cockroachdb.mdx b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/700-cockroachdb.mdx index 5b878d723c..e556f84f32 100644 --- a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/700-cockroachdb.mdx +++ b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/700-cockroachdb.mdx @@ -246,9 +246,11 @@ This command will: - Apply the migration to your database - Regenerate Prisma Client -## 10. Explore your data with Prisma Studio +## 10. Explore your data - +Explore the options suggested by [CockroachDB](https://www.cockroachlabs.com/blog/cockroachdb-gui-options/) to view and manage your data. + +[Prisma Studio](/orm/tools/prisma-studio) does not currently support CockroachDB. Support may be added in a future release. See [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio) for more information. ## Next steps diff --git a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/800-mongodb.mdx b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/800-mongodb.mdx index b0cf0e76b9..e1c7e068ab 100644 --- a/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/800-mongodb.mdx +++ b/content/100-getting-started/02-prisma-orm/200-add-to-existing-project/800-mongodb.mdx @@ -292,9 +292,11 @@ Prisma Migrate is not supported for MongoDB. Use `prisma db push` to sync your s ::: -## 9. Explore your data with Prisma Studio +## 9. Explore your data - +You can use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas), the MongoDB shell, or MongoDB Compass to view and manage your data. + +[Prisma Studio](/orm/tools/prisma-studio) does not currently support MongoDB. Support may be added in a future release. See [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio) for more information. ## Next steps diff --git a/content/100-getting-started/_components/_explore-data.mdx b/content/100-getting-started/_components/_explore-data.mdx index 8e1ecd0362..e69f7fce73 100644 --- a/content/100-getting-started/_components/_explore-data.mdx +++ b/content/100-getting-started/_components/_explore-data.mdx @@ -5,3 +5,9 @@ npx prisma studio --config ./prisma.config.ts ``` This opens a web interface where you can view and edit your data. + +:::info[Supported databases] + +Prisma Studio currently supports PostgreSQL, MySQL, and SQLite. For more details, see [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio). + +::: diff --git a/content/200-orm/400-tools/06-prisma-studio.mdx b/content/200-orm/400-tools/06-prisma-studio.mdx index 48a1594924..95832603ab 100644 --- a/content/200-orm/400-tools/06-prisma-studio.mdx +++ b/content/200-orm/400-tools/06-prisma-studio.mdx @@ -5,262 +5,145 @@ metaDescription: 'Prisma Studio is a visual database editor.' toc_max_heading_level: 2 --- -import StudioStringSvg from '/img/studio/string.svg'; -import StudioNumberSvg from '/img/studio/number.svg'; -import StudioDatetimeSvg from '/img/studio/datetime.svg'; -import StudioBooleanSvg from '/img/studio/boolean.svg'; -import StudioEnumSvg from '/img/studio/enum.svg'; -import StudioArraySvg from '/img/studio/array.svg'; -import StudioObjectSvg from '/img/studio/object.svg'; +Prisma Studio is a standalone visual database editor that lets you view and manipulate data directly in your browser. Unlike previous versions, Prisma Studio is now SQL-driven and works independently of Prisma ORM—you can use it with any database without needing a Prisma schema or project. -Prisma Studio is a visual editor for the data in your database. Note that Prisma Studio is not open source but you can still create issues in the [`prisma/studio`](https://github.com/prisma/studio) repo. +Note that Prisma Studio is not open source but you can still create issues in the [`prisma/studio`](https://github.com/prisma/studio) repo. -Run `npx prisma studio` in your terminal. +## Prerequisites -## Models (tables or collections) +Prisma Studio is a standalone tool that only requires a database connection. You have two options: -When you first open Prisma Studio, you will see a data table layout with a sidebar showing a list of all models defined in your Prisma schema file. +### Option 1: Use with any database (no Prisma project required) -![Prisma Studio - Models view](/img/studio/01-models-view.png) +Connect directly to any supported database using the `--url` flag: -:::info -**What is a model?**

- -The term **model** refers to the data model definitions that you add to the Prisma schema file. Depending on the database that you use, a model definition, such as `model User`, refers to a **table** in a relational database (PostgreSQL, MySQL, SQL Server, SQLite, CockroachDB) or a **collection** in MongoDB.

-For more information, see [Defining models](/orm/prisma-schema/data-model/models#defining-models). -::: - -You can select a model and its data opens in a new tab. In this example, the `User` model is selected. - - -![Prisma Studio - Models view with model open](/img/studio/02-open-model.png) - - -### Open and close models - -To open another model, locate the model in the sidebar and click on it. - -To close a model, click the the **X** button in the model tab. If there are multiple models open, you can also click "Close all" to close all models. - - -![Prisma Studio - Open and close models](/img/studio/03-open-close-models.png) - -### Icons of data types in models - -The data type for each field is indicated with an icon in the header. - -The table below lists all data types and their identifying icon. - -| Field data type | Description | -| :-------------------------------------------------------------------------------: | ------------------------------------ | -| | Text | -| | Integer | -| | Date-time

| -| | Boolean
| -| | Pre-defined list of values (`enum` data type) | -| | List of related records from another model | -| | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field | - -### Keyboard shortcuts in models - -When you open a model, a number of keyboard shortcuts are available to browse and manipulate the data in the model. - - -:::info -**Note**

-With Prisma Studio open, you can open the keyboard shortcuts modal by pressing Cmd ⌘+/ on macOS or Ctrl+/ on Windows. -::: +```terminal +npx prisma studio --url="postgresql://user:password@localhost:5432/dbname" +``` +This approach works without any Prisma ORM setup—Studio will introspect your database schema directly. -![Prisma Studio - Keyboard shortcuts](/img/studio/04-model-view-keyboard-shortcuts.png) +### Option 2: Use with a Prisma ORM project -## Edit data +If you have an existing Prisma project, Studio can read your configuration: -Prisma Studio offers two mechanisms for editing existing data: [in-line editing](#in-line-editing) and [side panel editing](#side-panel-editing). +- A `prisma/schema.prisma` file with at least one model defined +- A `prisma.config.ts` configuration file +- A configured database connection -### In-line editing +## Getting started -To edit data in-line, double-click a cell to enter edit mode. Doing so will place your cursor in the cell and allow you to edit the data. Data can be copied and pasted into cells. +### Standalone usage (without Prisma ORM) -All changes (add, edit, or delete) must be confirmed before they will take effect. Confirm added and edited records with the **Save change** button. When you select records and click **Delete records**, confirm the deletion in a dialog box. +To launch Prisma Studio with any database, provide a connection URL: -You can accumulate multiple added records and edited cells, which you can then finalize with the **Save changes** button. +```terminal +npx prisma studio --url="postgresql://user:password@localhost:5432/dbname" +``` +### With a Prisma ORM project -![Prisma Studio - Save inline changes](/img/studio/11-save-inline-changes.png) -Once you have finished editing the data, click the green **Save** button. +If you have a Prisma project, run the following command in your project directory: +```terminal +npx prisma studio --config ./prisma.config.ts +``` -![Prisma Studio - Save inline changes](/img/studio/11-save-inline-changes.png) +Both commands start a local web server (default port `5555`) and open Prisma Studio in your browser. Studio connects to your database and introspects the schema to provide a visual interface for your data. -### Batch editing +## Core features -Multiple records can be edited at once. Double click any cell to edit values, moving to any additional cells as necessary. Once complete, click the green **Save** button. +Prisma Studio provides several key capabilities for working with your database: +### Browse your data -![Prisma Studio - Save multiple inline changes](/img/studio/12-save-multiple-inline-changes.png) +Studio displays all tables from your database in a sidebar. Select any table to view its data in a table format. You can open multiple tables in separate tabs to work with related data simultaneously. -### Side panel editing +### View and edit records -Prisma Studio also offers a side panel for editing data. To open the side panel, click the **Edit side panel** icon located beside the select checkbox at the far left of every visible record. +You can edit data in two ways: +- **Inline editing**: Double-click any cell to edit its value directly in the table +- **Side panel editing**: Click the edit icon next to a record to open a detailed view with all fields -![Prisma Studio - Open side panel](/img/studio/13-edit-side-panel-icon.png) +Changes are accumulated and must be saved explicitly using the save button. This lets you make multiple edits before committing them to the database. -Clicking the icon will open the side panel on the right where edits can be performed. Once complete, click outside the side panel and click the green **Save** button to save the changes. +### Add new records +Create new records by clicking the "Add record" button. Studio provides appropriate input controls based on each field's data type: -![Prisma Studio - Edit side panel](/img/studio/14-edit-data-in-sidepanel.png) +- Text fields for strings +- Number inputs for integers and decimals +- Date pickers for datetime fields +- Dropdowns for enums and boolean values +- Relation selectors for foreign keys ### Delete records -1. From the left column, select the check box for the records you want to delete. -2. Click **Delete _n_ record(s)**. -3. Click **Delete** in the confirmation dialog. - -You can select multiple records and delete them at once with the **Delete records** button. When you delete multiple records, the operation completes immediately (after you confirm it). - -In addition, if you have any accumulated added or edited records and then decide to delete records, the deletion also force-saves the accumulated edits. - -:::warning -**Warning**

-Deleting a record is a separate operation that cannot be accumulated. If you delete a record while having unsaved edits, the delete operation first force-saves the unsaved edits and then completes. -::: - - -![Prisma Studio - Delete records](/img/studio/15-delete-records.png) - -You can discard any accumulated changes with the **Discard changes** button. - -![Prisma Studio - Discard changes](/img/studio/16-discard-changes.png) - -### Copy and paste - -You can copy the value of any table cell using: - -- Cmd ⌘ + C   on macOS -- Ctrl + C     on Windows - -To paste in another cell, first double-click the cell to enter edit mode, and then use: - -- Cmd ⌘ + V   on macOS -- Ctrl + V     on Windows - -### Add a record - -1. In the model view, click **Add record**. -2. Based on the data allowed in each field, type the data for the record. - - | Field data type | Description | - | :-------------------------------------------------------------------------------: | ------------------ | - | | Text | - | | Integer

If such a field has `autoincrement()` pre-filled, do not edit the cell and do not add a number manually. | - | | Date-time

Date-time fields contain a long string of numbers, letters, and others. As a best practice, copy the value of another date-time cell and modify it as necessary before pasting in the field. | - | | Boolean

Select `true` or `false`. | - | | Pre-defined list

Double-click a cell in the field and select one of the pre-defined options. | - | | List of related records from another model

It typically refers to a list of records that exist in another model in the database. If you are adding a new record and records from the related model do not yet exist, you do not need to enter anything in the current model. | - | | The `{}` symbol can refer to one of the two types of fields.

• Relation field
• JSON field

**Relation with a model defined separately in the database**

Typically, you need to select the same value as any of the previous records
Click the name of the model to see the list of values which you can then select for the related field.

**JSON field**

Double-click the field to edit the JSON data. As a best practice, validate the edited JSON data in a validator and paste it back in the cell. | - -3. (Optional) If you are unhappy with your changes, click **Discard changes** and start over. -4. Click **Save 1 change**. - -## Filters - -### Filter data - -Use the **Filters** menu to filter data in the model by adding conditions. - -In the **Filters** menu, the first condition that you add is the `where` clause. - -When you add multiple conditions, Prisma Studio filters the results so that all conditions apply in combination. Each new condition indicates this with the `and` operator, which appears in front. - -**Steps** - -1. Click **Filters** to open the **Filters** menu. - - :::info - **Note**
- Click **Filters** again if you want to hide the menu. - ::: - -2. Click **Add a new filter**. -3. Configure the condition. - 1. Select the field by which you want to filter. - 2. Select a comparison operator. - - **equals** - - **in** - - **notin** - - **lt** - - **lte** - - **gt** - - **gte** - - **not** - 3. Type the value you want to use for the condition.
- **Step result**: **Prisma Studio** updates the data in the model immediately, based on the condition. -4. To add a new filter, click **Add a new filter** and repeat the steps above. -5. To remove a filter, click the **x** button on the right. - ![Prisma Studio - Add and remove filters](/img/studio/06-add-remove-filters.png) -6. To remove all filters, click **Clear all**. - -**Result** +Select one or more records using the checkboxes and click the delete button. Deletions require confirmation and are applied immediately (they cannot be batched with other changes). -- The data in the model is filtered based on the combination of all conditions you add. -- In the **Filters** menu, the default value of **None** changes to display the number of filters you add. +### Filter and search -### Show and hide fields +Use the Filters menu to narrow down your data: -You can select which fields to view or hide by using the **Fields** menu. +- Add conditions using comparison operators (equals, greater than, less than, etc.) +- Combine multiple filters with AND logic +- Clear individual filters or all filters at once -:::info -**What is a field?**
+### Control visibility -A **field** is a property of a model which you add in the data model definitions in the Prisma schema file. Depending on the database that you use, a field, such as the `title` field in `model User { title String }`, refers to a **column** in a relational database (PostgreSQL, MySQL, SQL Server, SQLite, CockroachDB) or a **document field** in MongoDB.
-For more information, see [Defining fields](/orm/prisma-schema/data-model/models#defining-fields). -::: +Customize your view: -**Steps** +- **Fields menu**: Show or hide specific columns +- **Showing menu**: Control pagination with "Take" (limit) and "Skip" (offset) options -1. Click the **Fields** menu. -2. Select only the fields you want to see and deselect any fields you want to hide. - ![Prisma Studio - Show and hide fields](/img/studio/07-show-hide-fields.png) +### Sort data -**Result** +Click any column header to sort by that field. Click again to toggle between ascending and descending order. -The model is immediately filtered to hide the data from any fields you have deselected. +### Keyboard shortcuts -Also, the **Fields** menu shows the number of fields that are currently selected. +Studio supports keyboard shortcuts for common operations. Press Cmd+/ (macOS) or Ctrl+/ (Windows) to view all available shortcuts. -### Show and hide records +## Understanding data types -You can also select to show or skip a specific number of records in the model view. +Studio displays visual indicators for different field types in your database: -:::info -**What is a record?**
+- **Text fields**: String values +- **Number fields**: Integers and decimals +- **Date/time fields**: Timestamps and dates +- **Boolean fields**: True/false values +- **Enum fields**: Predefined list of options +- **Relation fields**: References to records in other tables (foreign keys) +- **JSON fields**: Structured JSON data -A **record** refers to a **row of data in a table** in a relational database (PostgreSQL, MySQL, SQL Server, SQLite, CockroachDB) or a **document** in MongoDB. -::: +These visual cues help you quickly understand your data structure as Studio introspects it directly from your database. -**Steps** +## Working with relations -1. Click the **Showing** menu. -2. In the **Take** box, specify the maximum number of records that you want the model view to show. -3. In the **Skip** box, specify how many of the first records you want to hide. - ![Prisma Studio - Show and hide records](/img/studio/08-show-hide-records.png) +When your database tables have foreign key relationships, Studio provides tools to navigate and edit related data: -**Result** +- Click on a relation field to view the related record +- Use relation selectors when creating or editing records to link to existing data +- Open related tables in separate tabs to work with connected data simultaneously -The model is immediately filtered to show or hide records based on your selection. +## Databases supported by Prisma Studio -The **Showing** menu indicates how many records are shown out of how many available records are in the model. +Prisma Studio currently supports the following databases: PostgreSQL, MySQL, and SQLite. -## Sort data +### SQLite requirements for Prisma Studio -Click a field title to sort by the field data. +- File paths must have a `file:` protocol right now in the database url for SQLite +- Node.js 22.5+: Works out of the box with the built-in `node:sqlite` module +- Node.js 20: Requires installing `better-sqlite3` as a dependency + - If using pnpm 10+, you'll also need to allow the `better-sqlite3` install script -The first click sorts the data in ascending order, the second - in descending order. +### Databases not yet supported +Support for CockroachDB and MongoDB is not currently available but may be added in future releases. If you're using these databases: -![Prisma Studio - Sort data](/img/studio/09-model-sort.png) +- CockroachDB: Explore the options suggested by [CockroachDB](https://www.cockroachlabs.com/blog/cockroachdb-gui-options/) +- MongoDB: Use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas), MongoDB Compass, or the MongoDB shell ## Troubleshooting diff --git a/content/200-orm/500-reference/200-prisma-cli-reference.mdx b/content/200-orm/500-reference/200-prisma-cli-reference.mdx index aac2536e20..fa53209561 100644 --- a/content/200-orm/500-reference/200-prisma-cli-reference.mdx +++ b/content/200-orm/500-reference/200-prisma-cli-reference.mdx @@ -1707,6 +1707,16 @@ Starts the [Prisma MCP server](/postgres/integrations/mcp-server). The `studio` command allows you to interact with and manage your data interactively. It does this by starting a local web server with a web app configured with your project's data schema and records. +Prisma ORM v7 introduces a more stable version of Prisma Studio with improved performance and a modernized architecture. + +:::info[Supported databases] + +Prisma Studio currently supports PostgreSQL, MySQL, and SQLite. Support for CockroachDB and MongoDB is not available yet but may be added in future releases. + +For detailed database support information, including SQLite requirements, see [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio). + +::: + #### Prerequisites Before using the `studio` command, you must configure your database connection in your `prisma.config.ts` file. @@ -1742,11 +1752,13 @@ export default defineConfig({ The `studio` command recognizes the following options: -| Option | Required | Description | Default | -| ----------------- | -------- | ----------------------------------- | ------------------------ | -| `-b`, `--browser` | No | The browser to auto-open Studio in. | `` | -| `-h`, `--help` | No | Show all available options and exit | | -| `-p`, `--port` | No | The port number to start Studio on. | 5555 | +| Option | Required | Description | Default | +| ----------------- | -------- | -------------------------------------------------------------------------------- | ------------------------ | +| `-b`, `--browser` | No | The browser to auto-open Studio in. | `` | +| `-h`, `--help` | No | Show all available options and exit | | +| `-p`, `--port` | No | The port number to start Studio on. | 5555 | +| `--config` | No | Custom path to your Prisma config file | | +| `--url` | No | Database connection string (overrides the one in your Prisma config) | | #### Arguments @@ -1780,6 +1792,18 @@ prisma studio --browser firefox prisma studio --browser none ``` +#### Start Studio with a custom Prisma config file + +```terminal +prisma studio --config=./prisma.config.ts +``` + +#### Start Studio with a direct database connection string + +```terminal +prisma studio --url="postgresql://user:password@localhost:5432/dbname" +``` + ## `package.json` entry options ### `schema` diff --git a/content/250-postgres/300-database/675-prisma-studio/50-studio-in-vs-code.mdx b/content/250-postgres/300-database/675-prisma-studio/50-studio-in-vs-code.mdx index 295333ab67..33869333f1 100644 --- a/content/250-postgres/300-database/675-prisma-studio/50-studio-in-vs-code.mdx +++ b/content/250-postgres/300-database/675-prisma-studio/50-studio-in-vs-code.mdx @@ -10,6 +10,14 @@ toc: true You can use Prisma Studio directly in VS Code via the [Prisma VS Code extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma). +:::info[Supported databases] + +Prisma Studio currently supports PostgreSQL, MySQL, and SQLite. Support for CockroachDB and MongoDB is not available yet but may be added in future releases. + +For detailed database support information, including SQLite requirements, see [Databases supported by Prisma Studio](/orm/tools/prisma-studio#databases-supported-by-prisma-studio). + +::: + ## Usage 1. Install the [Prisma VS Code extension](https://marketplace.visualstudio.com/items?itemName=Prisma.prisma)