Made in Builder.io

Watch the biggest Figma-to-code launch of the year

Builder.io logo
Talk to Us
Platform
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

Tip: New Native Mobile SDKs are currently in beta with the most up-to-date code and instructions for integration in Integrating Pages.

Builder can be used with any platform. All data is just simple JSON. There are a few options to leverage Builder with native mobile apps.

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)

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).

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 minimal 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"]!
                )
            }
        }
    }
}
  }
})

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)
    }
}

For the SDK for React Native (beta), visit Builder's GiHub repo.


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

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy