{"id":20157505,"url":"https://github.com/lehuyh/goatui","last_synced_at":"2026-05-05T16:07:28.524Z","repository":{"id":238945733,"uuid":"787096941","full_name":"LehuyH/GoatUI","owner":"LehuyH","description":"🐐 React for C++","archived":false,"fork":false,"pushed_at":"2024-05-09T02:35:55.000Z","size":26,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T12:50:35.200Z","etag":null,"topics":["cpp","goatui","gui","react","ui-library"],"latest_commit_sha":null,"homepage":"","language":"C++","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/LehuyH.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":"2024-04-15T22:10:46.000Z","updated_at":"2024-05-09T02:35:58.000Z","dependencies_parsed_at":"2024-05-09T03:44:41.405Z","dependency_job_id":null,"html_url":"https://github.com/LehuyH/GoatUI","commit_stats":null,"previous_names":["lehuyh/goatui"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LehuyH%2FGoatUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LehuyH%2FGoatUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LehuyH%2FGoatUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LehuyH%2FGoatUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LehuyH","download_url":"https://codeload.github.com/LehuyH/GoatUI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241596276,"owners_count":19988044,"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":["cpp","goatui","gui","react","ui-library"],"created_at":"2024-11-13T23:46:31.862Z","updated_at":"2026-05-05T16:07:23.447Z","avatar_url":"https://github.com/LehuyH.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"#  GoatUI 🐐\n[![Run on Replit](https://replit.com/badge)](https://replit.com/@LehuyH/GoatUI-Starter)\n\n*It's React... but for C++!*\n\n\nGoatUI is a C++ library that allows you to create web-based user interfaces using components. It compiles your C++ code into WebAssembly, which runs in the browser to generate the UI.\n\n## Why Use GoatUI?\n\n \n-  **Web-Based:** Create interactive user interfaces that run in the browser using C++.\n\n- **Cross-Platform:** With WebAssembly, your GoatUI program can run across all modern browsers.\n\n-  **Reactive Components:** Build your UI using components that automatically update when the state changes.\n\n- **Event Handling:** Handle events like button clicks and form submissions with ease.\n\n  \n\n## 🛠️ Installation\n\n  \n\n### Prerequisites\n\n1.  **Emscripten:** Install [Emscripten](https://emscripten.org/docs/getting_started/downloads.html) to compile C++ to WebAssembly.\n\n  \n\n### Steps\n\n  \n\n1.  **Clone the Repository:**  `git clone https://github.com/LehuyH/goatui.git`\n\n2.  **Include `goatui/component.hpp`:** Add `#include \"goatui/component.hpp\"` in your C++ project.\n\n  \n## 🚀 Quick Start Example\n\n```cpp\n#include \"goatui/component.hpp\"\nusing namespace std;\n\nReactive\u003cint\u003e counter(0);\n\nint main(){\n\tComponent app(\"div\",{\n\t\tnew Component(\"button\",{\n\t\t\tnew Attribute(\"class\",\"bg-gray-200 hover:bg-gray-100 rounded p-4\")\n\t\t\t},{\n\t\t\t\tEventListener(\"click\",[](int){\n\t\t\t\t\tcounter = counter.getValue() + 1;\n\t\t\t\t}),\n\t\t\t},{\n\t\t\t\tnew r(\"This button has been clicked \"), new s(counter), new r(\" times\")\n\t\t\t}\n\t\t)\n\t});\n\tapp.mount();\n}\n```\n\nOutputs the following:\n![Quick Start Example](/.github/quickstart.png)\n\n## 🧰 Usage\n\nGoatUI provides an easy-to-use API for creating web-based user interfaces using C++. Here's a quick overview of the main concepts:\n\n### Components\nUse the `Component` class to create UI elements. Each component can have children components, attributes, and event listeners.\n\n```cpp\nComponent(string HTMLTag, vector\u003cAttribute*\u003e attributes, vector\u003cEventListener*\u003e eventListeners, vector\u003cComponent*\u003e children)\n```\nYou can omit `attributes`, `eventListeners`, or `children` but the order must be preserved.\n\nHere's an example of a simple component:\n\n```cpp\nComponent container(\"div\", {\n\tnew Attribute(\"class\", \"flex items-center flex-col justify-center min-h-screen p-8 space-y-4\")\n}, {\n\t// You can nest components inside other components\n\tnew Component(\"h1\", {\n\t\t// Add attributes to the component\n\t\tnew Attribute(\"class\", \"text-2xl\")\n\t}, {\n\t\tnew r(\"Hello, World!\")\n\t}),\n\tnew Component(\"button\", {\n\t\tnew Attribute(\"class\", \"bg-blue-500 text-white p-2 rounded\")\n\t}, {\n\t\t// Add event listeners to the component\n\t\tEventListener(\"click\", [](int) {\n\t\t\t// Handle the event here\n\t\t})\n\t}, {\n\t\tnew r(\"Click me!\")\n\t})\n});\n```\n\nTo render the component, call the `mount` method:\n\n```cpp\ncontainer.mount();\n```\n\nThis will render the GUI in the browser:\n![Component Example](/.github/comp.png)\n\nBy default, GoatUI's web executor includes [UnoCSS](https://unocss.dev/) with a TailwindCSS compatibility layer for styling. This means you can use any class from TailwindCSS to style your components.\n\nHowever, this behavior can be modified by changing `./dist/index.html` to include your own CSS file.\n\n#### Utility Components\nYou can use the `r` class to render raw text and the `s` class to render reactive values\n  \n  ```cpp\n  new Component(\"h1\",{\n    new r(\"Hello, World! The count is:\"),\n    new s(counter)\n  });\n```\n\n### Reactivty\nWith GoatUI's reactivty system, you can declarative create GUIs that automatically update when the state changes.\n\nTo create a reactive value, use the `Reactive` class:\n\n```cpp\nReactive\u003cint\u003e counter(0);\nReactive\u003cstring\u003e message(\"Hello, World!\");\n```\n\nYou can access the value of a reactive variable using the `getValue` method:\n\n```cpp\nint value = counter.getValue();\n```\n\nTo update the value of a reactive variable, simply assign a new value to it:\n\n```cpp\ncounter = 42;\n```\n\nWhen a reactive variable is updated, any components that depend on it will automatically re-render. \n\n\nTo specify this relationship, you can use the `s` class to create reactive components.\n\nFor example:\n```cpp\nComponent app(\"div\",{\n  new Component(\"h1\",{\n    new s(counter)\n  })\n});\n```\n\nWhen the `counter` value changes, the `h1` element will automatically update to reflect the new value.\n\nYou can use `ReactiveAttribute` to create reactive attributes too:\n\n```cpp\nReactive\u003cstring\u003e inputValue(\"\");\n\nComponent input(\"input\",{\n  new ReactiveAttribute(\"value\",inputValue)\n});\n```\nThis will create an input element that updates its value whenever `inputValue` changes.\n\n### Event Handling\nYou can handle events like button clicks and form submissions using the `EventListener` class.\n\nThe `EventListener` class takes an event name and a callback function as arguments:\n```cpp\nEventListener(string HTMLEvent, function\u003cvoid(int)\u003e callback)\n```\nThe callback function takes an integer argument, which is a pointer to the value of the event.\n\n\n\n```cpp\nReactive\u003cstring\u003e inputValue(\"\");\n\nComponent input(\"input\",{\n  new ReactiveAttribute(\"value\",inputValue)\n},{\n  EventListener(\"input\",[](int valuePtr){\n    //When the user types in the input, update the reactive value\n    inputValue = std::string((char*)valuePtr);\n  })\n});\n```\n\nThis code creates an input element that updates the `inputValue` reactive variable whenever the user types in the input.\n\n## 🎨 UI Kit\nTo improve convenience and reusability, it is recommended to create custom components by deriving from the `Component` class. This allows you to encapsulate common components that you use frequently.\n\nWe ship GoatUI with a standard UI kit that includes common components like buttons and inputs under `goatui/ui-kit`.\n\n### `goatui/ui-kit/button.hpp`\nStyled button component with hover and active states.\n\nExample with `ButtonPrimary`:\n```cpp\nButtonPrimary button(\"Click me!\",[](int){\n  //Handle button click\n});\n```\n\n### `goatui/ui-kit/input.hpp`\nA collection of styled input components.\n\nExample with `InputText`:\n```cpp\nReactive\u003cstring\u003e inputValue(\"\");\nInputText(\"Type something\",inputValue);\n```\n\n\n## 🔨 Build\n\nTo compile and build your C++ code with GoatUI, follow these steps:\n\n1. Run the following command in your terminal:\n\n```sh\nem++ (ADD SOURCE FILES HERE) -s WASM=1 -o ./dist/main.js -s EXPORTED_RUNTIME_METHODS='[\\\"getValue\\\",\\\"ccall\\\"]' -s NO_EXIT_RUNTIME=1 -s DEFAULT_LIBRARY_FUNCS_TO_INCLUDE='$stringToNewUTF8' -sASYNCIFY -Wno-non-pod-varargs -s EXPORTED_FUNCTIONS=[\\\"_callEventListener\\\",\\\"_callEventListenerWithValue\\\"] -fexceptions\n```\n\nReplace `(ADD SOURCE FILES HERE)` with any additional source files your project requires ex: `main.cpp`\n\n2. This command will generate the necessary output in the `./dist` directory.\n\n3. You can then upload the contents of the `./dist` folder to any static hosting service to run your application.\n\n## 📜 License\n\nGoatUI is licensed under the [MIT License](LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flehuyh%2Fgoatui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flehuyh%2Fgoatui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flehuyh%2Fgoatui/lists"}