BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Editing and previewing directly on your site

Integrating the editor to work on your site directly is the best way to ensure your content is 100% accurate, and allows powerful features like using your custom code components in the drag and drop editor.

Learn how with the video below!

We are going to go over how to integrate the Builder.io editor so you can edit directly on your site. This is valuable and important to ensure that your edits are 100% accurate to how they will look on your site when published, including any inherited CSS styles, as well as being able to use your own code components. We will go over:

Integration

To begin, we’re going to assume that you’ve integrated Builder correctly (seen in the getting started guide). Anytime a request comes to your site and it doesn't match to one of your URL’s, instead, it will hit Builder’s API and check if you have a Builder page that matches so your user doesn’t get a 404 error page. The Quick start documentation has quick snippet examples of how you can do this server side, with React, or vanilla JS. At the bottom of the documentation, you can see an entire working example. You can click in and see the code and see exactly what you need.

Installation

 You can choose to install this at the root of your page, so you can create Builder pages with any URL. Or, you can choose a path (e.g. anything /c/content/), then it will go to Builder. So, anything with that route, it will check for a matching Builder page. Assuming that you’ve done this, there is a cool trick you can use to test this out. Type in your browser “builder.io/m/__builder_editing__”. You should see a page render that says “Hello! If you can see me, you have integrated Builder.io correctly!”.

Editing and preview

 Now if you go back to your content and create a new page, you’ll notice that the Builder editor is now in between your header and footer. If you drag and drop text into the editor, you'll notice it isn’t the default font. It will take the styling from your page and apply it.

Static sites

If you have a static site like one made with Gatsby - it can be easiest to just hard-code a pages on your site that always renders the Builder components/content, e.g. at /__builder_editing__ and use that as your preview URL

Up next

Tracking conversions

Questions or comments?

Visit the Builder Forum

Visit our Github

Was this article helpful?