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.
- Go to the Models section in Builder and choose your Page model.
- Set the Preview URL to
http://localhost:YOUR_PORTwhereYOUR_PORTis the port number for your app. See the table below for the framework ports. - Click Save. Be sure to include the
http://. - 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
http://localhost:3000/test-page, wheretest-pageis the name you gave your page, and check out your work. Well done!
Depending on the framework, the path and port can vary. Check your framework according to the below:
| Framework | localhost URL |
|---|---|
Angular |
|
Gatsby |
|
Qwik |
|
Remix |
|
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 istest-2.
For a community example with Builder and Next.js that includes ISR capabilities and SEO optimizations, see Kenzitron's Builder.IO & NextJs starter with ISR & SEO optimization on GitHub.
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.
Use your custom components in Builder
To use your own components in the Visual Editor, including fully customizing and controlling the blocks your team works with, start Integrating Custom Components.
For more examples of what you can do with Builder, check out the Blueprints, which cover varied use cases at a high-level with code examples.
Looking to hire a third 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.
