Made in Builder

Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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

  1. Go to the Models section in Builder and choose your Page model.
  2. Set the Preview URL to http://localhost:3000—or 5174 for Qwik, 4200 for Angular, 8000 for Gatsby—and click Save. Be sure to include the http://.
  3. In the Content section of Builder, create a new blank Page and name it something like Test Page.
  4. Add some minimal content, such as a Text block with some copy such as "I did it!".
  5. Click the Publish button.
  6. Go to http://localhost:3000/test-page, where test-page is 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 test2 for example, Builder adds a hyphen, so that the URL segment is test-2.

Next Steps

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.


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?