{"id":21829774,"url":"https://github.com/0xtlt/uify","last_synced_at":"2026-04-20T10:32:59.382Z","repository":{"id":136125430,"uuid":"327319816","full_name":"0xtlt/uify","owner":"0xtlt","description":"Make your next web app with Deno 🐱‍🐉","archived":false,"fork":false,"pushed_at":"2021-01-09T19:32:54.000Z","size":20,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-26T17:53:05.585Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/0xtlt.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":"2021-01-06T13:28:07.000Z","updated_at":"2021-01-09T19:32:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"0a450597-e310-41bf-bbaf-c0cf4cf3869a","html_url":"https://github.com/0xtlt/uify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/0xtlt/uify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Fuify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Fuify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Fuify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Fuify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xtlt","download_url":"https://codeload.github.com/0xtlt/uify/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xtlt%2Fuify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32043049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-27T18:29:10.952Z","updated_at":"2026-04-20T10:32:59.356Z","avatar_url":"https://github.com/0xtlt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UIFY\n\nMake your next web app with Deno 🐱‍🐉\n\nUIFY is the fusion of two ideas: the one which was to abandon react for \"simple\" interfaces and the one which consists in recreating a framework similar to the one that Apple created with SwiftUI\n\nExemple :\n\n```typescript\nexport default Grid(\n  {\n    columns: [1, 2, 1],\n    rows: 1,\n    gapHorizontal: 15,\n    gapVertical: 10,\n  },\n  HStack(Text(\"This is a text\").color(COLORS.Red)),\n  Img(\"https://source.unsplash.com/random/800x600\", \"unsplash image\", {\n    preset: \"coverAll\",\n  }),\n  HStack(\n    Text(\"This is a centered text\")\n      .size(28)\n      .align(\"center\")\n      .breakpoint(BREAKPOINTS.Mobile, (mobile) =\u003e\n        mobile.size(10).color(COLORS.Red),\n      ),\n  ).background(COLORS.Green),\n);\n```\n\nBecomes\n\n`HTML`\n\n```html\n\u003cdiv class=\"c_3bf7863\"\u003e\n  \u003cdiv class=\"c_15b25b7\"\u003e\u003cp class=\"c_9bf57a6\"\u003eThis is a text\u003c/p\u003e\u003c/div\u003e\n  \u003cimg\n    src=\"https://source.unsplash.com/random/800x600\"\n    alt=\"unsplash image\"\n    class=\"c_cc3e443\"\n  /\u003e\n  \u003cdiv class=\"c_e7baf34\"\u003e\u003cp class=\"c_ab41293\"\u003eThis is a centered text\u003c/p\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n`CSS`\n\n```css\n.c_3bf7863 {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n  grid-template-rows: 1fr;\n  grid-gap: 10px 15px;\n}\n.c_15b25b7 {\n  display: flex;\n}\n.c_9bf57a6 {\n  color: #ff6b6b;\n}\n.c_cc3e443 {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.c_e7baf34 {\n  display: flex;\n  background: #1dd1a1;\n}\n.c_ab41293 {\n  font-size: 28px;\n  margin: auto;\n}\n@media screen and (max-width: 375px) {\n  .c_ab41293 {\n    font-size: 10px;\n    color: #ff6b6b;\n  }\n}\n```\n\n## Getting started\n\nGetting started with UIFY is easy.\n\n## Import UIFY\n\n```ts\nimport * from \"https://raw.githubusercontent.com/techtastet/uify/main/mod.ts\"\n```\n\n## Component Working\n\nBecause everything is a component in UIFY, you need to know theses things before starting.\n\nComponent class initiation looks like this\n\n### Component\n\n```ts\nnew Component(type: string, ...childrens: Component[]);\n// ex:\nnew Component(\"div\");\nnew Component(\"div\", new Component(\"div\"), new Component(\"div\", new Component(\"div\")))\n```\n\nYou can obviously create your own Component by extending the Component class.  \nExemple with the TextComponent\n\n```ts\nclass TextComponent extends Component {\n  color(color: string): this {\n    this.setStyle(\"color\", color);\n    return this;\n  }\n\n  size(size: number | string): this {\n    this.setStyle(\"font-size\", typeof size === \"string\" ? size : `${size}px`);\n    return this;\n  }\n}\n\nfunction Text(content: string, ...childrens: Component[]): TextComponent {\n  return new TextComponent(\"p\", ...childrens).setHTML(content);\n}\n\nexport default Text;\n```\n\nBy the way, the Component class has many prototypes that will allow you to customize your elements as much as possible, and elements have already been created and optimized for you, here is the link leading to the doc :\n\n[Component documentation](/doc/component.md)\n\n## Make an extension\n\nMaybe you want to use UIFY with your favorite CMS like Shopify with its own backend language (Liquid).\nWith UIFY you can easily create an extension for it\n\n[Extension documentation](/doc/extension.md)\n\n## Default project organization (soon)\n\n```\nproject folder/\n├── dist/\n├── src/\n│   └── pages/\n│       ├── index.ts\n│       └── article.ts\n│\n└── blog.ts\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtlt%2Fuify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xtlt%2Fuify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xtlt%2Fuify/lists"}