{"id":20936497,"url":"https://github.com/eneskaraosman/jsondrivenui","last_synced_at":"2025-05-13T21:31:08.109Z","repository":{"id":40632636,"uuid":"316484319","full_name":"EnesKaraosman/JSONDrivenUI","owner":"EnesKaraosman","description":"JSON into native SwiftUI View to build UI for Apple ecosystem","archived":false,"fork":false,"pushed_at":"2024-04-10T11:46:19.000Z","size":268,"stargazers_count":99,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-03T08:24:17.209Z","etag":null,"topics":["backend-driven-ui","ios","json-driven-ui","server-driven-ui","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/EnesKaraosman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"enesKaraosman","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2020-11-27T11:34:43.000Z","updated_at":"2025-04-21T08:11:15.000Z","dependencies_parsed_at":"2024-04-10T12:48:26.227Z","dependency_job_id":null,"html_url":"https://github.com/EnesKaraosman/JSONDrivenUI","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnesKaraosman%2FJSONDrivenUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnesKaraosman%2FJSONDrivenUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnesKaraosman%2FJSONDrivenUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EnesKaraosman%2FJSONDrivenUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EnesKaraosman","download_url":"https://codeload.github.com/EnesKaraosman/JSONDrivenUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254030932,"owners_count":22002674,"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":["backend-driven-ui","ios","json-driven-ui","server-driven-ui","swiftui"],"created_at":"2024-11-18T22:19:58.642Z","updated_at":"2025-05-13T21:31:06.498Z","avatar_url":"https://github.com/EnesKaraosman.png","language":"Swift","funding_links":["https://github.com/sponsors/enesKaraosman"],"categories":[],"sub_categories":[],"readme":"# JSONDrivenUI\n\nConvert your json into native `View`s\n\nSimply construct `JSONDataView(json: Data)` view to setup UI.\n\nOK JSON but how? \n\n* Specify your view's `type` ([ViewType](../main/Sources/JSONDrivenUI/ViewType.swift))\n* `properties` of it ([ViewProperties](../main/Sources/JSONDrivenUI/ViewProperties.swift) )\n* `values` (like text, imageUrl, systemIconName, localImageName) ([Values](../main/Sources/JSONDrivenUI/Values.swift) )\n* `subviews` (for stacks, list \u0026 scrollView)\n\n\n### Supported View Types\n\u003cdetails\u003e\n  \u003csummary\u003eImage\u003c/summary\u003e\n  \n- For images we have 3 options. (Order is also like below in case more than 1 set)\n    * systemIconName\n    * localImageName\n    * imageUrl\n     \n```json\n{\n  \"type\": \"Image\",\n  \"values\": {\n      \"systemIconName\": \"person.crop.circle\"\n  },\n  \"properties\": {\n    \"width\": 60,\n    \"height\": 60\n  }\n}\n```\n\n`resizable()` \u0026 `scaledToFit()` modifiers applied by default.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eText\u003c/summary\u003e\n\n    * font (largeTitle, title, headline, subheadline, body, callout, footnote, caption)\n    * fontWeight (ultraLight, thin, light, regular, medium, semibold, bold, heavy, black)\n\n```json\n{\n    \"type\": \"Text\",\n    \"values\": {\n        \"text\": \"Enes Karaosman\"\n    },\n    \"properties\": {\n        \"fontWeight\": \"semibold\",\n        \"font\": \"body\"\n    }\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eVStack\u003c/summary\u003e\n\n    * spacing: Int\n    * horizontalAlignment: (leading, center, trailing) // default is center\n\n```json\n{\n    \"type\": \"VStack\",\n    \"properties\": {\n        \"spacing\": 8,\n        \"horizontalAlignment\": \"leading\",\n        ..\n    },\n    \"subviews\": [\n        ...\n    ]\n}\n```\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n    \u003csummary\u003eHStack\u003c/summary\u003e\n\n    * spacing: Int\n    * verticalAlignment: (top, bottom, center, firstTextBaseline, lastTextBaseline) // default is center\n\n```json\n{\n    \"type\": \"HStack\",\n    \"properties\": {\n        \"spacing\": 8,\n        \"verticalAlignment\": \"top\",\n        ..\n    },\n    \"subviews\": [\n        ...\n    ]\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eZStack\u003c/summary\u003e\n\n\n```json\n{\n  \"type\": \"ZStack\",\n  \"subviews\": [\n    {\n      \"type\": \"Circle\",\n      \"properties\": {\n        \"foregroundColor\": \"#ff0000\",\n        \"width\": 200\n      }\n    },\n    {\n      \"type\": \"Circle\",\n      \"properties\": {\n        \"foregroundColor\": \"#00ff00\",\n        \"width\": 150\n      }\n    },\n    {\n      \"type\": \"Circle\",\n      \"properties\": {\n        \"foregroundColor\": \"#0000ff\",\n        \"width\": 100\n      }\n    }\n  ]\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eList\u003c/summary\u003e\n\n\n```json\n{\n  \"type\": \"List\",\n  \"subviews\": [\n    { ... },\n    { ... },\n    { ... }\n  ]\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n    \u003csummary\u003eScrollView\u003c/summary\u003e\n\nScroll view content (subviews) automatically placed in Stack according to given axis.\n\u003cbr\u003e\nIf axis is vertical placed in VStack, otherwise in HStack.\n\n```json\n{\n  \"type\": \"ScrollView\",\n  \"properties\": {\n    \"axis\": \"vertical\",\n    \"showsIndicators\": true\n  }\n  \"subviews\": [\n    { ... },\n    { ... },\n    { ... }\n  ]\n}\n```\n\n\u003c/details\u003e\n\n* Spacer (`minLenght: Int?`)\n* Rectangle\n* Circle\n* Divider\n\n#### Examples\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cimg src=\"../main/Sources/JSONDrivenUI/Preview/profile_row.png\" width=\"240\"/\u003e\n  \u003c/summary\u003e\n  \n\u003c!--   \u003cimg src=\"../main/Sources/JSONDrivenUI/Preview/profile_row.png\" width=\"240\"/\u003e --\u003e\n    \n```json\n{\n  \"type\": \"HStack\",\n  \"properties\": {\n    \"height\": 100,\n    \"padding\": 16,\n    \"spacing\": 16\n  },\n  \"subviews\": [\n    {\n      \"type\": \"Image\",\n      \"values\": {\n          \"systemIconName\": \"person.crop.circle\"\n      },\n      \"properties\": {\n        \"width\": 60,\n        \"height\": 60\n      }\n    },\n    {\n      \"type\": \"VStack\",\n      \"properties\": {\n        \"foregroundColor\": \"#f0f00f\",\n        \"spacing\": 8,\n        \"horizontalAlignment\": \"leading\"\n      },\n      \"subviews\": [\n        {\n          \"type\": \"Text\",\n          \"values\": {\n            \"text\": \"Enes Karaosman\"\n          },\n          \"properties\": {\n            \"fontWeight\": \"semibold\",\n            \"foregroundColor\": \"#000000\"\n          }\n        },\n        {\n          \"type\": \"Text\",\n          \"values\": {\n            \"text\": \"Here is a bit description like text\"\n          },\n          \"properties\": {\n              \"foregroundColor\": \"#070707\"\n          }\n        }\n      ]\n    }\n  ]\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003cimg src=\"../main/Sources/JSONDrivenUI/Preview/complex.png\" width=\"240\"/\u003e\n  \u003c/summary\u003e\n    \n```json\n{\n    \"type\": \"VStack\",\n    \"subviews\": [\n        {\n            \"type\": \"Text\",\n            \"properties\": {\n                \"font\": \"title\"\n            },\n            \"values\": {\n                \"text\": \"LARGE TITLE TEXT\"\n            }\n        },\n        {\n            \"type\": \"Image\",\n            \"values\": {\n                \"imageUrl\": \"http://picsum.photos/400/200\"\n            },\n            \"properties\": {\n                \"padding\": 16,\n                \"height\": 200\n            }\n        },\n        {\n            \"type\": \"Text\",\n            \"properties\": {\n                \"padding\": 16,\n                \"font\": \"title\",\n                \"fontWeight\": \"semibold\"\n            },\n            \"values\": {\n                \"text\": \"Semibold Title\"\n            }\n        },\n        {\n            \"type\": \"List\",\n            \"properties\": {\n                \"horizontalAlignment\": \"leading\",\n                \"spacing\": 16,\n                \"padding\": 8\n            },\n            \"subviews\": [\n                {\n                    \"type\": \"HStack\",\n                    \"properties\": {\n                        \"foregroundColor\": \"#001238\",\n                        \"spacing\": 8\n                    },\n                    \"subviews\": [\n                        {\n                            \"type\": \"Image\",\n                            \"properties\": {\n                                \"height\": 70\n                            },\n                            \"values\": {\n                                \"imageUrl\": \"http://picsum.photos/70/70\"\n                            }\n                        },\n                        {\n                            \"type\": \"VStack\",\n                            \"properties\": {\n                                \"spacing\": 4,\n                                \"horizontalAlignment\": \"leading\"\n                            },\n                            \"subviews\": [\n                                {\n                                    \"type\": \"Text\",\n                                    \"values\": { \"text\" : \"Item.1 Title\" }\n                                },\n                                {\n                                    \"type\": \"Text\",\n                                    \"properties\": {\n                                        \"foregroundColor\": \"#828282\"\n                                    },\n                                    \"values\": { \"text\" : \"Here is multiline description text in VStack which is inside HStack\" }\n                                }\n                            ]\n                        }\n                    ]\n                },\n                {\n                    \"type\": \"HStack\",\n                    \"properties\": {\n                        \"foregroundColor\": \"#001238\",\n                        \"spacing\": 8\n                    },\n                    \"subviews\": [\n                        {\n                            \"type\": \"Image\",\n                            \"properties\": {\n                                \"height\": 70\n                            },\n                            \"values\": {\n                                \"imageUrl\": \"http://picsum.photos/70/70\"\n                            }\n                        },\n                        {\n                            \"type\": \"VStack\",\n                            \"properties\": {\n                                \"spacing\": 4,\n                                \"horizontalAlignment\": \"leading\"\n                            },\n                            \"subviews\": [\n                                {\n                                    \"type\": \"Text\",\n                                    \"values\": { \"text\" : \"Item.2 Title\" }\n                                },\n                                {\n                                    \"type\": \"Text\",\n                                    \"properties\": {\n                                        \"foregroundColor\": \"#828282\"\n                                    },\n                                    \"values\": { \"text\" : \"Here is second multiline description text in VStack which is inside HStack\" }\n                                }\n                            ]\n                        }\n                    ]\n                }\n            ]\n        }\n    ]\n}\n```\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feneskaraosman%2Fjsondrivenui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feneskaraosman%2Fjsondrivenui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feneskaraosman%2Fjsondrivenui/lists"}