Drag-and-Drop Editor Works in Local but Not in Production (Next.js 15 + ShadCN Integration)

designintavo · August 18, 2025, 2:03pm

I’m reaching out because we’ve been running into an issue where the Builder drag-and-drop editor works fine locally but does not function in our production deployment on Vercel. I’d like to provide a detailed breakdown of our setup and the troubleshooting steps we’ve already taken so you have full context.

Setup & Environment

Framework: Next.js 15.4.5 (App Router)
React: 19.1.0
Builder SDKs:
- @builder.io/react@8.2.6
- @builder.io/sdk-react for rendering content
Styling/UI: shadcn/ui components
Deployment: Vercel (production + preview)
We are embedding Builder inside an iframe using the Preview URL.

The Issue

Locally (npm run dev):
- Builder drag-and-drop editor works correctly.
- We can add new components and edit existing ones with no problems.
On Vercel (production):
- The iframe loads and content renders.
- However, the drag-and-drop editor is not functional:
  - Components display in the editor but cannot be dragged, edited, or rearranged.
- The Builder editor reports:
  - Iframe evaluation timeout – no response within 10000ms
  - Could not evaluate in iframe (MobX-related downstream error).

Debugging Already Done

Step 0: Verified environment & networking

Deployment protection and x-vercel-protection-bypass secret configured correctly.
Verified Preview URL works directly in browser.
Confirmed no ad-blockers, cookies, or proxy interference.

Code changes made for debugging:

Added a minimal playground layout (src/app/builder-playground/layout.tsx)
- Stripped out fonts, analytics, global CSS, and wrappers.
- Only renders the iframe + Builder content.
Added diagnostic logs (PlaygroundClient.tsx):
- Checked window.Builder object, builder.apiKey, environment, user agent.
- All values initialize correctly.
Refactored Builder initialization:
- Created src/lib/builder.ts to call builder.init(NEXT_PUBLIC_BUILDER_API_KEY) once.
- Imported this at the top of layout.tsx.
- Removed duplicate builder.init calls from page components.
Verified Vercel settings:
- Proxy previews toggled ON/OFF for testing.
- CSP headers checked.
- Edge runtime disabled for test builds.

Current Status

All network/security/CSP issues are now resolved.
The app iframe loads with zero network errors.
The new root problem is communication between Builder editor and the iframe:
- The parent window sends “Are you ready?” message.
- Our app never responds within the 10s timeout.
- This breaks drag-and-drop, while static rendering still works.
In short:
- Builder SDK initializes correctly.
- Content renders correctly.
- But the bridge between editor → iframe → SDK never fully handshakes in production.

Questions

Are there known issues with @builder.io/react@8.2.6 and Next.js 15 + React 19 in production builds?
Is there a required placement for builder.init() (e.g., must run outside of React lifecycle, or inside a specific client hook) to avoid timeouts?
Could production tree-shaking or React strict mode affect the iframe handshake timing?
Do you recommend additional configuration in Builder Dashboard (e.g., disabling proxy previews, adjusting iframe evaluation settings)?

Next Steps

We are very close — local works perfectly, production is just failing on the iframe handshake.
If you could guide us on best practices for Builder initialization in Next.js 15 App Router and/or any production-specific configuration, that would be extremely helpful.

Thanks in advance for your support — happy to share logs, configs, or even access to our preview deployment if needed.

Best regards,

Sunita Negi

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

What are you trying to accomplish
e.g. I want to integrate builder on a landing page

Screenshots or video link
Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing

Code stack you are integrating Builder with
e.g. NextJS, react, Shopify

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

manish-sharma · August 18, 2025, 4:36pm

Hello @designintavo,

Welcome to the Builder.io forum!

From what you’ve described, we suspect the issue may be related to your integration setup. Specifically, you should not be using both @builder.io/react@8.2.6 and @builder.io/sdk-react in the same project, as this can lead to unexpected behavior.

To help us troubleshoot further, could you please:

Share your current integration code.
Provide the Builder content link where you are experiencing the issue.

This will give us better context and allow us to provide more targeted guidance.

Thank you!

designintavo · August 18, 2025, 6:46pm

Hello Manish,

Thank you for the warm welcome and for pointing me in the right direction.

I’ve confirmed that I was previously using both @[builder.io/react@8.2.6](http://builder.io/react@8.2.6) and @[builder.io/sdk-react](http://builder.io/sdk-react), but I’ve since removed @[builder.io/sdk-react](http://builder.io/sdk-react) to avoid conflicts.

As for the integration code, could you clarify whether you’d like me to share the full project setup or just the key integration files (for example, the Builder init file, registry, and page components where BuilderComponent is rendered)? I want to make sure I provide the most relevant details without overwhelming you with the entire codebase.

Additionally, here is the Builder content link where I’m seeing the issue:

https://builder.io/content/b164126288994dd7b0502ed86177c014/edit?activeDesignerTab=0&activeLocale=Default

Thanks again for your help, and I’ll be happy to provide whichever parts of the integration code would be most useful for troubleshooting.

Best regards,
Sunita Negi

manish-sharma · August 19, 2025, 4:50am

Hello @designintavo

Thank you for sharing the content link. After reviewing it, we believe the issue may be related to the model name identifier in your Builder integration code.

The content you shared is using the model name shadcn, while in your codebase the model name appears to be set as page. This mismatch could be the cause of the issue you’re experiencing.

export default async function Page(props: PageProps) {
  const model = "page"; // this should be "shadcn"
  const content = await builder
    .get(model, {
      userAttributes: {
        
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
      prerender: false,
    })
    .toPromise();

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent content={content} model={model} />
    </>
  );
}

manish-sharma · August 19, 2025, 4:51am

If you can share your page.tsx code, I’ll be able to review it in detail and provide you with the updated code including the fix.

designintavo · August 19, 2025, 5:48am

Hi Manish,

I have changed the model name to page in builder.io, but it is still not working. As I have multiple page.tsx files, I am attaching my src folder for you to check.

Regards,
Sunita Negi

(Attachment src.zip is missing)

designintavo · August 19, 2025, 5:57am

Hi Manish,

Not able to attach the file, so sharing google drive link with you

https://drive.google.com/file/d/1ybdJrZWsA0FNIDKL_Gyqx14meyQ9uZAx/view?usp=drive_link

Regards,
Sunita Negi

manish-sharma · August 19, 2025, 6:04am

Hello @designintavo

Please accept my request to preview your google drive content.

Thanks,

designintavo · August 19, 2025, 6:15am

I have approved your request

manish-sharma · August 19, 2025, 7:24am

Hello @designintavo

Thank you for approving the request.

I’ve recorded a Loom video demonstrating the issue along with a possible solution:

Hope this helps! Let us know if you have any further questions.

Thanks,

designintavo · August 19, 2025, 8:18am

Thanks Manish, I will check it out

designintavo · August 20, 2025, 6:50am

Hi Manish,

Thanks for providing the demo. After reviewing it, I’ve noted that the video shows the application running on a local setup.

The issue I initially reported, however, appears to be exclusive to our production environment. My local version works fine, so I suspect the problem is tied to the production URL, which is: https://shadcn-builder-snowy.vercel.app/.

I’m available to collaborate on a joint debugging session if that’s a viable option for you.

Regards,
Sunita Negi

manish-sharma · August 20, 2025, 6:57am

Hello @designintavo,

Can you share screen recording of the issue you are seeing production?

designintavo · August 20, 2025, 7:12am

Hi Manish

I have attached the video recording, please check.

Regards,
Sunita Negi
Screen Recording 2025-08-20 at 12.39.57 PM.mov

manish-sharma · August 20, 2025, 7:13am

Thank you! Please approve my request to preview it.

designintavo · August 20, 2025, 7:28am

Approved, please check again.

manish-sharma · August 20, 2025, 7:33am

Hello @designintavo

Thank you for sharing the screen recording. After reviewing it, I can confirm that the issue is related to the integration.

Please watch my Loom video again and carefully implement the solutions outlined there to ensure it works in production. Locally, Builder allows the editor to load content and edit even if there’s a model name mismatch in the integration. However, when you draft preview the page, you may not see any content as a result of this mismatch.

To resolve the issue, kindly follow the instructions from my video.

Best regards,

designintavo · August 20, 2025, 7:49am

Thanks Manish, will check it out

Topic		Replies	Views
With Uncaught (in promise) Could not evaluate in iframe, doesnt exist! Visual Editor Help visual-editor , react , nextjs	2	403	February 5, 2024
Preview on builder.io isn't updating immediately Technical Questions nextjs	6	560	October 13, 2023
Builder.io Editor lag Visual Editor Help visual-editor , react , nextjs	10	479	January 9, 2024
Visual Editor Not Loading Properly Visual Editor Help visual-editor , nextjs	0	39	December 9, 2024
We are having trouble connecting to your site - I see my website in the builder Visual Editor Help visual-editor , react , nextjs	9	436	June 4, 2024

Drag-and-Drop Editor Works in Local but Not in Production (Next.js 15 + ShadCN Integration)

Setup & Environment

The Issue

Debugging Already Done

Current Status

Questions

Next Steps

Related topics