{"id":13698721,"url":"https://github.com/ZhUyU1997/MEUI","last_synced_at":"2025-05-04T03:32:03.571Z","repository":{"id":39662397,"uuid":"483238937","full_name":"ZhUyU1997/MEUI","owner":"ZhUyU1997","description":"Modern embedded UI 现代嵌入式用户界面","archived":false,"fork":false,"pushed_at":"2023-02-11T16:23:13.000Z","size":5860,"stargazers_count":55,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T18:55:44.658Z","etag":null,"topics":["embedded","gui","meui","preact","preactjs","quickjs","react","react-spring","reactjs"],"latest_commit_sha":null,"homepage":"https://zhuyu1997.github.io/MEUI/","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/ZhUyU1997.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}},"created_at":"2022-04-19T12:33:48.000Z","updated_at":"2024-11-21T11:44:35.000Z","dependencies_parsed_at":"2024-04-08T03:01:14.625Z","dependency_job_id":null,"html_url":"https://github.com/ZhUyU1997/MEUI","commit_stats":{"total_commits":358,"total_committers":2,"mean_commits":179.0,"dds":"0.019553072625698276","last_synced_commit":"8e4e7cf65a6823939bf0e2946f40da351d4fc0a6"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhUyU1997%2FMEUI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhUyU1997%2FMEUI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhUyU1997%2FMEUI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZhUyU1997%2FMEUI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZhUyU1997","download_url":"https://codeload.github.com/ZhUyU1997/MEUI/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251719394,"owners_count":21632669,"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":["embedded","gui","meui","preact","preactjs","quickjs","react","react-spring","reactjs"],"created_at":"2024-08-02T19:00:52.216Z","updated_at":"2025-05-04T03:31:58.560Z","avatar_url":"https://github.com/ZhUyU1997.png","language":"C","funding_links":[],"categories":["C"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"docs/MEUI_logo.svg\"\u003e\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eMEUI\u003c/h1\u003e \n\u003ch3 align=\"center\"\u003eA modern embedded UI library giving your extraordinary development experience\u003ch3\u003e\n\u003ch3 align=\"center\"\u003e现代嵌入式用户界面库，非凡的开发体验\u003ch3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/ZhUyU1997/MEUI/actions/workflows/node.js.yml\"\u003e\u003cimg src=\"https://github.com/ZhUyU1997/MEUI/actions/workflows/node.js.yml/badge.svg\" alt=\"build status\"\u003e\u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/ZhUyU1997/MEUI\"\u003e\n  \u003cimg src=\"https://img.shields.io/github/license/ZhUyU1997/MEUI\"\u003e\n\u003c/p\u003e\n\n`MEUI` is a modern ui library for embedded platform based on `quickjs` and `React.js`\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/2048.png\" width=\"150\"\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/nes.png\" width=\"150\"\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/signin.png\" width=\"150\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/file-explorer.png\" height=\"250\"\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/whatsapp.png\" height=\"250\"\u003e\n  \u003cimg src=\"https://zhuyu1997.github.io/MEUI-page/assets/scientific-calculator.png\" height=\"250\"\u003e\n\u003c/p\u003e\n\n## [Example](examples/hello/index.jsx)\n\n```jsx\nimport { createRoot } from \"@meui-js/preact\"\nimport { useState } from \"preact/compat\"\nimport { animated, useSpring } from \"@meui-js/spring\"\n\nfunction App() {\n    const styles = useSpring({\n        loop: true,\n        from: { rotateZ: 0 },\n        to: { rotateZ: 360 },\n    })\n\n    const [text, setText] = useState(\"Hello MEUI!\")\n\n    return (\n        \u003canimated.View\n            style={{\n                width: 120,\n                height: 120,\n                backgroundColor: \"#46e891\",\n                borderRadius: 16,\n                textAlign: \"center\",\n                ...styles,\n            }}\n            onClick={() =\u003e {\n                setText(\"Hello MEUI!\\nHello React!\")\n            }}\n        \u003e\n            {text}\n        \u003c/animated.View\u003e\n    )\n}\n\ncreateRoot(300, 300).render(\u003cApp /\u003e)\n```\n\n## [Browser Demo](https://zhuyu1997.github.io/MEUI/)\n\n## Features\n\n-   Support `React.js` to build UI\n-   Support `flex` layout\n-   Support partical `css` style\n-   Support `Material Design Icons`\n-   Support `React Spring` to build animation\n-   Support `ES2020`\n-   Support `canvas` api\n\n## Getting Started\n\n### [Install Xmake](https://xmake.io/#/getting_started?id=installation)\n\n### Windows\n\n-   #### Download and Install below packages\n\n    [Nodejs 16.x](https://nodejs.org/en/)\n\n    [MinGW-w64 x86_64-posix-seh-rt](https://github.com/niXman/mingw-builds-binaries/releases)\n\n    [SDL2-devel-mingw](https://github.com/libsdl-org/SDL/releases/)\n\n-   #### Add `MinGW` into Environment Variables\n\n-   #### Copy the `SDL2` files to `MinGW`\n\n    ```\n    [path to SDL2]\\x86_64-w64-mingw32 =\u003e [path to MinGW]\\x86_64-w64-mingw32\n    ```\n\n### Ubuntu/WSLg\n\n-   #### Install `Node.js`\n\n    ```sh\n    cd ~\n    curl -sL https://deb.nodesource.com/setup_16.x | sudo bash -\n    sudo apt -y install nodejs\n    node -v\n    ```\n\n-   #### Install `GCC` \u0026 `Make`\n\n    ```sh\n    sudo apt install gcc make\n    ```\n\n### Mac OS\n\n-   #### [Install NVM](https://github.com/nvm-sh/nvm)\n-   #### Install `Node.js`\n    ```sh\n    nvm install node\n    node -v\n    ```\n\n### Build \u0026 Run MEUI\n\n```sh\ncorepack enable\nxmake f --backend=sdl2-core # Only for windows/macos\npnpm add -g pnpm # install the latest pnpm\npnpm install\npnpm build:all\npnpm run:examples\n```\n\nRun other examples\n\n```sh\npnpm build:examples src/2048/index.tsx\npnpm run:examples\n```\n\n## API References\n\n### CSS Style\n\n```typescript\nexport interface MeuiStyle {\n    borderRadius?: [number, number, number, number] | number\n    borderColor?: string\n    backgroundColor?: Property.BackgroundColor\n    fontColor?: Property.Color\n    text?: string\n    fontSize?: number\n    fontFamily?: string\n    textAlign?:\n        | \"center-left\"\n        | \"center-right\"\n        | \"center\"\n        | \"top-left\"\n        | \"top-right\"\n        | \"top-center\"\n        | \"bottom-left\"\n        | \"bottom-right\"\n        | \"bottom-center\"\n    backgroundImage?: string\n    contentImage?: string\n    transform?: string\n    transformOrigin?:\n        | [number, number]\n        | [\"left\" | \"center\" | \"right\", \"top\" | \"center\" | \"bottom\"]\n    flexWrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\"\n    flexDirection?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\n    alignItems?: \"stretch\" | \"flex-start\" | \"center\" | \"flex-end\" | \"baseline\"\n    alignSelf?:\n        | \"auto\"\n        | \"stretch\"\n        | \"flex-start\"\n        | \"center\"\n        | \"flex-end\"\n        | \"baseline\"\n    alignContent?:\n        | \"stretch\"\n        | \"flex-start\"\n        | \"center\"\n        | \"flex-end\"\n        | \"space-between\"\n        | \"space-around\"\n    justifyContent?:\n        | \"flex-start\"\n        | \"center\"\n        | \"flex-end\"\n        | \"space-between\"\n        | \"space-around\"\n    margin?: [number, number, number, number] | number\n    border?: [number, number, number, number] | number\n    padding?: [number, number, number, number] | number\n    overflow?: \"visible\" | \"hidden\" | \"scroll\" | \"auto\"\n\n    flexBasis?: number\n    flexGrow?: number\n    flexShrink?: number\n    width?: Length\n    height?: Length\n    minWidth?: Length\n    minHeight?: Length\n    maxWidth?: Length\n    maxHeight?: Length\n    marginLeft?: Length\n    marginTop?: Length\n    marginBottom?: Length\n    marginRight?: Length\n    marginStart?: Length\n    marginEnd?: Length\n    paddingLeft?: Length\n    paddingTop?: Length\n    paddingBottom?: Length\n    paddingRight?: Length\n    paddingStart?: Length\n    paddingEnd?: Length\n    borderLeft?: number\n    borderTop?: number\n    borderBottom?: number\n    borderRight?: number\n    borderStart?: number\n    borderEnd?: number\n    borderTopLeftRadius?: number\n    borderTopRightRadius?: number\n    borderBottomRightRadius?: number\n    borderBottomLeftRadius?: number\n    left?: Length\n    right?: Length\n    top?: Length\n    bottom?: Length\n    zIndex?: number\n    FOCUS?: MeuiStyle\n    ACTIVE?: MeuiStyle\n    HOVER?: MeuiStyle\n    SELECT?: MeuiStyle\n    DISABLE?: MeuiStyle\n    CHECK?: MeuiStyle\n}\n```\n\n## Canvas API\n\n`arc` `arcTo` `beiginPath` `bezierCurveTo` `createRadialGradient` `createLinearGradient` `clearRect` `clip` `closePath` `ellipse` `fill` `fillRect` `fillText` `font` `getImageData` `getTransform` `lineCap` `lineDashOffset` `lineJoin` `lineWidth` `measureText` `Path2D` `putImageData` `quadraticCurveTo` `resetTransform` `rotate` `save` `scale` `setLineDash` `setTransform` `strokeRect` `strokeText` `textAlign` `textBaseline` `transform` `translate`\n\n## Discussion Group\n\nTencent QQ Group: [765228998](https://jq.qq.com/?_wv=1027\u0026k=LjX7RmEe)\n\n## References\n\n-   QuickJS Javascript Engine. Available at:\n\n    https://bellard.org/quickjs/\n\n-   PlutoVG is a standalone 2D vector graphics library in C. Available at:\n\n    https://github.com/sammycage/plutovg\n\n-   React: A JavaScript library for building user interfaces. Available at:\n\n    https://reactjs.org/\n\n-   react-spring: A spring-physics first animation library. Available at:\n\n    https://react-spring.io/\n\n-   `FlexLayout` is an `C` implementation of `Flexible Box` layout. Available at:\n\n    https://github.com/Sleen/FlexLayout\n\n-   single-file public domain (or MIT licensed) libraries for C/C++. Available at:\n\n    https://github.com/nothings/stb\n\n-   Templated type-safe hashmap implementation in C. Available at:\n\n    https://github.com/DavidLeeds/hashmap\n\n-   `libpqueue` is a generic priority queue (heap) implementation. Available at:\n\n    https://github.com/vy/libpqueue\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZhUyU1997%2FMEUI","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZhUyU1997%2FMEUI","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZhUyU1997%2FMEUI/lists"}