Loading documents

Decoding a document

Spec is Codable, so decode the JSON directly:

import JoyDOM

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 model matches the format @joy-dom/core defines, so a document validated on the web decodes unchanged here. For a document fetched at runtime, decode at the boundary and handle the throw:

func loadSpec(from url: URL) async throws -> Spec {
    let (data, _) = try await URLSession.shared.data(from: url)
    return try JSONDecoder().decode(Spec.self, from: data)
}

Images

img nodes render through SwiftUI's AsyncImage, so a src that's a normal http(s) URL loads over the network with no extra wiring. To resolve a custom scheme, register an img factory of your own.

Breakpoints

A document's breakpoints are pure data — conditions like width, orientation, and print mode. They stay inactive until you hand the renderer a Viewport to evaluate them against, so a document without @media overrides needs no viewport at all. For the Viewport fields and how to track the live layout width, see Extras → Viewport and breakpoints.

Where next

• Getting started — the end-to-end render flow.
• API reference (DocC) ↗ — Viewport and the JoyDom modifiers.
• Specification — the breakpoint and style model these documents encode.