• Launguage : 🇰🇷

k-sdui-ios is a library that helps you easily implement Server-Driven UI in SwiftUI. Renders SwiftUI views by decoding JSON into view components based on their types.

• CommonComponent : Defines shared SwiftUI view modifiers
• TextComponent : Renders as SwiftUI Text
• ButtonComponent : Renders as SwiftUI Button
• ImageComponent : Renders as SwiftUI Image or AsyncImage
• SpacerComponent : Renders as SwiftUI Spacer
• RectangleComponent : Renders as SwiftUI Rectangle
• RoundedRectangleComponent : Renders as SwiftUI RoundedRectangle
• ScrollComponent : Renders as SwiftUI ScrollView
• CustomComponent : Renders as SwiftUI EmptyView
• Layout : Renders as SwiftUI HStack, VStack, ZStack, LazyHStack, LazyVStack

This code demonstrates how to load and inspect the structure of each JSON file located in the Example directory.

1. Decode SDUIScene
2. Define layout using SDUIScene → SDUIContainer → SDUILayout and include an array of SDUIViews
3. Use the render function to convert into SwiftUI Views

public struct SDUIScene: Codable, Identifiable {

    public let id = UUID()
    public var hasNavigationBar: Bool
    public var container: SDUIContainer
    
    ...
    

• hasNavigationBar: Indicates whether to show a navigation bar
• container: Top-level container view

public struct SDUILayout: Codable {
    public var type: String
    public var spacing: CGFloat?
    public var alignment: String

    ...

• type: Renders HStack, VStack, or ZStack based on h, v, or z. For lh or lv, it renders LazyHStack or LazyVStack
• spacing: Spacing between views
• alignment: Alignment direction

All components conform to this protocol.

    public protocol CommonComponent: Codable {
        var componentId: String { get }
        var padding: [PaddingComponent]? { get }
        var frame: FrameComponent? { get }
        var extreamFrame: ExtreamFrameComponent? { get }
        var foregroundColor: String? { get }
        var backgroundColor: String? { get }
        var cornerRadius: CGFloat? { get }
        var overlay: SDUIView? { get }
    }

• componentId: Unique identifier for the component
• padding: Applies padding with specified edges and spacing
• frame: Applies width/height-style frame modifiers
• extreamFrame: Applies minWidth/minHeight-style frame modifiers
• foregroundColor: Applies foregroundStyle modifier
• backgroundColor: Applies background modifier
• cornerRadius: Applies corner radius
• overlay: Applies overlay modifier

public struct TextComponent: CommonComponent {

    ... CommonComponent 
    
    public let text: String
    public let font: FontComponent?
    public let lineLimit: Int?
    
    ...

• text: The string to display
• font: Applies font modifiers
• lineLimit: Maximum number of lines

public struct ButtonComponent: CommonComponent {

    ... CommonComponent

    public let text: String
    public let action: ActionComponent?
    public let customViews: SDUIView?
    
    ...

• text: Used when rendering a simple text-based button
• action: Action handler if defined
• customViews: Used for custom button content

public struct ImageComponent: CommonComponent {

    ... CommonComponent

    public let imageURL: String
    
    ...

• imageURL: If it’s a valid URL, renders with AsyncImage. Otherwise, uses asset name to render Image

public struct SpacerComponent: CommonComponent {

    ... CommonComponent
    

public struct RectangleComponent: CommonComponent {

    ... CommonComponent
    

public struct RoundedRectangleComponent: CommonComponent {

    ... CommonComponent
    
    public let strokeComponent: StrokeComponent?
    
    ...

• strokeComponent: Applies stroke color and line width

public struct ScrollComponent: CommonComponent {

    ... CommonComponent
    
    public let axis: String
    public let showIndicator: Bool
    public let containerViews: SDUIView
    
    ...

• axis: Scroll direction (horizontal or vertical)
• showIndicator: Whether to show scroll indicators
• containerViews: Views contained within the scroll view

public struct CustomComponent: CommonComponent {

    ... CommonComponent
    

public struct SDUIContainer: CommonComponent {

    ... CommonComponent
    
    public var layout: SDUILayout
    public var views: [SDUIView]
    
    ...

• layout: Defines layout structure
• views: Array of views inside the layout