{"id":16384828,"url":"https://github.com/marcj/pesto","last_synced_at":"2025-03-21T02:31:01.014Z","repository":{"id":66158465,"uuid":"157877227","full_name":"marcj/Pesto","owner":"marcj","description":"Pesto is a high-performance GUI framework in C++ highly inspired by CSS and HTML, using Skia as rendering engine.","archived":false,"fork":false,"pushed_at":"2019-10-07T12:45:50.000Z","size":176,"stargazers_count":73,"open_issues_count":1,"forks_count":21,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-01T01:51:13.631Z","etag":null,"topics":["cpp","cpp17","gui","opengl"],"latest_commit_sha":null,"homepage":"","language":"C++","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/marcj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":"marcj"}},"created_at":"2018-11-16T14:19:32.000Z","updated_at":"2025-01-09T14:45:44.000Z","dependencies_parsed_at":"2023-02-21T08:30:59.850Z","dependency_job_id":null,"html_url":"https://github.com/marcj/Pesto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2FPesto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2FPesto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2FPesto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcj%2FPesto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcj","download_url":"https://codeload.github.com/marcj/Pesto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244102712,"owners_count":20398386,"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","cpp17","gui","opengl"],"created_at":"2024-10-11T04:12:40.268Z","updated_at":"2025-03-21T02:31:00.625Z","avatar_url":"https://github.com/marcj.png","language":"C++","readme":"# Pesto GUI\n\n\nWORK IN PROGRESS.\n\nPesto is a high-performance GUI framework in C++ highly inspired by CSS and HTML,\nusing Skia as rendering engine.\n\nIt's based on\n\n  - Clang (so ready for WebAssembly)\n  - C++17\n  - Cmake\n  - SDL2\n\n\n## Example\n\n![Example screenshot](https://raw.github.com/marcj/Pesto/master/docs/assets/screenot-example_absolute.png)\n\n```c++\n#import \"pesto/Base.h\"\n#import \"pesto/Window.h\"\n#import \"pesto/Application.h\"\n#import \"pesto/Element.h\"\n\n#include \u003ciostream\u003e\n#include \u003cstring\u003e\n\nint main(int argc, char **argv) {\n    for (auto arg = argv; *arg; arg++) {\n        printf(\"%s\\n\", *arg);\n    }\n\n    auto *application = new Pesto::Application;\n    Pesto::utils::setupErrorListener();\n\n    // language=HTML\n    std::string xml = u8R\"(\n\u003cstyle\u003e\n.left {\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    width: 245px;\n    bottom: 5px;\n    padding: 5px;\n    background-color: #eee;\n}\n\nsidebar-splitter {\n    position: absolute;\n    right: 0px;\n    top: 0;\n    width: 3px;\n    bottom: 0;\n    background-color: black;\n}\n\ncontent {\n    position: absolute;\n    left: 250px;\n    padding: 5px;\n    top: 5px;\n    right: 55px;\n    bottom: 5px;\n    background-color: #bbb;\n}\n\n.right {\n    position: absolute;\n    width: 50px;\n    background: red;\n    top: 5px;\n    right: 5px;\n    bottom: 5px;\n}\n\n#footer {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0px;\n    height: 50px;\n    background: gray;\n    color: white;\n}\n\u003c/style\u003e\n\u003cdiv class=\"left\"\u003e\n    Hello Sidebar\n    \u003csidebar-splitter\u003e\n    \u003c/sidebar-splitter\u003e\n\u003c/div\u003e\n\u003ccontent\u003e\n    \u003cdiv id=\"content\" cacheRender=\"true\"\u003e\n        Hello Content\n    \u003c/div\u003e\n\n    \u003cbutton\u003eButton 1\u003c/button\u003e\n    \u003cbutton\u003eButton 2\u003c/button\u003e\n    \u003cdiv\u003e\n        Hello!\n    \u003c/div\u003e\n\n    \u003cdiv id=\"footer\"\u003e\n        Hello Footer\n    \u003c/div\u003e\n\u003c/content\u003e\n\u003cdiv class=\"right\"\u003e\n\u003c/div\u003e\n)\";\n\n    auto *window = application-\u003ecreateWindow(xml);\n    window-\u003esetSize(600, 400);\n\n    std::cout \u003c\u003c window-\u003edocument-\u003etoString();\n\n    printf(\"Started\\n\");\n\n    auto content = window-\u003edocument-\u003equeryOne(\"#content\");\n    unsigned int counter = 0;\n\n    application-\u003eaddAnimationFrameCallback([\u0026](float diff) {\n        content-\u003esetText(std::string(\"Hi #\").append(std::to_string(counter++)));\n    });\n\n    application-\u003eloop();\n\n    printf(\"Done\\n\");\n    return 0;\n}\n```\n\n### Supported CSS\n\n```\n    - position: absolute | relative | static\n    - left, top, right, bottom in px and %\n    - width, height in px and %\n    - overflow: auto | scroll | hidden | visible\n    - text-align: left | center | right\n    - vertical-align: left | middle | right\n    - display: block | inline\n    - border, border-left, border-right, border-top\n    - border-radius, border-top-left-radius, etc\n    - padding, padding-left, padding-right, padding-top, padding-right\n    - margin, margin-left, margin-right, margin-top, margin-right\n    - max-width, max-height\n    - min-width, min-height\n    - font-family\n    - line-height\n    - font-size\n    - font-weight\n    - color: hex, rgba, etc\n    - white-space: pre | pre-wrap | pre-line | nowrap\n    - background-color\n```\n\n## Install dependencies\n\n### Build Skia\n```\ngit submodule init\nexport PATH=\"${PWD}/libs/depot_tools:${PATH}\"\n\ncd libs/skia\npython tools/git-sync-deps\nbin/gn gen out/Clang --args='is_official_build=true cc=\"clang\" cxx=\"clang++\" skia_use_dng_sdk=false skia_use_sfntly=false skia_use_libwebp=false'\n\n# bin/gn gen out/ClangO2 --args='is_official_build=true is_debug=false extra_cflags=[\"-O2\"] cc=\"/usr/local/Cellar/llvm@5/5.0.1/bin/clang\" cxx=\"/usr/local/Cellar/llvm@5/5.0.1/bin/clang++\" skia_use_dng_sdk=false skia_use_sfntly=false skia_use_libwebp=false'\n\nninja -C out/ClangO\n```\n\n\n### OSX\n\nMake sure to install on OSX `libjpeg-turbo`, `webp`, `icu4c`, `sdl2` via brew.\n\n```\nbrew install libjpeg-turbo webp icu4c\n```\n\nOn OSX it's important to make libjpeg-turbo headers available to standard include path (which overwrite default `libjpeg`),\nso use `brew link --force --overwrite libjpeg-turbo`.\n\nSame with icu4c, so call `brew link icu4c --force`.\n\n## Use it\n\nUse Cmake to build examples or pesto as library and include it in your project.\nCLion works perfectly fine ;)\n\n\n```\ncmake --build ./src/pesto/cmake-build-debug --target pesto_demo_example_absolute -- -j 6\n\n./src/pesto/cmake-build-debug/demo/pesto_demo_example_absolute\n```\n\n\n### WebAssembly\n\nTBD\n\n1. Apply patch\n - https://bugs.chromium.org/p/skia/issues/detail?id=8041#c12\n - https://github.com/Zubnix/skia-wasm-port/blob/master/wasm_compatible_build.patch","funding_links":["https://github.com/sponsors/marcj"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fpesto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcj%2Fpesto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcj%2Fpesto/lists"}