Plasmic (/docs/guides/integrations/plasmic)

For the complete Prisma documentation index, see llms.txt. A markdown version of any docs page is available by appending .md to its URL.

Create websites and apps visually with Prisma and Plasmic

Location: Guides > Integrations > Plasmic

[!NOTE] This guide uses Prisma ORM 7

The commands and code on this page target Prisma ORM 7, which remains fully supported. To start a new Prisma ORM 8 project, see the Prisma ORM 8 quickstart; to add Prisma ORM 8 to an existing app, see Add to an existing project. A Prisma ORM 8 version is not available yet: the Plasmic starter project is built on Prisma Client 7.

Plasmic is a visual builder for React websites and applications. In this guide, you will connect Plasmic to Prisma using the starter blog application and display query results in a UI created in Plasmic Studio.

Your Prisma connection credentials remain in the application environment and are not sent to Plasmic. Queries run through server functions hosted by your Next.js application. In Plasmic Studio, you configure each query by selecting the Prisma model, operation, filters, and related options.

• Node.js 20 or later
• pnpm
• A Prisma account
• A Plasmic account
• Git

Clone the starter so you have the registered Plasmic data query, Prisma schema, seed data, and example Next.js routes used in this guide.

git clone https://github.com/plasmicapp/plasmic-prisma-starter.git
cd plasmic-prisma-starter
pnpm install

The project includes prisma/schema.prisma, functions/prismaQuery.tsx, and the Plasmic registration in plasmic-init.ts.

Provision a Prisma Postgres database for the starter. The command signs you in to the Prisma Console, asks for a region and project name, and prints a connection string.

pnpm exec prisma init --db

Copy the postgres://... connection string from the command output. You will add it to the starter in the next step.

Create the local environment file from the example so the application can connect to Prisma Postgres and initialize Auth.js.

cp .env.example .env
pnpm dlx auth secret

Open .env, replace the placeholder DATABASE_URL with the connection string from the previous step, and confirm that AUTH_SECRET contains the generated value:

DATABASE_URL="postgres://USER:PASSWORD@HOST:5432/postgres?sslmode=require"
AUTH_SECRET="YOUR_GENERATED_SECRET"

Apply the included schema, generate Prisma Client, and load the sample roles, users, and posts:

pnpm exec prisma migrate dev --name init
pnpm exec prisma generate
pnpm exec prisma db seed

The final command should print:

Seeding completed.

If prisma migrate dev reports error P3005 because the database schema is not empty, follow the baselining workflow before applying migrations.

Create an empty project in Plasmic Studio. Copy the project ID from the Studio URL and the public project token from the Code panel, then add both values to .env:

DATABASE_URL="postgres://USER:PASSWORD@HOST:5432/postgres?sslmode=require"
AUTH_SECRET="YOUR_GENERATED_SECRET"
NEXT_PUBLIC_PLASMIC_PROJECT_ID="YOUR_PROJECT_ID"
NEXT_PUBLIC_PLASMIC_PROJECT_TOKEN="YOUR_PUBLIC_PROJECT_TOKEN"

The starter reads these variables in plasmic-init.ts. Its loader has preview: true so Studio can render unpublished changes during development. Set preview to false before using the application in production.

Start the Next.js development server so Plasmic Studio can load the registered data query from your application.

pnpm dev

In your browser, verify that the Plasmic host page is available by visiting this URL:

http://localhost:3000/plasmic-host

Follow Plasmic's app host setup guide and set your project's app host to:

http://localhost:3000/plasmic-host

Studio reloads after you save the host. The Prisma Query function is now available under Data Queries in the page data panel.

Create or open a page that will display the seeded posts. Add a page data query named Get Recent Posts with these settings:

• Function: Prisma Query (prismaQuery)
• Table: Post
• Operation: findMany
• Where: published equals true
• Include Relations: author
• Order By Field: createdAt
• Order Direction: desc

Select Execute to preview the query in Studio. The result under $q.getRecentPosts?.data should be an array of published posts with their authors.

Add a container to the page and repeat it over $q.getRecentPosts?.data. Inside the repeated item, bind text elements to the current post's title, content, and author.name fields.

[!NOTE] The starter checks every operation in functions/prismaQuery.tsx against the current user's role before it reaches Prisma Client. The seeded guest role can read data, so this findMany query works without signing in. Keep authorization checks in application code when you adapt the starter.

Preview the page in Plasmic Studio. You should see the published sample posts created by prisma db seed, ordered with the newest post first. Change a post in Prisma Studio and execute Get Recent Posts again to confirm that the page reads from your Prisma Postgres database.

• Read the detailed Using Prisma with Plasmic article for dynamic routes, write operations, authentication, and permissions.
• Review the complete Plasmic Prisma starter implementation.
• Learn how to filter and sort with Prisma Client.

• AI SDK (with Next.js): Build a chat application with AI SDK, Prisma ORM, and Next.js that stores chat sessions and messages in Prisma Postgres.
• Datadog: Learn how to configure Datadog tracing for a Prisma ORM project. Capture spans for every query using the @prisma/instrumentation package, dd-trace, and view them in Datadog
• Embedded Prisma Studio (with Next.js): Learn how to embed Prisma Studio directly in your Next.js application for database management
• GitHub Actions: Provision a Prisma Postgres database for every pull request with GitHub Actions and the Prisma CLI, apply your migrations and seed data to it, and delete it when the pull request closes.
• Permit.io: Learn how to implement access control with Prisma ORM with Permit.io