Getting Started for Developers
You can customize Builder.io to meet a variety of use cases, from minimal headless data models to building landing pages. You can allow complete free-form control of Builder.io content or limit it to your design system components.
Give your team the ability to make landing pages
Our recommended starting point with Builder is giving your team the ability to create landing pages directly on your site stack. You can give users the power to create new pages with unique URLs for anything they need.
In this quick start example, we set up freeform landing page building for any site with just a few lines of code.
When a request to your site comes to a URL you don't have a route for, you can make a request to Builder's HTML API–or use a framework-specific SDK, such as React, Next.js, Gatsby, Angular–by passing in the requested URL and your API key.
If Builder matches a page for this URL, it returns the page contents between your header and footer. Otherwise, Builder sends, or redirects, to your 404 page.
All Builder spaces have a built in Page model that we use in the examples below.
Next, set up your page model's preview URL to point to your localhost for on-site previewing and editing. When you're ready to deploy, update the preview URL to your live or QA site.
Structuring your site
You can decide which parts of your site Builder manages and which parts you want to maintain in code via models. There are three main ways you can incorporate Builder:
- Builder pages: Use the drag-and-drop UI to develop everything between your site's header and footer.
- Builder sections: Make just a part of a page visually editable in Builder and use targeting and scheduling to decide who sees what.
- Builder data: Fetch data from Builder and use it anywhere in your application, such as menu items.
Use Pages to manage entire pages, such as:
- Homepage
- Marketing and content pages
- Blog pages
- Landing pages
Use Sections to maintain parts of your site or app, such as:
- Announcement bars
- Product detail descriptions
- Collection heroes
- Cart upsells
Use Data to manage structured data, such as:
- Navigation links
- Product data
- Blog post authors
Learn more about how Builder works and various ways of structuring how you use Builder on your site or app here.
Extending for SEO
You've just added the ability to create custom landing pages to your site. See this guide to extend this example for SEO optimizing your landing pages by requiring custom titles, descriptions, and other meta info.
Landing pages are just the beginning of what you can do with Builder.io. See Getting started with models to learn how to use Builder.io on any page using component models, data models, or a number of other advanced techniques.
More resources
