Developer Quickstart

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.

Prerequisites

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

Tip: On Windows, be sure to use quoting when you install dependencies that use the @ operator; for example, npm install "@builder.io/react".

Step 2: Add a Builder component to your app

Step 3: 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 http://localhost:YOUR_PORT where YOUR_PORT is the port number for your app. Be sure to include the http://.
Click Save.
In the Content section of Builder, create a new blank Page and name it 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, where test-page is 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:

Framework	localhost URL
Angular	`http://localhost:4200`
Gatsby	`http://localhost:3000`
Qwik	`http://localhost:5173`
Remix	`http://localhost:3000`

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 test2 for example, Builder adds a hyphen, so that the URL segment is test-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.

What's next

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.