This Quickstart shows how to integrate page building with Builder.io in a brief format. We recommend this as the best way to get started with the Builder platform.
Tip: This Quickstart moves at a fast pace to get you up and going as quickly as possible, so it assumes development proficiency and workflow familiarity. For more detailed, step-by-step instructions, see Integrating Pages.
To get the most out of this guide, you should have:
- A working app in the framework of your choice. Create an app if you don't already have one.
- A basic understanding of development including the command line,
npm, and code for your framework.
- A Builder Space.
Step 1: Add Builder as a dependency
Step 2: Add a Builder component to your app
Using your app in Builder's Visual Editor
- Go to the Models section in Builder and choose your Page model.
- Set the Preview URL to
8000for Gatsby—and click Save. Be sure to include the
- In the Content section of Builder, create a new blank Page and name it something like Test Page.
- Add some minimal content, such as a Text block with some copy such as "I did it!".
- Click the Publish button.
- Go to
test-pageis the name you gave your page, and check out your work. Well done!
If you're getting a 404 but aren't sure why, check these things:
- Make sure you've published your page in Builder by clicking the Publish button on the upper right corner.
- Check the URL. If you name the page
test2for example, Builder adds a hyphen, so that the URL segment is
With your app and Builder working together, the next step is the fun part–add some pages in Builder and drag in some elements. Play with styles and explore the UI.
Looking to hire a 3rd party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.