SwiftyHTMLBuilder

Swift DSL for HTML documents

Key Features

SwiftUI-like Layouts

Use SwiftUI-like layout components such as VStack, HStack, and ZStack for HTML structure definition.

class MyBody: HTML {
    var content: HTMLBlock {
        body {
            h1("SwiftyHTMLBuilder")
            
            hstack(spacing: "100px") {
                p("hstack1")
                p("hstack1")
                p("hstack1")
            }
            .backgroundColor(.aliceblue)
            
            hstack(equalSpacing: true) {
                p("hstack2")
                p("hstack2")
                p("hstack2")
            }
            
            vstack(spacing: "10px") {
                p("vstack1")
                p("vstack2")
                p("vstack3")
            }
            .backgroundColor(.aliceblue)
            
            zstack(vAlign: .center, hAlign: .center) {
                img(src: "image.png")
                    .width(300, unit: .px)
                vstack(spacing: "0px") {
                    h2("Swifty")
                        .margin(0)
                    h2("HTML")
                        .margin(0)
                }
                .color(.white)
            }
        }
    }
}

Easy-To-Write MediaQuery

You can easily write responsive codes with MediaQuery class.

MediaQuery(.minWidth, value: "500px") {
    nav {
        hstack(spaceBetween: true) {
            h1("SwiftyHTMLBuilder")
            hstack(hAlign: .center, spacing: "10px") {
                a(href: "https://github.com") { text("AAAAA") }
                a(href: "https://github.com") { text("BBBBB") }
                a(href: "https://github.com") { text("CCCCC") }
            }
        }
    }
    .backgroundColor(.aliceblue)
} falseContents: {
    nav {
        vstack(equalSpacing: true) {
            a(href: "https://github.com") { text("AAAAA") }
            a(href: "https://github.com") { text("BBBBB") }
            a(href: "https://github.com") { text("CCCCC") }
        }
        .width(100, unit: .vw)
        .backgroundColor(.aliceblue)
    }
    h1("SwiftyHTMLBuilder")
}

Autocomplete for Styling

Autocomplete for css, making it easier to apply CSS and other styling properties directly in your Swift code.

h2("HTML")
    .margin(0)
    .padding(0)
    .color(.red)
    .backgroundColor(r: 255, g: 0, b: 255)

Modularize views.

Organize your HTML code more effectively by dividing it into classes. This approach allows you to modularize HTML content, enabling the use of loops (for) and conditional statements (if) for HTML generation.

class MyCell: HTML {
    let count: Int
    init(count: Int) {
        self.count = count
    }
    var content: HTMLBlock {
        hstack(spaceBetween: true) {
            h3("cell")
            h3(String(count))
        }
        .width(400, unit: .px)
        .backgroundColor(.aliceblue)
    }
}

// using MyCell
vstack(spacing: "10px") {
    for i in 0..<10 {
        if i.isMultiple(of: 2) {
            MyCell(count: i).build()
        }
    }
}

Usage

HTML Document Template

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                head {
                    meta(charset: .utf8)
                    title("SwiftyHTMLBuilder Example")
                }
                body {
                    h1("SwiftyHTMLBuilder")
                }
            }
        }
    }
}

Xcode Project Setup

Create new Xcode project for Command Line Tools (macOS), nad add this package via Swift Package Manager.

For your convenience, setup your project with following steps.

Edit your Scheme and append new environment variable MY_ROOT

Create new Post-action for Run. This will make Xcode to open index.html everytime you run the project.

Organize your project directory structure

Create URL object for outputPath (to index.html)

import Foundation
import SwiftyHTMLBuilder

let projectRootPath = ProcessInfo.processInfo.environment["MY_ROOT"]!
let outputPath = URL(string: projectRootPath)!
    .appending(path: "Output")
    .appending(path: "index.html")
    .absoluteString

Write your HTML

class MyHTML: HTML {
    var content: HTMLBlock {
        ...
    }
}

Compile your swift code to HTML code.

let compiled = MyHtml().compile()

Write to index.html

try! compiled.write(toFile: outputPath, atomically: true, encoding: .utf8)

Convert HTML to HTMLBlock

Use .build() to convert.

class MyHtml: HTML {
    var content: HTMLBlock {
        document {
            doctype()
            html {
                MyHead().build()
                MyBody().build()
            }
        }
    }
}

Use Undefined css, attribute, or HTML components

Because not all components are covered in this package, you may need to manually write css, attribute, or HTML components. Contributions are welcome.

img(src: "image.png")
    .css("z-index", "1")
    .attr("width", "300px")

// use text() to write raw HTML code
text("<style> * { padding: 0; margin: 0; } </style>")

Covered Features

CSS Styles

background-color
color
width
height
padding
margin
position

yukiny0811/SwiftyHTMLBuilder