{"id":25448082,"url":"https://github.com/witoo-source/webui","last_synced_at":"2026-04-12T17:02:03.396Z","repository":{"id":277874473,"uuid":"933785634","full_name":"witoo-source/webui","owner":"witoo-source","description":"WebUI, the new way to make the web.","archived":false,"fork":false,"pushed_at":"2025-02-16T17:39:22.000Z","size":160,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-16T18:32:12.015Z","etag":null,"topics":["fork","frontend","javascript","nodejs","react","reactjs","swift","swiftui","ts","tsx","typescript","web","webui"],"latest_commit_sha":null,"homepage":"https://witto.es","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/witoo-source.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-02-16T17:27:37.000Z","updated_at":"2025-02-16T18:18:14.000Z","dependencies_parsed_at":"2025-02-16T18:42:18.069Z","dependency_job_id":null,"html_url":"https://github.com/witoo-source/webui","commit_stats":null,"previous_names":["witoo-source/webui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witoo-source%2Fwebui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witoo-source%2Fwebui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witoo-source%2Fwebui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/witoo-source%2Fwebui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/witoo-source","download_url":"https://codeload.github.com/witoo-source/webui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254485051,"owners_count":22078767,"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":["fork","frontend","javascript","nodejs","react","reactjs","swift","swiftui","ts","tsx","typescript","web","webui"],"created_at":"2025-02-17T19:18:45.951Z","updated_at":"2026-04-12T17:02:03.384Z","avatar_url":"https://github.com/witoo-source.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to WebUI!\n\nWebUI is a declarative fork of React, we allow you to create your dreamed web with declarative statements as SwiftUI does! WebUI is mostly based on SwiftUI in its way to call UI components even with the styling, but we didn't remove the power of ReactJS! You still can use the native react hooks as \n\n- `useState`\n- `useEffect`\n- `useContext`\n\nAnd every hook in React! or if you prefer, you could make your own hook, it's up to you ☺️!\n\nThis fork is still in development, i'm working to make it perfect for you, adding features to improve your coding time 👨🏻‍💻 so, be patient!\n\n## Installing\n\n###### First, create a ReactJS project:\n\n```shell\nnpx create-react-app YourAppName\n```\n\nFor more info, visit [React's page](https://react.dev/learn/creating-a-react-app)\n\n#### Then, install my fork:\n\n```shell\nnpm i webui-fork\n```\n\n\n\n## UI Elements\n\nFor now, you have this primitive elements to use!:\n\n- ##### `Text` \n\n  - Works as a `span` HTML element\n\n- ##### `Button` \n\n  - Works as a `button` HTML element\n\n- ##### `Stack`\n\n  - Works as a `div` HTML element\n\n- ##### `Image`\n\n  - Works as a `image` HTML element\n\n- ##### `TextField` \n\n  - Works as a `input` HTML element\n\n- ##### `List` \n\n  - Works as a `list` HTML element\n\n- ##### `Url` \n\n  - Works as a `a` HTML element\n\n- ##### `Form` \n\n  - Works as a `form` HTML element\n\n## Utils\n\nI added some utils (i'll add more in the future) to make it even easier! 🥳\n\n| Identificator  | What does this do?                                           |\n| -------------- | ------------------------------------------------------------ |\n| `Colors`       | gives you a more declarative way to set color values         |\n| `useCondition` | is a hook which gives you the feature to render UI elements with conditions. This hook is required because WebUI use arrays to catch the elements you want to render so you can't use TypeScript statements inside an array declaration, it gives you that feature. |\n\n## How does WebUI work?\n\nOk, it's easy. WebUI uses a main function (which works as the body of your page) called \"ContentView\", it's a custom function which accepts an array of JSX Elements (react elements) and returns a `div` element with each element of the array. Each element is just a class with the props of the HTML element and a method (`.add()`) which returns the JSX element with those props. Here you have an example of how a primitive element of UI is created:\n\n#### Text UI Element\n\n```jsx\nexport class Text extends ElementProperties {\n    content: string;\n\n    constructor(content: string) {\n        super();\n        this.content = content;\n    }\n\n    override add(): JSX.Element {\n        return \u003cspan style={this.getStyles()}\u003e{this.content}\u003c/span\u003e;\n    }\n}\n```\n\n### You are allowed to make your own components! \n\n```jsx\nexport class MyOwnComponent extends ElementProperties {\n    override add(): JSX.Element {\n        return new Text('My own component').add();\n    }\n}\n```\n\nYou have to export a class which has to extend `ElementProperties` class (this class gives you the styling methods to your custom component) and put the UI elements you want in your component in the `add()` method (overriding it)\n\n\n\nThat's all! Easy, right? 🎉\n\n\n\n## Usage Example\n\n\n\n```jsx\nimport { useState } from 'react';\nimport { ContentView, Stack, Text, Button, Image, useCondition, Colors } from 'webui-fork';\n\nexport default function App() { \n  const [wasClicked, setWasClicked] = useState(false);\n\n    return ContentView([\n        new Stack([\n            new Text('Hello from WebUI!')\n            .textColor(Colors().white)\n            .fontSize(24)\n            .margin(10)\n            .fontWeight('bold')\n            .add(),\n\n            new Button('Click here!', () =\u003e {\n              setWasClicked(!wasClicked)\n            })\n            .background(Colors().white)\n            .textColor(Colors().black)\n            .padding(15)\n            .cornerRadius(10)\n            .margin(10)\n            .cursor('pointer')\n            .add(),\n\n\n            new useCondition(wasClicked, () =\u003e {\n              return new Image('https://picsum.photos/200/300')\n              .margin(10)\n              .add()\n            }).set()\n        ])\n        .add()\n    ])\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwitoo-source%2Fwebui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwitoo-source%2Fwebui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwitoo-source%2Fwebui/lists"}