DynamicUI

Create a SwiftUI user interface through a JSON file. The JSON file will contain the structure of the user interface, and the program will create the user interface based on the JSON file.

[!WARNING]

This is a work in progress and not yet ready for production use. Please feel free to contribute, report issues, or request features.

Requirements

• Swift 5.9+ (Xcode 15+)
• iOS 15+, macOS 12+, tvOS 14+, watchOS 7+, macCatalyst 15+, visionOS 1.0+

Installation

Install using Swift Package Manager

dependencies: [
    .package(url: "https://github.com/0xWDG/DynamicUI.git", branch: "main"),
],
targets: [
    .target(name: "MyTarget", dependencies: [
        .product(name: "DynamicUI", package: "DynamicUI"),
    ]),
]

And import it:

import DynamicUI

Usage

import SwiftUI
import DynamicUI

struct ContentView: View {
    let json = """
    [
        {
            "type": "Text",
            "title": "Wait, am i generating views from JSON?",
            "modifiers": {"foregroundStyle":"red","opacity":0.6}
        },
        {
            "type": "Button",
            "title": "Click me",
            "eventHandler": "customHandler"
        },
        {
            "type": "Toggle",
            "title": "Toggle me",
            "identifier": "my.toggle.1"
        }
    ]
    """.data(using: .utf8)

    var body: some View {
        DynamicUI(
            json: json,
            callback: { component in
                // This contains everything passed as a component (type, title, identifier, ...)
                print(component)
            }
        )
    }
}

Playground Application:

In the directory Playground is a Xcode project to build the Playground Application

Supported View Types:

Please note: Items prefixed with ⚠ may ignore passed parameters. Items with a strikethrough are not yet supported.

{
    "type": "VStack",
    "children": [  ]
}

{
    "type": "HStack",
    "children": [  ]
}

{
    "type": "ZStack",
    "children": [  ]
}

{
    "type": "List",
    "children": [  ]
}

{
    "type": "ScrollView",
    "children": [  ]
}

{
    "type": "NavigationView",
    "children": [  ]
}

{
    "type": "Form",
    "children": [  ]
}

{
    "type": "Button",
    "title": "Click me!"
}

{
    "type": "Text",
    "title": "..."
}

{
    "type": "Image",
    "imageURL": "systemName"
}

{
    "type": "Divider"
}

{
    "type": "Spacer"
}

{
    "type": "Label",
    "title": "..."
}

{
    "type": "TextField",
    "title": "...",
    "defaultValue": "..."
}

{
    "type": "SecureField",
    "title": "...",
    "defaultValue": "..."
}

{
    "type": "TextEditor",
    "title": "...",
    "defaultValue": "..."
}

{
    "type": "Toggle",
    "title": "Turn me on!",
    "defaultValue": true
}

{
    "type": "Gauge",
    "title": "...",
    "defaultValue": 0.5
}

{
    "type": "ProgressView",
    "title": "...",
    "value": 50,
    "total": 100
}

{
    "type": "Slider",
    "title": "...",
    "minLabel": "min",
    "maxLabel": "max"
}

{
    "type": "GroupBox",
    "children": [ ]
}

{
    "type": "DisclosureGroup",
    "children": [ ]
}

{
    "type": "HSplitView",
    "children": [ ]
}

{
    "type": "VSplitView",
    "children": [ ]
}

{
    "type": "Picker",
    "title": "...",
    "values": ["...", "..."]
}

{
    "type": "NavigationSplitView",
    "children": [ ]
}

{
    "type": "TabView",
    "children": [ ]
}

Images

Playground

V0.0.1 in action

Used By

• Aurora Editor for custom views in extensions.

Contact

We can get in touch via Twitter/X, Discord, Mastodon, Email, Website.