Joy DOM

Swift

Native rendering for SwiftUI and UIKit via a Yoga-based flex layout engine.

JoyDOM (Swift package) parses Joy DOM JSON and renders it into native SwiftUI / UIKit views. Layout is delegated to a Yoga-based FlexLayout engine for behavior matching the web flex spec.

Status: pre-release

The package is in early development. JoyDOM currently depends on the FlexLayout SwiftPM target which still lives in the j0yhq/flexbox-swift repo. SwiftPM rejects the cross-repo dependency because both repos declare a JoyDOM target - the next step is migrating FlexLayout into this monorepo.

Concept

A SwiftUI integration takes a Spec JSON, builds a JoyDOM view tree, and embeds it like any other SwiftUI view:

import JoyDOM
import SwiftUI

struct InvoiceScreen: View {
    let spec: Spec

    var body: some View {
        JoyDOMView(spec: spec)
            .padding()
    }
}

The JoyDOMView walks the JSON tree, resolves the style cascade, and renders each node into the equivalent SwiftUI primitive (HStack/VStack for flex containers, Text for text nodes, Image for img nodes).

Custom components

The Swift renderer accepts a registry of custom node handlers keyed by the kebab-case node type. Each handler is a closure that receives the resolved props and returns a SwiftUI view:

let renderer = JoyDOMRenderer()
renderer.register("contact-button") { node, children, style in
    Button(action: {}) {
        Text(node.children.first as? String ?? "")
    }
    .joyDOMStyle(style)
}

The exact registration API will be confirmed when the package is buildable.

Loading documents

Decode JSON into the Spec model:

let url = Bundle.main.url(forResource: "card", withExtension: "json")!
let data = try Data(contentsOf: url)
let spec = try JSONDecoder().decode(Spec.self, from: data)

The Spec Codable conforms to the JSON Schema published by @joy-dom/spec, so the JSON is interchangeable with documents validated on the web.

Source layout

The Swift sources live under swift/Sources/:

  • Sources/JoyDOM - the renderer (parser, cascade, registry, views).
  • Sources/JoyDOMSampleSpecs - per-property JSON sample specs used by the demo app and tests.
  • Tests/JoyDOMTests - unit and snapshot tests with baselines under PropertyCoverage/**/__Snapshots__.

Local development

From swift/:

swift build
swift test

Snapshot baselines for the per-property coverage walk are excluded from SwiftPM's resource handling via Package.swift.

Where next

  • Specification - properties + breakpoints supported across renderers.

On this page