{"id":15288655,"url":"https://github.com/yukiny0811/swiftyhtmlbuilder","last_synced_at":"2025-05-07T04:45:40.617Z","repository":{"id":184875886,"uuid":"655904137","full_name":"yukiny0811/SwiftyHTMLBuilder","owner":"yukiny0811","description":"Swift DSL for writing HTML documents","archived":false,"fork":false,"pushed_at":"2024-02-02T10:46:59.000Z","size":658,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-07T04:45:32.578Z","etag":null,"topics":["css","dsl","html","resultbuilder","swift","swift-package","swift-package-manager","swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yukiny0811.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-19T21:25:17.000Z","updated_at":"2025-01-15T04:44:31.000Z","dependencies_parsed_at":"2024-10-23T13:57:58.978Z","dependency_job_id":null,"html_url":"https://github.com/yukiny0811/SwiftyHTMLBuilder","commit_stats":null,"previous_names":["yukiny0811/swiftyhtmlbuilder"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukiny0811%2FSwiftyHTMLBuilder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukiny0811%2FSwiftyHTMLBuilder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukiny0811%2FSwiftyHTMLBuilder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yukiny0811%2FSwiftyHTMLBuilder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yukiny0811","download_url":"https://codeload.github.com/yukiny0811/SwiftyHTMLBuilder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252816520,"owners_count":21808702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dsl","html","resultbuilder","swift","swift-package","swift-package-manager","swiftui"],"created_at":"2024-09-30T15:51:51.033Z","updated_at":"2025-05-07T04:45:40.592Z","avatar_url":"https://github.com/yukiny0811.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# SwiftyHTMLBuilder\n\n[![Release](https://img.shields.io/github/v/release/yukiny0811/SwiftyHTMLBuilder)](https://github.com/yukiny0811/SwiftyHTMLBuilder/releases/latest)\n[![Swift Compatibility](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fyukiny0811%2FSwiftyHTMLBuilder%2Fbadge%3Ftype%3Dswift-versions)](https://swiftpackageindex.com/yukiny0811/SwiftyHTMLBuilder)\n[![Platform Compatibility](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fyukiny0811%2FSwiftyHTMLBuilder%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/yukiny0811/SwiftyHTMLBuilder)\n[![License](https://img.shields.io/github/license/yukiny0811/SwiftyHTMLBuilder)](https://github.com/yukiny0811/SwiftyHTMLBuilder/blob/main/LICENSE)\n\nSwift DSL for HTML documents\n\n## Key Features\n\n### SwiftUI-like Layouts\n\nUse SwiftUI-like layout components such as VStack, HStack, and ZStack for HTML structure definition.\n\n```.swift\nclass MyBody: HTML {\n    var content: HTMLBlock {\n        body {\n            h1(\"SwiftyHTMLBuilder\")\n            \n            hstack(spacing: \"100px\") {\n                p(\"hstack1\")\n                p(\"hstack1\")\n                p(\"hstack1\")\n            }\n            .backgroundColor(.aliceblue)\n            \n            hstack(equalSpacing: true) {\n                p(\"hstack2\")\n                p(\"hstack2\")\n                p(\"hstack2\")\n            }\n            \n            vstack(spacing: \"10px\") {\n                p(\"vstack1\")\n                p(\"vstack2\")\n                p(\"vstack3\")\n            }\n            .backgroundColor(.aliceblue)\n            \n            zstack(vAlign: .center, hAlign: .center) {\n                img(src: \"image.png\")\n                    .width(300, unit: .px)\n                vstack(spacing: \"0px\") {\n                    h2(\"Swifty\")\n                        .margin(0)\n                    h2(\"HTML\")\n                        .margin(0)\n                }\n                .color(.white)\n            }\n        }\n    }\n}\n```\n\n\u003cimg width=\"1337\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/b4a37312-d7a2-402f-bdbf-d5e9213f52ab\"\u003e\n\n### Easy-To-Write MediaQuery\n\nYou can easily write responsive codes with MediaQuery class.\n\n```.swift\nMediaQuery(.minWidth, value: \"500px\") {\n    nav {\n        hstack(spaceBetween: true) {\n            h1(\"SwiftyHTMLBuilder\")\n            hstack(hAlign: .center, spacing: \"10px\") {\n                a(href: \"https://github.com\") { text(\"AAAAA\") }\n                a(href: \"https://github.com\") { text(\"BBBBB\") }\n                a(href: \"https://github.com\") { text(\"CCCCC\") }\n            }\n        }\n    }\n    .backgroundColor(.aliceblue)\n} falseContents: {\n    nav {\n        vstack(equalSpacing: true) {\n            a(href: \"https://github.com\") { text(\"AAAAA\") }\n            a(href: \"https://github.com\") { text(\"BBBBB\") }\n            a(href: \"https://github.com\") { text(\"CCCCC\") }\n        }\n        .width(100, unit: .vw)\n        .backgroundColor(.aliceblue)\n    }\n    h1(\"SwiftyHTMLBuilder\")\n}\n```\n\n\u003cimg width=\"1015\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/175e6f86-357b-4bea-a43b-29292593af45\"\u003e\n\n### Autocomplete for Styling\n\nAutocomplete for css, making it easier to apply CSS and other styling properties directly in your Swift code.\n\n```.swift\nh2(\"HTML\")\n    .margin(0)\n    .padding(0)\n    .color(.red)\n    .backgroundColor(r: 255, g: 0, b: 255)\n```\n\n### Modularize views.\n\nOrganize your HTML code more effectively by dividing it into classes. \nThis approach allows you to modularize HTML content, enabling the use of loops (for) and conditional statements (if) for HTML generation.\n\n```.swift\nclass MyCell: HTML {\n    let count: Int\n    init(count: Int) {\n        self.count = count\n    }\n    var content: HTMLBlock {\n        hstack(spaceBetween: true) {\n            h3(\"cell\")\n            h3(String(count))\n        }\n        .width(400, unit: .px)\n        .backgroundColor(.aliceblue)\n    }\n}\n\n// using MyCell\nvstack(spacing: \"10px\") {\n    for i in 0..\u003c10 {\n        if i.isMultiple(of: 2) {\n            MyCell(count: i).build()\n        }\n    }\n}\n```\n\n\u003cimg width=\"1312\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/ee48d874-e8f8-4bd6-a61a-cca54995a41e\"\u003e\n\n## Usage\n\n### HTML Document Template\n\n```.swift\nclass MyHtml: HTML {\n    var content: HTMLBlock {\n        document {\n            doctype()\n            html {\n                head {\n                    meta(charset: .utf8)\n                    title(\"SwiftyHTMLBuilder Example\")\n                }\n                body {\n                    h1(\"SwiftyHTMLBuilder\")\n                }\n            }\n        }\n    }\n}\n```\n\n### Xcode Project Setup\n\nCreate new Xcode project for Command Line Tools (macOS), nad add this package via Swift Package Manager.\n\nFor your convenience, setup your project with following steps. \n\n1. Edit your Scheme and append new environment variable MY_ROOT\n\u003cimg width=\"916\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/95f3635f-67a3-4e88-ac40-0fa29bab429a\"\u003e\n\n2. Create new Post-action for Run. This will make Xcode to open index.html everytime you run the project.\n\n\u003cimg width=\"926\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/bcb0dc67-cfa5-483d-9ec2-f628721101e4\"\u003e\n\n3. Organize your project directory structure\n\u003cimg width=\"261\" alt=\"image\" src=\"https://github.com/yukiny0811/SwiftyHTMLBuilder/assets/28947703/2a9623e0-2e6f-4821-8457-3f336411902f\"\u003e\n\n4. Create URL object for outputPath (to index.html)\n```.swift\nimport Foundation\nimport SwiftyHTMLBuilder\n\nlet projectRootPath = ProcessInfo.processInfo.environment[\"MY_ROOT\"]!\nlet outputPath = URL(string: projectRootPath)!\n    .appending(path: \"Output\")\n    .appending(path: \"index.html\")\n    .absoluteString\n```\n5. Write your HTML\n```.swift\nclass MyHTML: HTML {\n    var content: HTMLBlock {\n        ...\n    }\n}\n```\n\n6. Compile your swift code to HTML code.\n```.swift\nlet compiled = MyHtml().compile()\n```\n\n7. Write to index.html\n```.swift\ntry! compiled.write(toFile: outputPath, atomically: true, encoding: .utf8)\n```\n\n### Convert HTML to HTMLBlock \n\nUse ```.build()``` to convert.\n\n```.swift\nclass MyHtml: HTML {\n    var content: HTMLBlock {\n        document {\n            doctype()\n            html {\n                MyHead().build()\n                MyBody().build()\n            }\n        }\n    }\n}\n```\n\n### Use Undefined css, attribute, or HTML components\n\nBecause not all components are covered in this package, you may need to manually write css, attribute, or HTML components.\nContributions are welcome.\n\n```.swift\nimg(src: \"image.png\")\n    .css(\"z-index\", \"1\")\n    .attr(\"width\", \"300px\")\n\n// use text() to write raw HTML code\ntext(\"\u003cstyle\u003e * { padding: 0; margin: 0; } \u003c/style\u003e\")\n```\n\n## Covered Features\n\n### HTML Tags\n\n- html\n- head\n- body\n- a\n- br\n- div\n- doctype\n- footer\n- f1\n- f2\n- f3\n- f4\n- f5\n- f6\n- header\n- img\n- link\n- meta\n- nav\n- p\n- section\n- span\n- title\n- text (original)\n- empty (original)\n- group (original)\n- document (original)\n- vstack (original)\n- hstack (original)\n- zstack (original)\n\n### CSS Styles\n- background-color\n- color\n- width\n- height\n- padding\n- margin\n- position\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukiny0811%2Fswiftyhtmlbuilder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyukiny0811%2Fswiftyhtmlbuilder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyukiny0811%2Fswiftyhtmlbuilder/lists"}