https://github.com/yukiny0811/swiftyhtmlbuilder
Swift DSL for writing HTML documents
https://github.com/yukiny0811/swiftyhtmlbuilder
css dsl html resultbuilder swift swift-package swift-package-manager swiftui
Last synced: about 1 year ago
JSON representation
Swift DSL for writing HTML documents
- Host: GitHub
- URL: https://github.com/yukiny0811/swiftyhtmlbuilder
- Owner: yukiny0811
- License: mit
- Created: 2023-06-19T21:25:17.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-02T10:46:59.000Z (over 2 years ago)
- Last Synced: 2025-05-07T04:45:32.578Z (about 1 year ago)
- Topics: css, dsl, html, resultbuilder, swift, swift-package, swift-package-manager, swiftui
- Language: Swift
- Homepage:
- Size: 643 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SwiftyHTMLBuilder
[](https://github.com/yukiny0811/SwiftyHTMLBuilder/releases/latest)
[](https://swiftpackageindex.com/yukiny0811/SwiftyHTMLBuilder)
[](https://swiftpackageindex.com/yukiny0811/SwiftyHTMLBuilder)
[](https://github.com/yukiny0811/SwiftyHTMLBuilder/blob/main/LICENSE)
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.
```.swift
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.
```.swift
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.
```.swift
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.
```.swift
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
```.swift
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.
1. Edit your Scheme and append new environment variable MY_ROOT
2. Create new Post-action for Run. This will make Xcode to open index.html everytime you run the project.
3. Organize your project directory structure
4. Create URL object for outputPath (to index.html)
```.swift
import Foundation
import SwiftyHTMLBuilder
let projectRootPath = ProcessInfo.processInfo.environment["MY_ROOT"]!
let outputPath = URL(string: projectRootPath)!
.appending(path: "Output")
.appending(path: "index.html")
.absoluteString
```
5. Write your HTML
```.swift
class MyHTML: HTML {
var content: HTMLBlock {
...
}
}
```
6. Compile your swift code to HTML code.
```.swift
let compiled = MyHtml().compile()
```
7. Write to index.html
```.swift
try! compiled.write(toFile: outputPath, atomically: true, encoding: .utf8)
```
### Convert HTML to HTMLBlock
Use ```.build()``` to convert.
```.swift
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.
```.swift
img(src: "image.png")
.css("z-index", "1")
.attr("width", "300px")
// use text() to write raw HTML code
text(" * { padding: 0; margin: 0; } ")
```
## Covered Features
### HTML Tags
- html
- head
- body
- a
- br
- div
- doctype
- footer
- f1
- f2
- f3
- f4
- f5
- f6
- header
- img
- link
- meta
- nav
- p
- section
- span
- title
- text (original)
- empty (original)
- group (original)
- document (original)
- vstack (original)
- hstack (original)
- zstack (original)
### CSS Styles
- background-color
- color
- width
- height
- padding
- margin
- position