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

**URL:** <https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react, custom-components, nextjs\
**Created:** [August 18, 2025, 2:03pm UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669 "2025-08-18T14:03:18Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 18, 2025, 2:03pm UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/1 "2025-08-18T14:03:18Z")

</div>

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:

- 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):**

- **On Vercel (production):**

* * *

### 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:**

1. Added a **minimal playground layout** (`src/app/builder-playground/layout.tsx`)

2. Added **diagnostic logs** (`PlaygroundClient.tsx`):

3. Refactored Builder initialization:

4. Verified Vercel settings:

* * *

### 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** :

- In short:

* * *

### Questions

1. Are there known issues with `@builder.io/react@8.2.6` and **Next.js 15 + React 19** in production builds?

2. 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?

3. Could production tree-shaking or React strict mode affect the iframe handshake timing?

4. 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](http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51)_

**Builder public api key**  
_go to [Builder.io: Visual Development Platform](https://builder.io/account/organization) 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!_

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 18, 2025, 4:36pm UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/2 "2025-08-18T16:36:30Z")

</div>

> [@designintavo](#):
>
> - `@builder.io/react@8.2.6`
> - `@builder.io/sdk-react`

Hello @designintavo,

Welcome to the [Builder.io](http://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:

1. Share your current integration code.

2. Provide the Builder content link where you are experiencing the issue.

 ![Screenshot 2025-08-18 at 10.05.57 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/071d7f3c14c7593207e41c2c41a7b8131df7be6b.png)

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

Thank you!

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 18, 2025, 6:46pm UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/3 "2025-08-18T18:46:04Z")

</div>

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](https://builder.io/content/b164126288994dd7b0502ed86177c014/edit?activeDesignerTab=0&activeLocale=Default)

 ![image.png](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/0366d47675472d7791103e5ec72f1d967cfbd69e.png)

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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 19, 2025, 4:50am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/4 "2025-08-19T04:50:42Z")

</div>

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.

```typescript
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} />
    </>
  );
}

```

 ![Screenshot 2025-08-19 at 10.12.24 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/f1fae7c0309323b02efd97e8ef46cbb5b3d3f00f.jpeg)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 19, 2025, 4:51am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/5 "2025-08-19T04:51:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 19, 2025, 5:48am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/6 "2025-08-19T05:48:57Z")

</div>

Hi Manish,

I have changed the model name to `page` in [builder.io](http://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)

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 19, 2025, 5:57am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/7 "2025-08-19T05:57:52Z")

</div>

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](https://drive.google.com/file/d/1ybdJrZWsA0FNIDKL_Gyqx14meyQ9uZAx/view?usp=drive_link)

Regards,  
Sunita Negi

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 19, 2025, 6:04am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/8 "2025-08-19T06:04:39Z")

</div>

Hello @designintavo

Please accept my request to preview your google drive content.

Thanks,

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 19, 2025, 6:15am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/9 "2025-08-19T06:15:47Z")

</div>

I have approved your request

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 19, 2025, 7:24am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/10 "2025-08-19T07:24:30Z")

</div>

Hello @designintavo

Thank you for approving the request.

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

https://www.loom.com/embed/9b22e99092dd446f922199ef219c17cc?sid=68c8e32c-330c-4f7e-beb4-b5d9a46e0ed9

> **[Integrate Pages](https://www.builder.io/c/docs/integrating-builder-pages)**
>
> Builder is an AI-Powered Visual Development Platform that helps teams generate, iterate, and optimize web and mobile experiences in seconds instead of sprints.

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

Thanks,

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 19, 2025, 8:18am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/11 "2025-08-19T08:18:00Z")

</div>

Thanks Manish, I will check it out

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 20, 2025, 6:50am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/12 "2025-08-20T06:50:47Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 20, 2025, 6:57am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/13 "2025-08-20T06:57:02Z")

</div>

Hello @designintavo,

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

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 20, 2025, 7:12am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/14 "2025-08-20T07:12:22Z")

</div>

Hi Manish

I have attached the video recording, please check.

Regards,  
Sunita Negi  
[![](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bcec071d2daf94f074e0d45f573498975b42d6b0.png)Screen Recording 2025-08-20 at 12.39.57 PM.mov](https://drive.google.com/file/d/1wUl4WUQFuDO8jxDM5638XX5_oH3bQkdT/view?usp=drive_web)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 20, 2025, 7:13am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/15 "2025-08-20T07:13:46Z")

</div>

Thank you! Please approve my request to preview it.

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 20, 2025, 7:28am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/16 "2025-08-20T07:28:23Z")

</div>

Approved, please check again.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [August 20, 2025, 7:33am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/17 "2025-08-20T07:33:53Z")

</div>

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.

https://www.loom.com/embed/9b22e99092dd446f922199ef219c17cc

Best regards,

---

<div class="post-metadata">

**Author:** ![designintavo](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@designintavo](https://forum.builder.io/u/designintavo)\
**Post date:** [August 20, 2025, 7:49am UTC](https://forum.builder.io/t/drag-and-drop-editor-works-in-local-but-not-in-production-next-js-15-shadcn-integration/15669/18 "2025-08-20T07:49:47Z")

</div>

Thanks Manish, will check it out