Builder with iOS and Android

Technical Questions
1

Just like with any headless CMS - Builder can be used with any platform. All data is just simple JSON.

Data models

Data models work seamlessly across all platforms. First, create your data model and structure your data with fields. Once your data model is created, editors can create content entries based on your data model, manipulating the fields using simple inputs. (see screenshots below for example).

Data model form example
Data model form example2000×1435 144 KB

All data model content can be consumed via our Content API and rendered however you choose.

Furthermore, if your data model will be rendered on a website, then you can add a preview URL to the data model. If you do this, then content editors will be able to see live visual previews of the final rendered content while they are editing their content entries. For certain field types, such as lists, they can even utilize drag-and-drop functionality for reordering (see video below).

Page and section models

For visual (drag + drop) content creation we use a simple standardized JSON format. We have SDKs for popular frontend frameworks, and you can also render Builder content yourself easily too.

To render the same content on web and native, we would recommend using components-only mode to restrict to a set of components you define.

You can preview and edit on web, and as long as you provide components with the same structure for iOS and/or Android, you can render them easily.

The data is a simple array of blocks to render


{
  "data": {
    "blocks": [
      {
        "component": {
          "name": "YourComponentName",
          "options": {
            "yourOption": "providedValue"
          }
        }
      },
      {
        "component": {
          "name": "YourOtherComponentName",
          "options": {
            "yourOtherOption": "providedOtherValue"
          }
        }
      }
    ]
  }
}

And to render them, for instance with SwiftUI:

struct BuilderContent: View {
    var body: some View {
        // Iterate over the blocks
        ForEach(content!.data.blocks) { block in
            // Render your SwiftUI components by name
            if (block.component.name == "YourComponentName") {
                YourComponentName(
                    // Passing in the relevant options
                    yourOption: block.component.options["yourOption"]!
                )
            }
            if (block.component.name == "YourOtherComponentName") {
                YourOtherComponentName(
                    yourOtherOption: block.component.options["yourOtherOption"]!
                )
            }
        }
    }
}

WebViews

As an alternative to rendering code manually for native apps, you can also pull HTML from our HTML API (or a custom server you setup to render your Builder content) and load that content into your native app as HTML in a WebView.

This offers the most ease and flexibility, and in most cases is unnoticeable to end users that this content is actually HTML and not native Views.

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {

    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"https://cdn.builder.io/api/v1/html?apiKey=YOUR_KEY&url=/some-page")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}