Visual Builder Doesn't Show Basic Changes

Technical Questions
1

I am evaluating Builder.io for my company’s website rebuild. However, the Visual Builder (one of the service’s main selling points for us) is giving us some unexpected behavior when trying to perform basic tasks.

As you can see in the video below, simply trying to add a block of text appears to fail at first. But if I refresh my local site several times (to defeat Next.js caching), the new text block shows up locally. Then, when I refresh the builder, the text block shows up correctly there, too.

Is there something I’m not understanding about the way the Visual Builder works? It will be impossible for us to use this service if it doesn’t show changes in real-time while editing.

https://www.imagepointe.com/wp-content/uploads/2024/06/Screen-Recording-2024-06-24-173251.mp4

2

Hi @joshk Welcome to Builder.io Forum!

I understand your concern, Would you mind sharing Builder-integrated SDK version details from the package.json file so I can investigate this further?

Also, To get started, please provide your Public API Key. You can find instructions for finding it at this link.

Let me know if you need any assistance.

3

Hi @garima ,

Here’s my public API key: 2d4fc9a48235497ba1de47b06ee7c473

And here’s my package.json:

{
  "name": "test-builder-io",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@builder.io/dev-tools": "^1.0.17",
    "@builder.io/react": "^3.2.8",
    "@builder.io/sdk": "^2.2.4",
    "next": "14.2.4",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "typescript": "^5"
  }
}
4

Thanks @joshk for sharing details. Looking into this and get back to you ASAP!

5

Hi @joshk it seems to be working now. Please check and let me know if issue persists!

6

@garima Thanks for the update. The issue did persist while I was running the Next.js app locally and pointing the Builder editor at the localhost URL. But then I tried hosting the app on Railway and pointing Builder at that URL instead, and the problem was gone, and editing in Builder started to behave exactly as expected.

Is the Visual Builder not intended to be used with locally running apps? If so, it seems like there might be some bugs to work out in this area. If not, it probably won’t be an issue for my team, but that definitely didn’t seem self-explanatory to me. Maybe the builder should warn the user that editing this way might not work as expected.

7

Thanks @joshk for checking it out and no this is not expected behavior. It should work locally as well. We will investigate this further and will keep you posted!

8

hey @joshk hope you’re doing well!

We have fixed the issues and added enhancements to our updated versions of SDK. Could you please upgrade the dependencies and let me know if the issue persists at your end?