Swift library for generating HTML using Result Builder
- Clean & clear syntax
- Composable & extensible
- Conditional and iteration support
- Underlying generation with libxml2 for always valid results
- Built-in convenient builders and modifiers for common cases
- Raw HTML integration
An HTML tree is built by combining Node which is a protocol implemented on Element and String
let tree = Element.html(head: {
Element.metadata(charset: "UTF-8")
Element(name: "title") { "Hello world" }
}, body: {
Element.division {
Element(name: "h1") { "Hello" }
Element.paragraph { "Lorem ipsum dolor sit amet, <consectetur> adipiscing elit, sed & eiusmod." }
}
})
print(tree.renderHTML())Will output:
<html><head><meta charset="UTF-8"><title>Hello world</title></head><body><div><h1>Hello</h1><p>Lorem ipsum dolor sit amet, <consectetur> adipiscing elit, sed & eiusmod.</p></div></body></html>Conditions (if, if else, switch) and iterations (for ... in) will work the same as imperative control-flow.
let cond1 = true
let cond2 = false
let elements = ["Lorem", "ipsum"]
let treeControlFlow = Element.html(head: {
Element.metadata(charset: "UTF-8")
Element(name: "title") { "Hello world" }
}, body: {
Element.division {
if cond1 {
Element(name: "h1") { "Hello" }
}
if cond2 {
Element(name: "h1") { "Hello" }
} else {
Element(name: "h1") { "world" }
}
ForEach(elements) { el in
Element.paragraph { el }
}
}
})
print(treeControlFlow.renderHTML())Will output:
<html><head><meta charset="UTF-8"><title>Hello world</title></head><body><div><h1>Hello</h1><h1>world</h1><p>Lorem</p><p>ipsum</p></div></body></html>Element is modifiable while building the tree.
There is 3 built-in modifiers, identifier, class and attributes
let modifierTree = Element.division {
Element.paragraph { "Hello world" }.identifier("title")
}.class("container")
print(modifierTree.renderHTML())Will output:
<div class="container"><p id="title">Hello world</p></div>attributes takes a closure with inout attributes that you can modify:
let div = Element.division {
}.attributes {
$0[.relationship] = "hello"
$0[.source] = "world"
}
print(div.renderHTML())Will output:
<div rel="hello" src="world"></div>You can include raw html in the tree with RawHTML
let rawHTMLTree = try Element.division {
try RawHTML("""
<h1>hello world</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
""")
}Will output:
<div><h1>hello world</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p></div>