We just rolled out a coordinated set of upgrades across the Plasmic packages that power the shared core logic behind both hostless projects and loader/codegen codebases.
This has been a large effort that we’ve been working on for quite a while, and it represents one of the biggest architectural updates we’ve made to the package layer. Under the hood this is a foundational modernization of the core engine that Plasmic users build their codebases on.
How this impacts you
This upgrade is optional, and all of the versions that are currently out in production are not affected in any way.
But we strongly recommend moving to the newest version to receive all of the latest security updates and the benefits of React 19 and Next.js.
Hostless projects
If you don’t have a codebase deployed on a third-party server, no changes are needed!
Loader/Codegen projects
If you are using app host and have an existing codebase you can either:
- Upgrade your codebase to use app router
- Keep using pages router, and just apply a few minor fixes to the Plasmic initialization config
To see all of the instructions please visit the Migration guide in our docs.
What’s included
- Major version updates for:
@plasmicapp/loader-nextjs@plasmicapp/loader-react@plasmicapp/loader-gatsby
- Version upgrades across related codegen/runtime packages such as:
@plasmicapp/host@plasmicapp/react-web@plasmicapp/react-web-runtime@plasmicapp/data-sources
- Raised minimum runtime requirements to modern baselines, including:
- React 18+
- Next.js 14+ (for
@plasmicapp/loader-nextjs)
- Node 18.17+
What this unlocks
- Full support for React 19
- Complete support for the Next.js App Router
- Better alignment with React Server Components
- Ability to create hostless packages that rely on back-end functionality
- Pre-requisite for registering custom data queries to edit them visually in the studio
What’s next
This release is laying the groundwork for the next phase of improvements. We’re already working on a larger set of follow-on updates planned for the coming months, and this upgrade is what enables that next wave of work. Here’s a preview of what’s coming:
- Registered data queries — Define and register custom data queries so they can be edited and wired up visually inside Plasmic Studio
- Custom back-end functions via interactions — Call your own server-side functions directly from Plasmic interactions, enabling richer event-driven logic without leaving the visual editor
- Data tokens — A new token type for binding design tokens to dynamic data, keeping your UI in sync with back-end values
- Updated back-end integrations — Expanded support for connecting to additional data sources and back-end services from within Plasmic
5 Likes
Nice! Looking forward to trying it all out~
1 Like
Hi there!
Sounds good. Could you provide a Migration guide for Users of @plasmicapp/nextjs-app-router?
Is this obsolete? Is GraphQl Data Fetcher implemented in this?
I see wird Issues using @plasmicapp/nextjs-app-router
But no data in SSR from GQL Datafetcher
1 Like
@johannes_wolfl Hi!
Yeah, sure, we are about to release the docs for migrating from the experimental versions of this integration.
As soon as we post them, I will release an announcement here and on Slack.
That package is obsolete, yes, but:
- it’s fairly easy to migrate to a new version, and we’re happy to help if any question will arise
- it will continue to work even if you will not update it right now
And yes - GraphQL data fetcher is included out of the box. You won’t need a codebase for using GraphQL integration, and the data will be available during SSR.
Hi all,
I’m trying to configure a custom app host for my project but the Confirm button remains greyed out despite the URL appearing valid.
Setup:
-
Next.js 15.5.15 with App Router
-
@plasmicapp/loader-nextjs v2.0.2
-
Self-hosted VPS behind Nginx reverse proxy
-
SSL via Let’s Encrypt
What I’ve done:
-
Created the /plasmic-host page using PlasmicCanvasHost as per the docs
-
Confirmed the page is publicly accessible in the browser — it shows the “Your app is ready to host Plasmic Studio!” confirmation page correctly
-
In the Configure project dialog, selected https:// from the dropdown and typed the URL manually ending in /plasmic-host
-
Both green hint lines show as satisfied: “Please enter a valid URL” and “URL path should end with /plasmic-host”
The problem: Despite both validation hints showing green, the Confirm button remains greyed out and cannot be clicked. Pressing Enter has no effect either.
What I’ve tried:
Is this a known issue with Loader V2? Any workaround appreciated.
The fix was adding these headers to next.config.js for the /plasmic-host route:
javascript
{
source: '/plasmic-host',
headers: [
{
key: 'X-Frame-Options',
value: 'ALLOWALL',
},
{
key: 'Content-Security-Policy',
value: 'frame-ancestors *',
},
],
}
Plasmic Studio loads the app host inside an iframe, and by default Next.js (or the server) was sending headers that blocked iframe embedding. Adding X-Frame-Options: ALLOWALL and Content-Security-Policy: frame-ancestors * explicitly allows Plasmic’s domain to embed the page, which is what the canvas needs to render.
Worth mentioning in the ticket that this isn’t documented anywhere in the app hosting guide, and that the Confirm button being greyed out with no clear error message was what made it hard to diagnose — the UI gives no indication that the issue is iframe-related rather than a URL validation problem.
Sonnet 4.6
@michael_sharp I replied in Slack, but I’m copying here in case anyone has the same issue.
There may be something in your deployment/environment setting a CSP. X-Frame-Options: ALLOWALL isn’t the best solution here, it would be better to specifically allow https://studio.plasmic.app in your CSP, or disable entirely if it’s not your intent to have one.
For example you should be able to set a more specific CSP on /plasmic-host:
{
source: “/plasmic-host”,
headers: [
{
key: “Content-Security-Policy”,
value: “frame-ancestors https://studio.plasmic.app”,
},
],
}
But again, it shouldn’t be necessary with default NextJS configuration.