Getting Started with Builder
Builder.io can be customized to meet all kinds of needs, from simple headless data models to full on landing page building. You can choose to allow complete free-form control of Builder.io content or limit it to your design system components.
Try our getting started with Next.js tutorial
For the easiest getting started path, try our Next.js tutorial with step by step instructions on how to get started with Builder!
Landing pages quick start
Adding landing page building support is one of the easiest ways to unlock a ton of power out of Builder. You can allow users to create new pages with unique URLs for anything they need.
In this quick start example, we will 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 otherwise have a route for, make a request to Builder's HTML API (or use a framework-specific SDK, such as React, Next.js, Gatsby, Angular, etc) passing in the requested URL and your API key.
If Builder matches a page for this URL, return the page contents between your header and footer. Otherwise, send (or redirect to) your 404 page.
All Builder spaces have a built in "page" model that we will use in the examples below.
Next, you'll need to setup your page model's preview URL to point to your localhost (and when deployed update to your live or QA site) for on-site previewing and editing
And that's it!
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.
You can do a ton more with Builder.io than just landing pages. See our guide on creating custom 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
