Introduction

What is Builder.io

Builder serves as a Visual Headless CMS, seamlessly integrating with our current website or application. This empowers every team member to effortlessly design, oversee, and release robust digital experiences at an enterprise level, reducing the need for continuous dependence on developers.

Let Builder manage the part we specify. Three main ways to integrate Builder :

• Pages : Drag-and-drop UI to develop everything from our site's Header to Footer.
• Sections : Target part of a page and visually edit it using Builder's visual IDE.
• CMS data : Retrieve information from Builder and utilize it in any part of our application, such as product list.

We also have the control to specify which sections of our application non-developers can generate and oversee. Builder transmits data to our website or application through a range of SDKs and APIs.

Why Builder.io

• Seamless integration with existing sites & apps

  1. API based infrastructure natively plugged into applications.
  2. Works with any framework or tech stack.
  3. Asynchronous content loading that doesn't affect performance.

• No code visual IDE

  1. Visual crafting using current design system and code components.
  2. Utilize Builder's foundational blocks to drag and drop basic elements.
  3. Generate, manage and use structured data such as, JSON without touching code base.

• Single Click action to publish tests, experiences and more

  1. Personalized content and A/B version testing to compare & analyze.
  2. Provide metadata and get started with SEO in Builder's graphical UI.
  3. Visualise previous versions and travel through history of content development.
  4. View page analytics and engagement metrics using the Insights tab.

Builder.io Dashboard Overview

Left Sidebar

The left sidebar is used to manage organizations and spaces. Here are the following main options:

• Content: Navigate to all of our content.
• Models: Define types of content and data, such as product pages, blog posts, and marketing pages.
• Asset Library: Manage logos / images / videos / gifs.
• Scheduler: Arrange a schedule when to see the changes reflect in live page.
• Insights: Find metrics, such as heatmaps and stats for our content.
• Plugins: Connect our Builder Space with many other services such as Shopify, Contentful, and Swell.
• Help: Join the Builder community or get help.
• Latest Updates: find out about the latest in Builder and get workflow tips.
• Settings: Manage our account and find dedicated Public or Private API keys here.

Creating new organization and space

Click on the left topmost part of the Builder UI, down arrow to select and create Organizations and Spaces. Each project correspond to a single space.

Content tab

Generate and Manage elements such as pages, headers, sections and banners. Also manage content types and assigned entry.

Model tab

Go to Models to define and visualise elements such as a page types, sections, or data models

Assets tab

Upload from local or import stock and manage assets of our space here.

Plugins tab

Plugins connect our Builder Space to other services, such as Shopify, Contentstack, Figma, and many others. This is where we can also grab the code specific to our framework to integrate with our Space.

Visual Editor

Creating a new page with the selected model or opening an existing one from the Content tab launches the Visual Editor, a graphical interface to build and configure our page/section.

The main area is where we drag and drop the building blocks of our page.

If the page is empty, click on the + Add Block option to drop components from the Insert tab. Then we can select an element in the main area to configure its layers, options, styles, animations, and data.

Insert tab

Contains all the elements that you can drag and drop onto the page, including: Basic blocks(text, image, button), ** Custom Components**, Templates etc.

Layers tab

The Layers tab presents a thorough inventory of every item on the page, providing features such as displaying nested blocks, rearranging blocks through drag-and-drop, and renaming blocks.

Options tab

The Options tab displays content and metadata about the selected element. If no element is selected, it shows fields for configuring the page URL, title, and description.

Styles tab

Edit existing styles or add manual styles to elements. We can add basic styles such as:

• Adjust size, alignment and spacings.
• Set the display property for responsive designs.
• Set a background color or image and borders, shadows,
• Create anchor links, set autofocus and more by targeting HTML attributes.

Animate tab

Add motion and transitions to any block. CSS animations on basic events such as hover, scroll into view, and page load can be added and modified as needed.

Data tab

Integrate with data no matter where it lives and manipulate state. Services :

• Other platforms such as Shopify, Contentstack, Contentful can be incorporated as source.
• Event binding
• Dynamic data binding
• API data integration.

All tabs and options are highlighted below :

Mobile View

Helps to preview the main area across screen dimensions including Desktop, Tablet and Mobile. It's also possible to define our breakpoints through customisation.

Preview Icon

We can preview our page anytime by clicking on the 'eye' icon in the top right corner. We can view a live demo of our page by choosing the second option.