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