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.
Tip: On Windows, be sure to use quoting when you install dependencies that use the
@ operator; for example,
npm install "@builder.io/react".
- Go to the Models section in Builder and choose your Page model.
- Set the Preview URL to
YOUR_PORTis the port number for your app. Be sure to include the
- Click Save.
- 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!
The next video shows this process, including getting your API Key as described in the last section:
Depending on the framework, the path and port can vary. Check your framework according to the below:
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
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.
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.