Getting started with Builder.io

BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Github

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.

Server Side

React

Plain JS

Angular

// Node.js example
// Run when your code doesn't match a page to check Builder for one
let page = await request(
  'https://cdn.builder.io/api/v1/html/page?url=' + encodeURIComponent(request.url) + '&apiKey=' + apiKey
)

if (page) {
  // use any template language, just put the html between your header and footer
  res.send(yourHeaderHtml + page.data.html + yourFooterHtml) 
} else {
  // Send 404 page
}

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.

See additional docs and guides for more advanced use cases in the left nav of this page and below, such as:

Additional framework support:

As well as some handy power features like

Starter Project

For an end to end example of how to set Builder up in a fresh project you can deploy yourself, see our React starter project below

Try the starter project

Code Sandbox Examples

Server Side

React

Plain JS

Gatsby

Next.js

Angular

View this code on Github