Server Driven UI with SwiftUI

Server-Driven UI is a way of developing (I would say ‘managing content’) applications, including mobile and web, where the UI is provided by the server. There are different pros and cons that you can find in various articles, along with numerous implementations.

Let’s begin and see how it can look with SwiftUI.

Design System & Components

In Figma, components are defined and can be easily fetched with Figma API.

Template

A JSON template contains essential information about the UI, which can include component names, layouts, padding, margins, and/or data.

Below is a simple JSON example in response to a UI request from the server for a specific page.

{
    "type": "home",
    "page": {
        "type": "layout",
        "children": [
            {
                "type": "image-box",
                "image": "https://wallpapers.com/images/featured-full/interesting-pictures-0phka103hul2wp72.jpg"
                "title": "Amazing nature"
                "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras posuere fermentum enim in malesuada. Nullam in quam ultrices, mattis velit nec, condimentum lectus."
            },
            {
                "type": "primary-button",
                "text": "Read…