Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 34 additions & 29 deletions content/200-orm/400-tools/06-prisma-studio.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ metaTitle: 'Prisma Studio'
metaDescription: 'Prisma Studio is a visual database editor.'
---

import StudioStringSvg from './images/prisma-studio/string.svg';
import StudioNumberSvg from './images/prisma-studio/number.svg';
import StudioDatetimeSvg from './images/prisma-studio/datetime.svg';
import StudioBooleanSvg from './images/prisma-studio/boolean.svg';
import StudioEnumSvg from './images/prisma-studio/enum.svg';
import StudioArraySvg from './images/prisma-studio/array.svg';
import StudioObjectSvg from './images/prisma-studio/object.svg';

<TopBlock title={frontMatter.title}>

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.
Expand All @@ -28,7 +36,7 @@ For more information, see [Defining models](/orm/prisma-schema/data-model/models
You can select a model and its data opens in a new tab.

<img
src="./images/prisma-studio/01-models-view.png"
src={require("./images/prisma-studio/01-models-view.png").default}
alt="Prisma Studio - Models view"
/>

Expand All @@ -39,7 +47,7 @@ To open another model, click the **+** button.
To close a model, click the the **x** button in the model tab.

<img
src="./images/prisma-studio/02-open-close-models.png"
src={require("./images/prisma-studio/02-open-close-models.png").default}
alt="Prisma Studio - Open and close models"
width="375px"
/>
Expand All @@ -50,15 +58,15 @@ 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 |
| :-------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------- |
| <img src="./images/prisma-studio/string.svg" width="10px" alt="String type"/> | Text |
| <img src="./images/prisma-studio/number.svg" width="10px" alt="Number type"/> | Integer |
| <img src="./images/prisma-studio/datetime.svg" width="10px" alt="Datetime type"/> | Date-time<br /><br /> |
| <img src="./images/prisma-studio/boolean.svg" width="10px" alt="Boolean type"/> | Boolean<br /> |
| <img src="./images/prisma-studio/enum.svg" width="10px" alt="Enum type"/> | Pre-defined list of values (`enum` data type) |
| <img src="./images/prisma-studio/array.svg" width="10px" alt="Array type"/> | List of related records from another model |
| <img src="./images/prisma-studio/object.svg" width="10px" alt="Object type"/> | The `{}` symbol can refer to one of the two types of fields.<br /><br /> • Relation field<br />• JSON field |
| Field data type | Description |
| :-------------------------------------------------------------------------------: | ------------------------------------ |
| <StudioStringSvg width="10px" alt="String type"/> | Text |
| <StudioNumberSvg width="10px" alt="Number type"/> | Integer |
| <StudioDatetimeSvg width="10px" alt="Datetime type"/> | Date-time<br /><br /> |
| <StudioBooleanSvg width="10px" alt="Boolean type"/> | Boolean<br /> |
| <StudioEnumSvg width="10px" alt="Enum type"/> | Pre-defined list of values (`enum` data type) |
| <StudioArraySvg width="10px" alt="Array type"/> | List of related records from another model |
| <StudioObjectSvg width="10px" alt="Object type"/> | The `{}` symbol can refer to one of the two types of fields.<br /><br /> • Relation field<br />• JSON field |

### Keyboard shortcuts in models

Expand All @@ -72,7 +80,7 @@ With Prisma Studio open, you can open the keyboard shortcuts modal by pressing <
</Admonition>

<img
src="./images/prisma-studio/03-model-view-keyboard-shortcuts.png"
src={require("./images/prisma-studio/03-model-view-keyboard-shortcuts.png").default}
width="375px"
alt="Prisma Studio - Keyboard shortcuts"
/>
Expand Down Expand Up @@ -108,15 +116,15 @@ To paste in another cell, first double-click the cell to enter edit mode, and th
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 |
| :-------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="./images/prisma-studio/string.svg" width="10px" alt="String type"/> | Text |
| <img src="./images/prisma-studio/number.svg" width="10px" alt="Number type"/> | Integer<br /><br />If such a field has `autoincrement()` pre-filled, do not edit the cell and do not add a number manually. |
| <img src="./images/prisma-studio/datetime.svg" width="10px" alt="Datetime type"/> | Date-time<br /><br />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. |
| <img src="./images/prisma-studio/boolean.svg" width="10px" alt="Boolean type"/> | Boolean<br /><br />Select `true` or `false`. |
| <img src="./images/prisma-studio/enum.svg" width="10px" alt="Enum type"/> | Pre-defined list<br /><br />Double-click a cell in the field and select one of the pre-defined options. |
| <img src="./images/prisma-studio/array.svg" width="10px" alt="Array type"/> | List of related records from another model<br /><br />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. |
| <img src="./images/prisma-studio/object.svg" width="10px" alt="Object type"/> | The `{}` symbol can refer to one of the two types of fields.<br /><br /> • Relation field<br />• JSON field<br /><br />**Relation with a model defined separately in the database**<br /><br />Typically, you need to select the same value as any of the previous records<br />Click the name of the model to see the list of values which you can then select for the related field.<br /><br />**JSON field**<br /><br /> 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. |
| Field data type | Description |
| :-------------------------------------------------------------------------------: | ------------------ |
| <StudioStringSvg width="10px" alt="String type"/> | Text |
| <StudioNumberSvg width="10px" alt="Number type"/> | Integer<br /><br />If such a field has `autoincrement()` pre-filled, do not edit the cell and do not add a number manually. |
| <StudioDatetimeSvg width="10px" alt="Datetime type"/> | Date-time<br /><br />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. |
| <StudioBooleanSvg width="10px" alt="Boolean type"/> | Boolean<br /><br />Select `true` or `false`. |
| <StudioEnumSvg width="10px" alt="Enum type"/> | Pre-defined list<br /><br />Double-click a cell in the field and select one of the pre-defined options. |
| <StudioArraySvg width="10px" alt="Array type"/> | List of related records from another model<br /><br />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. |
| <StudioObjectSvg width="10px" alt="Object type"/> | The `{}` symbol can refer to one of the two types of fields.<br /><br /> • Relation field<br />• JSON field<br /><br />**Relation with a model defined separately in the database**<br /><br />Typically, you need to select the same value as any of the previous records<br />Click the name of the model to see the list of values which you can then select for the related field.<br /><br />**JSON field**<br /><br /> 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**.
Expand Down Expand Up @@ -146,10 +154,7 @@ Deleting a record is a separate operation that cannot be accumulated. If you del

</Admonition>

<img
src="./images/prisma-studio/04-save-multiple-changes.png"
alt="Prisma Studio - Save multiple data edits"
/>
![Prisma Studio - Save multiple data edits](./images/prisma-studio/04-save-multiple-changes.png)

## Filters

Expand Down Expand Up @@ -189,7 +194,7 @@ When you add multiple conditions, Prisma Studio filters the results so that all
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.
<img
src="./images/prisma-studio/05-add-remove-filters.png"
src={require("./images/prisma-studio/05-add-remove-filters.png").default}
alt="Prisma Studio - add and remove filters"
width="650px"
/>
Expand Down Expand Up @@ -218,7 +223,7 @@ For more information, see [Defining fields](/orm/prisma-schema/data-model/models
1. Click the **Fields** menu.
2. Select only the fields you want to see and deselect any fields you want to hide.
<img
src="./images/prisma-studio/06-show-hide-fields.png"
src={require("./images/prisma-studio/06-show-hide-fields.png").default}
width="400px"
alt="Prisma Studio - show and hide fields"
/>
Expand Down Expand Up @@ -247,7 +252,7 @@ A **record** refers to a **row of data in a table** in a relational database (Po
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.
<img
src="./images/prisma-studio/07-show-hide-records.png"
src={require("./images/prisma-studio/07-show-hide-records.png").default}
width="450px"
alt="Prisma Studio - Show and hide records"
/>
Expand All @@ -265,7 +270,7 @@ Click a field title to sort by the field data.
The first click sorts the data in ascending order, the second - in descending order.

<img
src="./images/prisma-studio/08-model-sort.png"
src={require("./images/prisma-studio/08-model-sort.png").default}
alt="Prisma Studio - Sort data"
width="650px"
/>
Expand Down
5 changes: 3 additions & 2 deletions content/300-accelerate/580-local-development.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ This guide will explain how to use Prisma Accelerate client extension in a devel
## Using Prisma Accelerate client extension in development and production

<br />
<img src="img/accelerate/accelerate-in-dev.png" alt="" />

![](/img/accelerate/accelerate-in-dev.png)

Accelerate does not work with a local database. However, in a development environment, you can still use Prisma Client with the Accelerate client extension. This setup will not provide Accelerate's connection pooling and caching features.

Expand Down Expand Up @@ -50,7 +51,7 @@ The following steps outline how to use Prisma ORM and Prisma Accelerate with a l

> The extended instance of Prisma Client will use the local database. Hence, Prisma Accelerate will not be used in your development environment to respond to your Prisma Client queries.

<img src="img/accelerate/accelerate-in-prod.png" alt="" />
![](/img/accelerate/accelerate-in-prod.png)

If an Accelerate connection string is used as the `DATABASE_URL` environment variable, Prisma Client will route your queries through Accelerate.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ You can take screenshots with your favorite tool. We find it very easy to use Sn
</Admonition>

<img
src="./snagit-screenshot-shadow-config.png"
src={require("./images/snagit-screenshot-shadow-config.png").default}
alt="SnagIt - Screenshot canvas shadow"
width="250"
/>
Expand All @@ -43,7 +43,7 @@ You can take screenshots with your favorite tool. We find it very easy to use Sn
If you can, avoid annotations. If necessary, apply annotations that are minimal and similar in style to the screenshot below.

<img
src="./save-multiple-changes.png"
src={require("./images/save-multiple-changes.png").default}
alt="Data Browser - Save multiple changes"
width="650px"
/>
Expand All @@ -59,7 +59,7 @@ For details, see the sections below. Again, we suggest the use of SnagIt as a be
- Apply a white outline on the text. This ensures that the black text will be visible in Dark mode.

<img
src="./snagit-text-annotation-config.png"
src={require("./images/snagit-text-annotation-config.png").default}
alt="SnagIt - Screenshot text annotations"
width="250"
/>
Expand All @@ -70,7 +70,7 @@ For details, see the sections below. Again, we suggest the use of SnagIt as a be
- If you have text annotations that use arrows or lines to point to an area on the screenshot, a small part of the line or arrow should appear on the canvas (and outside of the screenshot).
- Apply a centered shadow on each pointer and make the shadow color white. This ensures that the part of the line that is outside of the screenshot remains visible in Dark mode.
<img
src="./snagit-arrow-line-config.png"
src={require("./images/snagit-arrow-line-config.png").default}
alt="SnagIt - Screenshot arrow line annotations"
width="450"
/>
Expand Down Expand Up @@ -153,7 +153,7 @@ If you need to shrink an image by width, use the `<img>` component.

```html
<img
src="./snagit-text-annotation-config.png"
src={require("./images/snagit-text-annotation-config.png").default}
alt="SnagIt - Screenshot text annotations"
width="250"
/>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.