diff --git a/content/250-postgres/300-database/675-prisma-studio/100-embedding-studio.mdx b/content/250-postgres/300-database/675-prisma-studio/100-embedding-studio.mdx
index d1d06f2e70..9ab08dfb7c 100644
--- a/content/250-postgres/300-database/675-prisma-studio/100-embedding-studio.mdx
+++ b/content/250-postgres/300-database/675-prisma-studio/100-embedding-studio.mdx
@@ -10,7 +10,7 @@ toc: true
Prisma Studio can be embedded in your own application via the [`@prisma/studio-core`](https://www.npmjs.com/package/@prisma/studio-core) package.
-It gives you `Studio` a React component which renders Prisma Studio for your database. The `Studio` component accepts an _executor_ which accesses a `/studio` endpoint in your backend. The backend uses your API key to identify the correct Prisma Postgres instance and sends the SQL query to it.
+It provides `Studio`, a React component which renders Prisma Studio for your database. The `Studio` component accepts an executor that calls a `/studio` endpoint in your backend. The backend uses your `DATABASE_URL` (connection string) to connect to the correct Prisma Postgres instance and execute the SQL query.
:::tip
If you want to see what embedded Studio looks like, **[check out the demo](https://github.com/prisma/studio-core-demo) on GitHub**!
@@ -57,6 +57,7 @@ Here's what a minimal implementation looks like:
import { Studio } from "@prisma/studio-core/ui";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
+import "@prisma/studio-core/ui/index.css"
function App() {
const adapter = useMemo(() => {
@@ -86,6 +87,7 @@ Here's what an implementation with custom headers/payload looks like:
import { Studio } from "@prisma/studio-core/ui";
import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
+import "@prisma/studio-core/ui/index.css"
function App() {
const adapter = useMemo(() => {
@@ -113,6 +115,61 @@ function App() {
}
```
+### Custom styling
+
+You can customize the look and feel of Prisma Studio so that it matches your application’s design. This is done by passing a custom theme to the `Studio` component. A theme is simply a set of CSS variables that define colors, spacing, and other style properties for both light and dark modes.
+
+Here's an example of applying a custom theme:
+
+```tsx
+import { Studio } from "@prisma/studio-core/ui";
+import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
+import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
+import "@prisma/studio-core/ui/index.css";
+
+const customTheme = `
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 20 14.3% 4.1%;
+ --primary: 47.9 95.8% 53.1%;
+ --primary-foreground: 26 83.3% 14.1%;
+ --border: 20 5.9% 90%;
+ --input: 20 5.9% 90%;
+ --ring: 20 14.3% 4.1%;
+ --radius: 0rem;
+ }
+
+ .dark {
+ --background: 20 14.3% 4.1%;
+ --foreground: 60 9.1% 97.8%;
+ --primary: 47.9 95.8% 53.1%;
+ --primary-foreground: 26 83.3% 14.1%;
+ --border: 12 6.5% 15.1%;
+ --input: 12 6.5% 15.1%;
+ --ring: 35.5 91.7% 32.9%;
+ }
+}
+`;
+
+function App() {
+ const adapter = useMemo(() => {
+ const executor = createStudioBFFClient({
+ url: "http://localhost:4242/studio",
+ });
+ return createPostgresAdapter({ executor });
+ }, []);
+
+ return (
+
+
+
+ );
+}
+```
+
+With this setup, Studio inherits your custom colors, borders, and typography rules, making it feel like a natural part of your app rather than a separate tool. You can define as many or as few variables as you need depending on the level of customization you want.
+
### Concepts
Here's an overview of the key concepts in your frontend:
@@ -123,7 +180,7 @@ Here's an overview of the key concepts in your frontend:
## Backend setup
-Your backend needs to expose a `/studio` endpoint, that's where the frontend sends its requests. The implementation of this endpoint uses the `createAccelerateHttpClient` function that can be imported from the `@prisma/studio-core`.
+Your backend needs to expose a `/studio` endpoint where the frontend sends its requests. The implementation below uses `createPrismaPostgresHttpClient` from `@prisma/studio-core`.
The backend also needs to have access to the Prisma Postgres API key, we recommend setting it as an environment variable as a best practice.
@@ -234,7 +291,7 @@ sequenceDiagram
When you want to authenticate the users of your app against Prisma Studio, you can do that by adding custom logic around your embedded Prisma Studio version.
-On the frontend, you xan ensure yo pass the `Authorization` header and other data (e.g. a user ID) when creating the executor:
+On the frontend, you can ensure to pass the `Authorization` header and other data (e.g. a user ID) when creating the executor:
```tsx
const executor = createStudioBFFClient({
diff --git a/content/800-guides/360-embed-studio-nextjs.mdx b/content/800-guides/360-embed-studio-nextjs.mdx
new file mode 100644
index 0000000000..60d436ef9a
--- /dev/null
+++ b/content/800-guides/360-embed-studio-nextjs.mdx
@@ -0,0 +1,474 @@
+---
+title: 'How to embed Prisma Studio in a Next.js app'
+metaTitle: 'How to embed Prisma Studio in a Next.js app with Prisma Postgres'
+description: 'Learn how to embed Prisma Studio directly in your Next.js application for database management'
+sidebar_label: 'Embedded Prisma Studio (with Next.js)'
+image: '/img/guides/prisma-studio-embedded-in-nextjs.png'
+completion_time: '15 min'
+tags:
+ - Next.js
+ - Prisma Studio
+ - Embedding
+community_section: true
+---
+
+Prisma Studio can be embedded directly into your Next.js application using the [`@prisma/studio-core`](https://www.npmjs.com/package/@prisma/studio-core) package. This guide walks you through the setup so you can manage your database from within your app instead of running Prisma Studio separately.
+
+After completing the guide, you'll have a Next.js app with Prisma Studio embedded, allowing you to browse and edit your database directly from your application interface:
+
+
+
+Embedding Prisma Studio can be useful in scenarios such as:
+
+- Building a quick admin dashboard for editing data
+- Supporting multi-tenant applications where each user has their own database
+- Giving users an easy way to view and edit their data
+
+:::note
+
+[**Embeddable Prisma Studio**](/postgres/database/prisma-studio/embedding-studio) is *free* and licensed under Apache 2.0.
+
+✔️ Free to use in production
+⚠️ Prisma branding must remain visible and unchanged
+🔐 To remove branding or learn about upcoming partner-only features, reach out at [partnerships@prisma.io](mailto:partnerships@prisma.io)
+
+Currently, Embedded Prisma Studio supports [**Prisma Postgres**](/postgres), with additional databases coming soon.
+
+:::
+
+## Prerequisites
+
+- [Node.js 18+](https://nodejs.org)
+- Basic knowledge of React and Next.js
+- A Prisma Postgres database
+
+## 1. Setting up Next.js
+
+First, create a new Next.js project from the directory where you want to build your app:
+
+```terminal
+npx create-next-app@latest nextjs-studio-embed
+```
+
+You will be prompted to answer a few questions about your project. Select all of the defaults.
+
+:::info
+
+For reference, those are:
+
+- TypeScript
+- ESLint
+- Tailwind CSS
+- No `src` directory
+- App Router
+- Turbopack
+- Select default import alias
+
+:::
+
+Then, navigate to the project directory:
+
+```terminal
+cd nextjs-studio-embed
+```
+
+## 2. Setting up Prisma ORM and Prisma Postgres
+
+### 2.1. Install Prisma dependencies
+
+Install the required Prisma packages:
+
+```terminal
+npm install prisma tsx --save-dev
+npm install @prisma/extension-accelerate @prisma/client
+```
+
+### 2.2. Initialize Prisma with Prisma Postgres
+
+Initialize Prisma in your project and create a Prisma Postgres database:
+
+```terminal
+npx prisma init --db --output ../app/generated/prisma
+```
+
+:::info
+
+You'll need to answer a few questions while setting up your Prisma Postgres database. Select the region closest to your location and a memorable name for your database like "My __________ Project"
+
+:::
+
+The `prisma init --db` command creates:
+
+- A `prisma/` directory with your `schema.prisma` file
+- A new Prisma Postgres database
+- A `.env` file with your `DATABASE_URL`
+- An output directory at `app/generated/prisma` for the Prisma Client
+
+### 2.3. Define your database schema
+
+Open `prisma/schema.prisma` and replace the content with:
+
+```prisma file=prisma/schema.prisma
+generator client {
+ provider = "prisma-client-js"
+ output = "../app/generated/prisma"
+}
+
+datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+}
+
+//add-start
+
+model User {
+ id Int @id @default(autoincrement())
+ name String
+ email String @unique
+ posts Post[]
+}
+
+model Post {
+ id Int @id @default(autoincrement())
+ title String
+ content String?
+ published Boolean @default(false)
+ authorId Int
+ author User @relation(fields: [authorId], references: [id])
+ createdAt DateTime @default(now())
+}
+
+//add-end
+```
+
+### 2.4. Apply the schema to your database
+
+Generate the Prisma Client and apply the schema:
+
+```terminal
+npx prisma migrate dev --name init
+```
+
+This creates the tables in your Prisma Postgres database and generates the Prisma Client.
+
+### 2.5. Seed your database (optional)
+
+Create a seed file to add some sample data. Create a `seed.ts` file in the `prisma` folder and add the following code:
+
+```typescript file=prisma/seed.ts
+import { PrismaClient } from '../app/generated/prisma'
+
+const prisma = new PrismaClient()
+
+async function main() {
+ // Create users
+ const user1 = await prisma.user.create({
+ data: {
+ name: 'Alice Johnson',
+ email: 'alice@example.com',
+ },
+ })
+
+ const user2 = await prisma.user.create({
+ data: {
+ name: 'Bob Smith',
+ email: 'bob@example.com',
+ },
+ })
+
+ // Create posts
+ await prisma.post.create({
+ data: {
+ title: 'Getting Started with Next.js',
+ content: 'Next.js is a powerful React framework...',
+ published: true,
+ authorId: user1.id,
+ },
+ })
+
+ await prisma.post.create({
+ data: {
+ title: 'Database Management with Prisma',
+ content: 'Prisma makes database management easy...',
+ published: false,
+ authorId: user2.id,
+ },
+ })
+
+ console.log('Database seeded successfully!')
+}
+
+main()
+ .catch((e) => {
+ console.error(e)
+ process.exit(1)
+ })
+ .finally(async () => {
+ await prisma.$disconnect()
+ })
+```
+
+Add a seed script to your `package.json`:
+
+```json file=package.json
+{
+ "name": "nextjs-studio-embed",
+ "version": "0.1.0",
+ "private": true,
+ // add-start
+ "prisma": {
+ "seed": "tsx prisma/seed.ts"
+ },
+ // add-end
+ "scripts": {
+ // ... existing scripts
+ }
+ // ... rest of package.json
+}
+```
+
+Run the seed script:
+
+```terminal
+npx prisma db seed
+```
+
+## 3. Setting up the embedded Prisma Studio in your app
+
+Now that you have Prisma ORM and Prisma Postgres set up, you can embed Prisma Studio in your Next.js app.
+
+### 3.1. Install the Prisma Studio Core package
+
+Install the [`@prisma/studio-core` package](https://www.npmjs.com/package/@prisma/studio-core) that provides the embeddable components:
+
+```terminal
+npm install @prisma/studio-core
+```
+
+:::note
+
+If you encounter a dependency resolution error while installing `@prisma/studio-core`, you can force the install with:
+
+```terminal
+npm install @prisma/studio-core --force
+```
+
+If you are using yarn, pnpm, or another package manager, use the equivalent flag for your tool.
+:::
+
+The `@prisma/studio-core` provides `Studio`, a React component which renders Prisma Studio for your database. The `Studio` component accepts an _executor_ which accesses a custom endpoint in your backend. The backend uses your API key to identify the correct Prisma Postgres instance and sends the SQL query to it.
+
+### 3.2. Create a Studio wrapper component
+
+Create a `components` folder and add a new file called `StudioWrapper.tsx`. This file will wrap the Studio component and provide a consistent layout:
+
+```tsx file=components/StudioWrapper.tsx
+'use client';
+import "@prisma/studio-core/ui/index.css";
+import { ReactNode } from 'react';
+
+interface StudioWrapperProps {
+ children: ReactNode;
+}
+
+export default function StudioWrapper({ children }: StudioWrapperProps) {
+ return (
+
+
+
+
+
+ Database Studio
+
+
+ Powered by Prisma Studio
+
+
+
+
+
+
+ {children}
+
+
+
+ );
+}
+```
+
+### 3.3. Create an API endpoint to send the SQL queries to Prisma Studio
+
+Next, set up a backend endpoint that Prisma Studio can communicate with. This endpoint receives SQL queries from the embedded Studio UI, forwards them to your Prisma Postgres database, and then returns the results (or errors) back to the frontend.
+
+To do this, create a new folder called `api` inside the `app` directory. Inside it, add a `studio` folder with a `route.ts` file. This file will handle all requests sent to `/api/studio` and act as the bridge between the Studio component in your frontend and the database in your backend:
+
+```typescript file=app/api/studio/route.ts
+import { createPrismaPostgresHttpClient } from "@prisma/studio-core/data/ppg";
+import { serializeError } from "@prisma/studio-core/data/bff";
+
+const CORS_HEADERS = {
+ "Access-Control-Allow-Origin": "*", // Change to your domain in production
+ "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+ "Access-Control-Allow-Headers": "Content-Type, Authorization",
+};
+
+// Use dynamic rendering for database operations
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+ return Response.json(
+ { message: "Studio API endpoint is running" },
+ { headers: CORS_HEADERS }
+ );
+}
+
+export async function POST(request: Request) {
+ try {
+ const body = await request.json();
+ const query = body.query;
+
+ if (!query) {
+ return Response.json([serializeError(new Error("Query is required"))], {
+ status: 400,
+ headers: CORS_HEADERS,
+ });
+ }
+
+ const url = process.env.DATABASE_URL;
+ if (!url) {
+ const message = "❌ Environment variable DATABASE_URL is missing.";
+ return Response.json([serializeError(new Error(message))], {
+ status: 500,
+ headers: CORS_HEADERS,
+ });
+ }
+
+ const [error, results] = await createPrismaPostgresHttpClient({
+ url,
+ }).execute(query);
+
+ if (error) {
+ return Response.json([serializeError(error)], {
+ headers: CORS_HEADERS,
+ });
+ }
+
+ return Response.json([null, results], { headers: CORS_HEADERS });
+ } catch (err) {
+ return Response.json([serializeError(err)], {
+ status: 400,
+ headers: CORS_HEADERS,
+ });
+ }
+}
+
+// Handle preflight requests for CORS
+export async function OPTIONS() {
+ return new Response(null, { status: 204, headers: CORS_HEADERS });
+}
+```
+
+### 3.4. Create the main Studio page
+
+Open the `app/page.tsx` file and replace the existing code to render the embedded Studio with the following:
+
+```tsx file=app/page.tsx
+'use client';
+
+import dynamic from "next/dynamic";
+import { createPostgresAdapter } from "@prisma/studio-core/data/postgres-core";
+import { createStudioBFFClient } from "@prisma/studio-core/data/bff";
+import { useMemo, Suspense } from "react";
+import StudioWrapper from "@/components/StudioWrapper";
+
+// Dynamically import Studio with no SSR to avoid hydration issues
+const Studio = dynamic(
+ () => import("@prisma/studio-core/ui").then(mod => mod.Studio),
+ {
+ ssr: false
+ }
+);
+
+// Loading component
+const StudioLoading = () => (
+
+
+
+
Loading Studio...
+
+
+);
+
+// Client-only Studio component
+const ClientOnlyStudio = () => {
+ const adapter = useMemo(() => {
+ // Create the HTTP client that communicates with our API endpoint
+ const executor = createStudioBFFClient({
+ url: "/api/studio",
+ });
+
+ // Create the Postgres adapter using the executor
+ return createPostgresAdapter({ executor });
+ }, []);
+
+ return ;
+};
+
+export default function App() {
+ return (
+
+ }>
+
+
+
+ );
+}
+```
+
+### 3.5. Start your development server and test the embedded Studio
+
+Start your Next.js development server:
+
+```terminal
+npm run dev
+```
+
+Open your browser and go to `http://localhost:3000`. You should now see Prisma Studio running inside your application:
+
+
+
+Here's what to look for:
+
+1. **Prisma Studio interface**: The full Prisma Studio UI should render within your app layout.
+2. **Your data**: The `User` and `Post` tables you defined (plus any seeded data) should appear.
+3. **Interactive features**:
+ - Browse and filter records in your tables
+ - Edit values inline by double-clicking cells
+ - Add new records using the "Add record" button
+ - Delete records you no longer need
+ - Explore relationships by navigating between related tables
+
+Verify whether everything works by testing the basics:
+
+- Click on different tables to confirm your data loads.
+- Update a record to check that changes are saved.
+- Add a new record and confirm it appears instantly.
+- Try filtering data to make sure queries run correctly.
+- Navigate through relationships (for example, view a user's posts) to confirm associations work.
+
+Once these actions work as expected, your embedded Prisma Studio is set up and connected to your Prisma Postgres database.
+
+## Next steps
+
+At this point you have Prisma Studio running inside your Next.js application and connected to your Prisma Postgres database. You can browse, edit, and manage your data without leaving your app. To make this setup production-ready, consider these improvements:
+
+1. **Add authentication**: Currently, anyone who can open your app has access to Prisma Studio. [Add user authentication](/postgres/database/prisma-studio/embedding-studio#adding-user-authentication) and only allow specific roles (for example, admins) to use the embedded Studio. You can do this by checking authentication tokens in your `/api/studio` endpoint before running queries.
+
+2. **Use environment-specific configuration**: In development you may want a test database, while in production you'll need a separate live database. Update your `.env` file to use different `DATABASE_URL` values for each environment, and confirm that your `/api/studio` endpoint is reading the correct one.
+
+3. **Apply custom styling**: The Studio component ships with a default look. Pass in [your own theme](/postgres/database/prisma-studio/embedding-studio#custom-styling) and adjust colors, typography, or branding to match the rest of your application. This helps Studio feel like a native part of your app rather than a standalone tool.
+
+By adding authentication, environment-specific settings, and styling, you move from a working demo to a secure and polished production setup.
+
+For more patterns and examples, see the [Prisma Studio Core demo repository](https://github.com/prisma/studio-core-demo), which includes an alternative implementation using Hono.js and React. If you prefer a guided walkthrough, watch the YouTube video: [**Use Prisma Studio in Your Own Applications
+**](https://www.youtube.com/watch?v=Up5vG2YHPvc).
diff --git a/sidebars.ts b/sidebars.ts
index a27a7e4884..eb797e5b07 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -448,6 +448,7 @@ const sidebars: SidebarsConfig = {
"guides/betterauth-nextjs",
"guides/ai-sdk-nextjs",
"guides/authjs-nextjs",
+ "guides/embed-studio-nextjs",
].sort(),
},
{
diff --git a/static/img/guides/embedded-studio.gif b/static/img/guides/embedded-studio.gif
new file mode 100644
index 0000000000..933bf488ed
Binary files /dev/null and b/static/img/guides/embedded-studio.gif differ
diff --git a/static/img/guides/prisma-studio-embedded-in-nextjs.png b/static/img/guides/prisma-studio-embedded-in-nextjs.png
new file mode 100644
index 0000000000..3bc39035e8
Binary files /dev/null and b/static/img/guides/prisma-studio-embedded-in-nextjs.png differ