{"id":18338614,"url":"https://github.com/noxware/hframe","last_synced_at":"2025-06-11T15:36:27.014Z","repository":{"id":224396585,"uuid":"763149259","full_name":"noxware/hframe","owner":"noxware","description":"Show HTML content \"inside\" your egui rendered application","archived":false,"fork":false,"pushed_at":"2025-03-06T21:45:45.000Z","size":923,"stargazers_count":18,"open_issues_count":6,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-21T18:01:45.899Z","etag":null,"topics":["egui","rust","rust-lang","wasm","web","webassembly","webview"],"latest_commit_sha":null,"homepage":"","language":"Rust","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/noxware.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":"2024-02-25T17:28:12.000Z","updated_at":"2025-03-12T02:36:04.000Z","dependencies_parsed_at":"2024-07-24T01:30:46.497Z","dependency_job_id":"8a43ebf5-4cc4-40e1-8f91-515406b743d3","html_url":"https://github.com/noxware/hframe","commit_stats":null,"previous_names":["noxware/hframe"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxware%2Fhframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxware%2Fhframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxware%2Fhframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxware%2Fhframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noxware","download_url":"https://codeload.github.com/noxware/hframe/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247440346,"owners_count":20939221,"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":["egui","rust","rust-lang","wasm","web","webassembly","webview"],"created_at":"2024-11-05T20:14:43.416Z","updated_at":"2025-04-06T05:31:46.901Z","avatar_url":"https://github.com/noxware.png","language":"Rust","funding_links":[],"categories":[],"sub_categories":[],"readme":"# hframe ![License](https://img.shields.io/badge/License-MIT%2FApache%202.0-blue) [![CI](https://github.com/noxware/hframe/actions/workflows/rust.yml/badge.svg)](https://github.com/noxware/hframe/actions/workflows/rust.yml) [![Crates.io Version](https://img.shields.io/crates/v/hframe)](https://crates.io/crates/hframe)\n\nShow HTML content \"inside\" your [egui](https://github.com/emilk/egui) rendered application. \"hframe\" stands for \"HTML Frame\".\n\n\u003e **💡 Note:** `hframe` only works when the application is compiled to WebAssembly and run in a browser. But you can still make a desktop up by leveraging [Tauri](https://tauri.app/).\n\u003e\n\u003e [egui-tauri-template](https://github.com/noxware/egui-tauri-template)\n\u003e will serve as good foundation if you need to target both platforms.\n\n\u003e **⚠️ Warning:**: If you experience type mismatches, please ensure hframe is\n\u003e using the same egui version you are using by checking your `Cargo.lock` file.\n\u003e This errors may happen if you try to upgrade your egui version while hframe\n\u003e is still using types from your older version.\n\n## Simple example\n\n```rust\nuse hframe::Aware;\n\nconst IFRAME: \u0026str = r#\"\n\u003ciframe src=\"https://www.example.com/\"\u003e\u003c/iframe\u003e\n\"#;\n\npub struct App;\n\nimpl App {\n    pub fn new(cc: \u0026eframe::CreationContext\u003c'_\u003e) -\u003e Self {\n        Self\n    }\n}\n\nimpl eframe::App for App {\n    fn update(\u0026mut self, ctx: \u0026egui::Context, _frame: \u0026mut eframe::Frame) {\n        egui::Window::new(\"Egui Rendered Window\")\n            .show(ctx, |ui| {\n                ui.centered_and_justified(|ui| {\n                    ui.label(\"This window can be shown on top of the iframe thanks to `.aware()`\");\n                });\n            })\n            .aware();\n\n        hframe::HtmlWindow::new(\"Iframe Window\").content(IFRAME).show(ctx);\n\n        hframe::sync(ctx);\n    }\n}\n```\n\nFor a more complete example see [demo's app.rs](https://github.com/noxware/hframe/blob/master/examples/demo/src/app.rs).\n\n## Running the demo\n\n\u003e Ensure you have `trunk` installed with `cargo install --locked trunk`.\n\n```\ngit clone https://github.com/noxware/hframe\ncd hframe/examples/demo\ntrunk serve --open\n```\n\n## Screenshot\n\n![Screenshot](https://github.com/noxware/hframe/assets/7684329/bde21df4-697c-4255-b2c5-732d5b72ea0b)\n\n## How does it work?\n\n`hframe` renders the HTML content on top of the canvas where `egui` is rendering. Web content is absolute positioned following specifc areas of the canvas. To be\nabale to show egui windows on top of the HTML content, `hframe` uses different set\nof HTML masking/cliping techniques combined with other smart logic to produce the\nillusion of the HTML content being \"inside\" the egui rendered application.\n\nThis approach has been chosen after many experiments with alternative techniques\nwhich were not able to provide the same level of integration and flexibility.\n\nAdditionally, some tracking is performed to provide an immediate mode like public\nAPI. HTML will only be re-rendered if you change the initially provided content. This\ncan be useful if you want to change the HTML content in a controlled and reactive\nmanner without giving up the immediate mode API.\n\n## Limitations\n\n- The current implementation assumes that the canvas takes the whole screen and\n  it is not scaled. The default configuration of the [eframe_template](https://github.com/emilk/eframe_template) will work.\n- Currently the API only provides a way to create egui windows with HTML \"inside\"\n  but doesn't provide a way to put bare HTML content in other places.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoxware%2Fhframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoxware%2Fhframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoxware%2Fhframe/lists"}