Getting Started with Builder
Getting started with Builder is simple.
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.
Landing pages quick start
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. Otherwise, send (or redirect to) your 404 page.
React
HTML API
Plain JS
Angular
import { BuilderComponent, builder } from '@builder.io/react'
builder.init('YOUR_KEY')
export default let HomePage = () => {
const [pageJson, setPage] = useState(null)
useEffect(() => {
builder.get('page', { url: '/' }).promise().then(setPage)
, [])
return <BuilderComponent model="page" content={pageJson} />
}
import { Builder } from '@builder.io/react'
// Register our heading component for use in
// the visual editor
const Heading = props => (
<h1 className={style}>{props.title}</h1>
)
Builder.registerComponent(Heading, {
name: 'Heading',
inputs: [{ name: 'title', type: 'text' }]
})
Try it in CodeSandbox
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.
Builder content types
Use pages to Build to manage whole pages, like:
- Homepage
- Content pages (about, partners, etc)
- Blog pages
- Landing pages
Use Sections to Build and parts around your site or app, like
- Announcement bars
- Product detail descriptions
- Collection heros
- Cart upsells
Use Data to control structured data like
- Navigation links
- Product info
- Blog post authors
Structuring your site
One of the easiest ways to get started is to add landing page building to your site. Once you have that, you can start adding editable sections across your site, and use targeting to choose the right content for the right users
Here are some examples we recommend for how to structure various pages on your site
Code Sandbox Examples
Server Side
React
Plain JS
Gatsby
Next.js
Angular
Up next