Made in Builder.io

Visual Copilot Livestream | Dec 6 @10am PST

Introducing Visual Copilot: Figma to code with AI

Builder.io and Figma
Talk to Us
Product
Developers
Talk to Us

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

Builder is a Visual Headless CMS. You determine which parts of your app that non-developers can create and manage. Builder passes data to your site or app using various SDKs and APIs.

The images below show how you:

  1. Add a little code to your app
  2. Use Builder to add drag-and-drop
  3. Click the Publish button to make your content live

Builder doesn't host your site for you, but gives you the tools to dynamically load content created in Builder into your code. You have complete control as to what you want to be Builder-editable and where.

You control the structure of your site with models. You can customize where content of each model loads, how it is targeted and filtered, and where and how it is rendered.

To get up and running with an integrated app, see the Developer Quickstart.

In many ways, Builder works the same as any headless CMS, and Builder's CMS data models work identically.

Like a typical headless CMS, you create entries with structured custom fields or targeting. You can then query these fields with our content API and display the content you want, where you want.

In many cases with Builder, the main difference is instead of hard coding a page layout, you have a Builder renderer component render the content dynamically, optionally using components from your codebase.

Optionally, you can also restrict Builder editing to only these components—with or without allowing custom styling—using components-only mode and/or roles and permissions.

The next image shows how integrating your app can remove hard-coded content best maintained by other roles on your team, such as marketers, and copywriters.

In addition to visual editing, Builder also adds additional features that are less common in traditional headless CMSes, such as content targeting and analytics.

Structured CMS data has its purposes, and while it often isn't the best for things like pages and layouts, it can be great for a number of other use cases that structured data can be more ideal than pure visual editing.

Under the hood, Builder is a headless CMS like any other. You can create documents with structured data fields and consume these via our SDKs and APIs and render the data as you choose.

On top of this, Builder adds even more power by letting you register components that can render dynamically, saving you from having to write all of this logic manually. Instead, you can pass the data to a render Builder provides, such as in the following snippet:

<BuilderComponent model="page" content={json} />

For pages and sections, Builder automatically populates a field called blocks that is a list of components to render and their options, as in the following snippet:

{ 
  "data": {
    "yourCustomFieldName": "yourCustomFieldValue",
    "blocks":  [
      {
        "component": {
          "name": "Text",
          "options": {
             "text": "Hello world!"
          }
        }
      }
    ]
  }
}

Builder passes this data to your site or app via various APIs, and you can load it into your site as HTML or rendered dynamically via this JSON with frameworks such as React.

All content is delivered from the edge, renderable server-side or statically, and we optimize the heck out of it. And our SDKs are small and mighty.

Importantly, there are no hacks here—no iframes, no unneeded client-side code or rendering. Builder's guiding principle is that we produce content just as if you'd written it by hand. Assets are optimized, DOM is minimized, and it's all native to your framework. That is, if you use React, all components are React, and so on, for each framework.

Or for instance, take a look at the perf of the Builder.io site, which is built completely in Builder:

Screenshot of PageSpeed Insights at 96 for Builder.io.

The Visual Editor loads your site in an iframe. You provide the URL for the editor to open. This page needs to have a Builder SDK integrated so Builder can discover where it is, any settings provided, and pass messages to it.

When a Builder SDK is loaded in the editor, instead of showing the default content, the SDK waits on a message from the Builder web app of what content to display. Builder messages down the JSON and send patches as edits are made of what to render differently—such as added components or changed inputs—and the SDK renders the updates accordingly.

You can also register your own components to use in the editor. When you register your own components, Builder keeps a map of component names to references, and messages the web app what components exist and what inputs they take. Within Builder, the built-in components—such as Image, Text, and Columns—work the same way and are open source.

// This code is in your app. Can be the same components you already use
import { Builder } from '@builder.io/react';

const Heading = (props) => <h1>{props.text}</h1>

Builder.registerComponent(Heading, {
  name: 'heading',
  inputs: [{ type: 'string', name: 'text' }]
})

Internally, Builder keeps a map such as this one:

const componentMap = {}
componentMap['heading'] = Heading

And then when Builder renders the content, Builder iterates over the blocks and render the components and inputs in your framework/SDK of choice, as in the example below:

// Simplified example

export const BuilderComponent = (props) => (
  props.blocks.map(component => {
    let Component = componentMap[component.name]; 
    return <Component {...component.options } />
  })
)

You can see examples on how to implement your own rendering for any language or framework in this forum post.

Builder.io loads your website in an iframe in Builder's web application.

When your page loads in Builder's web app, any Builder component on your page sends a message to Builder notifying that it has been found. This only occurs for a matching component; for instance, if you are opening a page to edit your Page model, Builder waits for a message from a component whose model is Page. Once received, Builder sends a message for what content should be rendered for the preview.

As you click around and make edits, Builder continuously passes messages to this component telling it what new changes to reflect.

If Builder never receives a message from a component of the model type you are trying to edit, Builder doesn't know where or how to preview your content, so you need to ensure the right component loads on the right page. See our troubleshooting section for more info.

Builder integrates with your front-end code, not with your hosting platform, and pushes content to your site or app using APIs. You control your site, code, and hosting—Builder only passes content within your own setup.

The following diagram shows that Builder is a visual layer integrated with your front-end code, and isn't involved in hosting:

If your app is currently deployed, works on your host server, and you integrate Builder into your app, Builder works seamlessly with your code, and you are still free to use your choice of hosting provider.

Examples of hosting providers that Builder customers use include Netlify, Vercel, Amazon AWS, and Google Cloud.

In addition to being able to register your own components in the editor and using Components-only mode, you can also Extend the Builder UI with plugins for deep customization.

Builder gets its structure from models. You can make additional models for Pages, Sections, and Data, and customize them with custom field types as well as plugins.

Visual Pages

Try out Pages

Use Pages to manage entire pages, such as:

Visual Sections

Try out Sections

Use Sections to maintain parts of your site or app, such as:

Structured Data

Try out Data

Use Structured Data to manage structured data, such as:

By adding landing page building to your site, you can create editable sections across your app and use targeting to choose the right content for the right users.

The following image illustrates some examples we recommend for structuring various pages on an e-commerce site:

Home Page

  • Builder manages full homepage
  • Optionally target features such as purchase history.

Collection Page

  • Builder hero section targeted by collection
  • Your code manages the products

Product Page

  • Your code manages image gallery and product options
  • Builder section for product info, targeted by product (optional)
  • Builder section for product editorial, targeted by product type

Cart Promotion

Promotion and cross-sells targeted by cart contents

Announcement Bar

Target content by URL and audience

Navigation Links

Use a data model to define the links and text

Builder uses Google Cloud Platform and Amazon Web Services, which are trusted by thousands of businesses to store and serve their data and services.

Builder content is served from multiple countries to ensure that the loss of a major network zone, such as a countr, does not adversely impact the availability of the pages. All network communication automatically routes to the nearest usable server.

Our servers are expected to be short-lived and fail at any time, allowing us to create measures to restore the entire system based on the last known good configuration used. The software installed on Builder's systems can be deployed or rolled back quickly without noticeable downtime. Software artifacts are versioned and resist accidental or malicious tampering or deletion.

To learn more about our security measures, refer to Security.

In addition to taking a look at our docs and SDKs, you can always post questions on the Builder forum where Builder's technical team is available to help you out.

For more information on structuring your app, see:


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Solutions

Ecommerce

Marketing Sites

Landing Pages

Mobile Apps

Multi-brand

Headless CMS

Product

Visual Copilot

Visual Copilot Beta

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Documentation

Devtools

Try Builder Playground

OPEN SOURCE

Builder

Mitosis

Qwik

Partytown

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

Product

Features

Pricing

Product

Visual Headless CMS

Integrations

What's New

Company

About

Careers

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Developers

Builder for Developers

Documentation

Dev Tools

Try Builder Playground

Open Source

Builder

Mitosis

Qwik

Partytown

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Solutions

Ecommerce

Landing Pages

Multi-brand

Headless CMS

Popular Guides

SaaS Marketing Site Ebook

Composable Commerce Ebook

Headless CMS Guide

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Frameworks

React

Next.js

Qwik

Gatsby

Angular

Vue

Nuxt

Hydrogen

All Integrations

CMS

React

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Resources

Blog

Knowledge Base

Community Forum

Partners


Templates

Success Stories

Showcase

Use Cases

Company

About

Careers

Resources

Blog

Knowledge Base

Community Forum

Partners

Performance Insights

Templates

Success Stories

Showcase

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms