# Steps to integrate my existing inertia and vue site with builder

**URL:** <https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746>\
**Category:** General\
**Tags:** visual-editor\
**Created:** [January 5, 2024, 5:02pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746 "2024-01-05T17:02:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sinan](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sinan](https://forum.builder.io/u/sinan)\
**Post date:** [January 5, 2024, 5:02pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/1 "2024-01-05T17:02:11Z")

</div>

hi,  
we have a site with inertia and vue js  
now we want to integrate [builder.io](http://builder.io) to build pages easily with our own components  
what is exact steps to do

---

<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:** [January 5, 2024, 5:07pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/2 "2024-01-05T17:07:59Z")

</div>

Hello @sinan,

Greetings and welcome to the [Builder.io](http://Builder.io) forum!

As you embark on your journey, we suggest diving into our Quickstart guide, which will guide you through seamlessly integrating Builder with your Vue.js app. You can find the guide here:

> **[Developer Quickstart - Builder.io](https://www.builder.io/c/docs/quickstart)**
>
> Quickly integrate Builder.io with your application for streamlined Page building with this developer Quickstart.

---

<div class="post-metadata">

**Author:** ![sinan](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sinan](https://forum.builder.io/u/sinan)\
**Post date:** [January 5, 2024, 6:20pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/3 "2024-01-05T18:20:35Z")

</div>

thanks  
my second question is how can i edit an existing simple html file with builder?

---

<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:** [January 5, 2024, 6:33pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/4 "2024-01-05T18:33:47Z")

</div>

Hello @sinan!

Editing an existing HTML file directly isn’t supported, but you can leverage the Builder web components API for dynamic content updates. Utilize the `<script>` tag and the `<builder-component>` custom element, allowing you to set targeting attributes for Builder to load HTML content dynamically. Here’s a simple example:

```auto
<builder-component model="page" api-key="YOUR_API_KEY">
  <!-- HTML here displays while your content is loading, 
  for example, put a gif here, or leave empty -->
</builder-component>
<script async src="https://cdn.builder.io/js/webcomponents"></script>

```

> **[Web Components API - Builder.io](https://www.builder.io/c/docs/webcomponents-api)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

---

<div class="post-metadata">

**Author:** ![sinan](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sinan](https://forum.builder.io/u/sinan)\
**Post date:** [January 5, 2024, 7:08pm UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/5 "2024-01-05T19:08:51Z")

</div>

so i have added this code for this sample  
[https://dnslookup.pro/tt.html](https://dnslookup.pro/tt.html)  
what is next step ?

---

<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:** [January 6, 2024, 4:15am UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/6 "2024-01-06T04:15:21Z")

</div>

Hello @sinan,

You can now set up a preview URL in Builder, enabling convenient drag-and-drop functionality. For detailed instructions, please refer to the guide available at:

> **[Editing an Previewing Your Site - Builder.io](https://www.builder.io/c/docs/guides/preview-url)**
>
> Setting a preview URL gives you a way to develop and preview your site in the browser, just as you would any other site.

---

<div class="post-metadata">

**Author:** ![sinan](https://avatars.discourse-cdn.com/v4/letter/s/f4b2a3/32.png) [@sinan](https://forum.builder.io/u/sinan)\
**Post date:** [January 6, 2024, 8:01am UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/7 "2024-01-06T08:01:43Z")

</div>

i have intresting issue  
in list, preview of html is shown

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bb2f244f53ad0555d346d3fd8dd2f9507b408c11.jpeg)  
but in edit page its not loading the contetn  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4830b892d60be0b2315b225c27b8f6b62aeb03bf.png)

---

<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:** [January 8, 2024, 11:21am UTC](https://forum.builder.io/t/steps-to-integrate-my-existing-inertia-and-vue-site-with-builder/4746/8 "2024-01-08T11:21:06Z")

</div>

Hello @sinan,

To ensure visibility within the editor, make sure your entire HTML body content, including the header and footer, is encapsulated inside the `<builder-component>`.

```auto
<builder-component model="page" api-key="YOUR_API_KEY">
  <!-- HTML here displays while your content is loading, 
  for example, put a gif here, or leave empty -->
</builder-component>

```