# How to connect local development environment to builder.io

**URL:** <https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683>\
**Category:** General\
**Created:** [May 25, 2024, 7:27pm UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683 "2024-05-25T19:27:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![handerson](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@handerson](https://forum.builder.io/u/handerson)\
**Post date:** [May 25, 2024, 7:27pm UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683/1 "2024-05-25T19:27:10Z")

</div>

_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._

I was able to successfully complete the [Using Builder Devtools for Automated Integration - Builder.io](https://www.builder.io/c/docs/devtools) section, and I get a shiny Next.js page. When I try to add a builder page, it takes me to a gallery of [builder.io](http://builder.io) pages on [builder.io](http://builder.io)’s public website. This brings up the question of how to connect the local environment at localhost:3000 to [builder.io](http://builder.io)?

[next.js (1).png](https://acfoco-my.sharepoint.com/:i:/g/personal/harold_acfo_co/EcWPIVBbY69CjUBXPkJJt3UBPE4Two-CBvlt5VreZ2qBeA?e=RWx02A)

Thanks in advance.

_Wondering how to connect [builder.io](http://builder.io) to localhost:3000 or what the connection is?_

**Screenshots or video link**  
[next.js (1).png](https://acfoco-my.sharepoint.com/:i:/g/personal/harold_acfo_co/EcWPIVBbY69CjUBXPkJJt3UBPE4Two-CBvlt5VreZ2qBeA?e=RWx02A)

**Code stack you are integrating Builder with**  
_Next.js_

**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:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [May 27, 2024, 12:55pm UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683/2 "2024-05-27T12:55:59Z")

</div>

Hey @handerson after running your server successfully you need to set your preview URL to the [http://localhost:3000/](http://localhost:3000/). I would recommend following our guide [here](https://www.builder.io/c/docs/dynamic-preview-urls).

---

<div class="post-metadata">

**Author:** ![handerson](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@handerson](https://forum.builder.io/u/handerson)\
**Post date:** [May 27, 2024, 1:12pm UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683/3 "2024-05-27T13:12:36Z")

</div>

Thank you for your response. @sheema . I am unable to follow those instructions.

The preview URL is set as you requested,

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

but when I surf to localhost:3000, I still just get the Next.js logo page.

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

I am able to edit the above logo page `src/pages/index.js` in VS Code.  
However, I don’t know how to get to the Visual Editor.

---

<div class="post-metadata">

**Author:** ![sheema](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@sheema](https://forum.builder.io/u/sheema)\
**Post date:** [May 28, 2024, 9:40am UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683/4 "2024-05-28T09:40:21Z")

</div>

Hey @handerson you can access your [Builder.io](http://Builder.io) content at [Builder.io: Visual Development Platform](https://builder.io/content). You can create a new page by clicking on the “New Entry” button.

 ![Screenshot 2024-05-28 at 3.08.13 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4a2b33fe92b1cea347b841fa0f2d7ecd18f3f3eb.png)  
You can also check out our guide for [setting the preview URL](https://www.builder.io/c/docs/integrating-builder-pages#setting-the-model-preview-url) for a step by step guide.

---

<div class="post-metadata">

**Author:** ![handerson](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@handerson](https://forum.builder.io/u/handerson)\
**Post date:** [May 28, 2024, 2:00pm UTC](https://forum.builder.io/t/how-to-connect-local-development-environment-to-builder-io/5683/6 "2024-05-28T14:00:27Z")

</div>

@sheema Thank you, that was helpful. When I clicked on one of the documents in that list, it complained that my server localhost:3000 wasn’t running, so I started it in VS Code, and now the Content panel in [builder.io](http://builder.io) seems to be connected to localhost:3000 and VS Code. So the next order of business is just reading the docs. Thanks.
