Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webui-dev/odin-webui
Use any web browser as GUI, with Odin in the backend and modern web technologies in the frontend.
https://github.com/webui-dev/odin-webui
cross-platform gui library linux macos odin windows
Last synced: 18 days ago
JSON representation
Use any web browser as GUI, with Odin in the backend and modern web technologies in the frontend.
- Host: GitHub
- URL: https://github.com/webui-dev/odin-webui
- Owner: webui-dev
- License: mit
- Created: 2023-10-27T04:15:01.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-02T17:07:41.000Z (about 1 month ago)
- Last Synced: 2024-11-02T18:19:25.100Z (about 1 month ago)
- Topics: cross-platform, gui, library, linux, macos, odin, windows
- Language: Odin
- Homepage:
- Size: 61.5 KB
- Stars: 19
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-odin - WebUI - dev/webui), use your preferred language in the backend and modern web technologies in the frontend | [MIT](https://github.com/webui-dev/odin-webui/blob/main/LICENSE) | UI, Cross Platform (Bindings / Vendor)
- awesome-odin - WebUI - dev/webui), use your preferred language in the backend and modern web technologies in the frontend | [MIT](https://github.com/webui-dev/odin-webui/blob/main/LICENSE) | UI, Cross Platform (Bindings / Vendor)
README
# Odin-WebUI
[build-status]: https://img.shields.io/github/actions/workflow/status/webui-dev/odin-webui/ci.yml?branch=main&style=for-the-badge&logo=githubactions&labelColor=414868&logoColor=C0CAF5
[last-commit]: https://img.shields.io/github/last-commit/webui-dev/odin-webui?style=for-the-badge&logo=github&logoColor=C0CAF5&labelColor=414868
[release-version]: https://img.shields.io/github/v/tag/webui-dev/odin-webui?style=for-the-badge&logo=webtrees&logoColor=C0CAF5&labelColor=414868&color=7664C6
[license]: https://img.shields.io/github/license/webui-dev/odin-webui?style=for-the-badge&logo=opensourcehardware&label=License&logoColor=C0CAF5&labelColor=414868&color=8c73cc
[![][build-status]](https://github.com/webui-dev/odin-webui/actions?query=branch%3Amain)
[![][last-commit]](https://github.com/webui-dev/odin-webui/pulse)
[![][release-version]](https://github.com/webui-dev/odin-webui/releases/latest)
[![][license]](https://github.com/webui-dev/odin-webui/blob/main/LICENSE)
> Use any web browser or WebView as GUI.\
> With Odin in the backend and modern web technologies in the frontend.
## Usage
> **Note**
> Odin-WebUI is under development and is currently only tested on macOS and Linux.
### Setup as a submodule in your Odin project
Add odin-webui as a submodule in your Odin git project:
```sh
git submodule add https://github.com/webui-dev/odin-webui.git webui
webui/setup.sh
```
Import the package using the relative path
```odin
import ui "webui"
```
toggle Full example creating a project and adding odin-webui as a submodule.
```sh
mkdir my_proj && cd my_proj
git init
git submodule add https://github.com/webui-dev/odin-webui.git webui
# Setup the WebUI C library.
weubi/setup.sh
# Create a the main file for the project. And use it in the next step.
touch main.odin
```
```odin
// main.odin
package main
import ui "webui"
main :: proc() {
w := ui.new_window()
ui.show(w, "Thanks for using WebUI!")
ui.wait()
}
```
### Setup as regular git clone
_This approach can be useful for quick testing and for development and contribution purposes._
1. Clone the repository
```sh
git clone https://github.com/webui-dev/odin-webui.git
```
2. Setup the WebUI C library
```sh
cd odin-webui
# Setup the WebUI C library.
./setup.sh
```
## Example - Call Odin from JavaScript
```odin
package main
import "base:runtime"
import ui "webui"
import "core:fmt"
UI :: `
body {
background: linear-gradient(to left, #36265a, #654da9);
color: AliceBlue;
font: 16px sans-serif;
text-align: center;
}
Thanks for using WebUI!
Call Odin!
Exit
`
// Odin function used as bind callback.
my_odin_func :: proc "c" (e: ^ui.Event) {
context := runtime.default_context()
str_arg := ui.get_arg(string, e)
fmt.printf("JS argument: %s\n", str_arg)
}
main :: proc() {
w := ui.new_window()
ui.bind(w, "my_odin_func", my_odin_func)
// Bind to an ID with a click event.
ui.bind(w, "exit", proc "c" (_: ^ui.Event) {
context := runtime.default_context()
fmt.println("Bye!")
ui.exit()
})
ui.show(w, UI)
ui.wait()
}
```
Running exmples from the [`examples`](https://github.com/webui-dev/odin-webui/tree/main/examples) directory:
```
odin run examples/call_odin.odin -file
```
### Debugging
To use WebUI's debug build in your Odin-WebUI application, add the `-debug` switch. E.g.:
```sh
odin run examples/minimal.odin -file -debug
```
## About WebUI
[Borislav Stanimirov](https://ibob.bg/) discusses using HTML5 in the web browser as GUI at the [C++ Conference 2019 (_YouTube_)](https://www.youtube.com/watch?v=bbbcZd4cuxg).
Web application UI design is not just about how a product looks but how it works. Using web technologies in your UI makes your product modern and professional, And a well-designed web application will help you make a solid first impression on potential customers. Great web application design also assists you in nurturing leads and increasing conversions. In addition, it makes navigating and using your web app easier for your users.
### Why Use Web Browsers?
Today's web browsers have everything a modern UI needs. Web browsers are very sophisticated and optimized. Therefore, using it as a GUI will be an excellent choice. While old legacy GUI lib is complex and outdated, a WebView-based app is still an option. However, a WebView needs a huge SDK to build and many dependencies to run, and it can only provide some features like a real web browser. That is why WebUI uses real web browsers to give you full features of comprehensive web technologies while keeping your software lightweight and portable.
### How Does it Work?
Think of WebUI like a WebView controller, but instead of embedding the WebView controller in your program, which makes the final program big in size, and non-portable as it needs the WebView runtimes. Instead, by using WebUI, you use a tiny static/dynamic library to run any installed web browser and use it as GUI, which makes your program small, fast, and portable. **All it needs is a web browser**.
### Runtime Dependencies Comparison
| | WebView | Qt | WebUI |
| ------------------------------- | ----------------- | -------------------------- | ------------------- |
| Runtime Dependencies on Windows | _WebView2_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
| Runtime Dependencies on Linux | _GTK3, WebKitGTK_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
| Runtime Dependencies on macOS | _Cocoa, WebKit_ | _QtCore, QtGui, QtWidgets_ | **_A Web Browser_** |
## Wrappers
| Language | Status | Link |
| ----------------------- | -------------- | --------------------------------------------------------- |
| Go | ✔️ | [Go-WebUI](https://github.com/webui-dev/go-webui) |
| Nim | ✔️ | [Nim-WebUI](https://github.com/webui-dev/nim-webui) |
| Pascal | ✔️ | [Pascal-WebUI](https://github.com/webui-dev/pascal-webui) |
| Python | ✔️ | [Python-WebUI](https://github.com/webui-dev/python-webui) |
| Rust | _not complete_ | [Rust-WebUI](https://github.com/webui-dev/rust-webui) |
| TypeScript / JavaScript | ✔️ | [Deno-WebUI](https://github.com/webui-dev/deno-webui) |
| V | ✔️ | [V-WebUI](https://github.com/webui-dev/v-webui) |
| Zig | _not complete_ | [Zig-WebUI](https://github.com/webui-dev/zig-webui) |
## Supported Web Browsers
| Browser | Windows | macOS | Linux |
| --------------- | --------------- | ------------- | --------------- |
| Mozilla Firefox | ✔️ | ✔️ | ✔️ |
| Google Chrome | ✔️ | ✔️ | ✔️ |
| Microsoft Edge | ✔️ | ✔️ | ✔️ |
| Chromium | ✔️ | ✔️ | ✔️ |
| Yandex | ✔️ | ✔️ | ✔️ |
| Brave | ✔️ | ✔️ | ✔️ |
| Vivaldi | ✔️ | ✔️ | ✔️ |
| Epic | ✔️ | ✔️ | _not available_ |
| Apple Safari | _not available_ | _coming soon_ | _not available_ |
| Opera | _coming soon_ | _coming soon_ | _coming soon_ |
### Stargazers
[](https://github.com/webui-dev/odin-webui/stargazers)
### License
> Licensed under the MIT License.