# Freya π¦
<a href="https://freyaui.dev/"><img align="right" src="logo.svg" alt="Freya logo" width="150"/></a>
[](https://discord.gg/sYejxCdewG)
[](https://github.com/sponsors/marc2332)
[](https://codecov.io/github/marc2332/freya)
**Freya** is a **cross-platform and non-web** GUI library for Rust powered by π¨ [Skia](https://skia.org/).
- [Introduction](https://docs.rs/freya/0.3/freya/_docs/introduction/index.html)
- [Development Setup](https://docs.rs/freya/0.3/freya/_docs/development_setup/index.html)
- [Documentation](https://docs.rs/freya/0.3/freya)
- [Differences with Dioxus](#differences-with-dioxus)
- [Contributing](#contributing-%EF%B8%8F)
- [Support Development](#support-)
#### Counter example
<table>
<tr>
<td style="border:hidden;">
```rust
fn app() -> Element {
let mut count = use_signal(|| 0);
rsx!(
rect {
height: "50%",
width: "100%",
main_align: "center",
cross_align: "center",
background: "rgb(0, 119, 182)",
color: "white",
shadow: "0 4 20 5 rgb(0, 0, 0, 80)",
label {
font_size: "75",
font_weight: "bold",
"{count}"
}
}
rect {
height: "50%",
width: "100%",
main_align: "center",
cross_align: "center",
direction: "horizontal",
Button {
onclick: move |_| count += 1,
label { "Increase" }
}
Button {
onclick: move |_| count -= 1,
label { "Decrease" }
}
}
)
}
```
</td>
<td style="border:hidden;">
</td>
</table>
#### Website example
This is Freya's website landing page made with Freya itself:
[Source code](/examples/website.rs).
#### Animation example
An animated drag and drop.
[Source code](/examples/drag_drop.rs).
#### Animated router example
Animated transition between router pages.
[Source code](/examples/animated_tabs.rs.rs).
<details>
<summary>More Examples</summary>
#### Valin Code Editor
[Valin](https://github.com/marc2332/valin) βοΈ is a Work-In-Progress cross-platform code editor, made with Freya π¦ and Rust, by me.
#### Switch Theme example
[Source code](/examples/switch_theme.rs.rs).
#### Todo example
[Source code](/examples/todo.rs.rs).
#### Resizable containers example
[Source code](/examples/resizable_containers.rs.rs).
</details>
### Want to try it? π€
Make sure to have [Development Setup](https://docs.rs/freya/0.3/freya/_docs/development_setup/index.html) ready.
> β οΈ If you happen to be on Windows using `windows-gnu` and get compile errors, maybe go check this [issue](https://github.com/marc2332/freya/issues/794).
Clone this repo and run:
```shell
cargo run --example counter
```
You can also try [`freya-template`](https://github.com/marc2332/freya-template)
### Usage π
Add Freya and Dioxus as dependencies:
```toml
freya = "0.3"
dioxus = { version = "0.6", features = ["macro", "hooks"], default-features = false }
```
### Contributing π§ββοΈ
If you are interested in contributing please make sure to have read the [Contributing](CONTRIBUTING.md) guide first!
### Features β¨
- βοΈ Built-in **components** (button, scroll views, switch and more)
- π Built-in **hooks** (animations, text editing and more)
- π Built-in **developer tools** (tree inspection, fps overlay)
- π§° Built-in **headless runner** to test UI
- π¨ **Theming** support
- π©οΈ **Cross-platform** (Windows, Linux, MacOS)
- πΌοΈ SKSL **Shaders** support
- π Multi-line **text editing**
- π¦Ύ **Accessibility** support
- 𧩠Compatible with dioxus-sdk and other Dioxus renderer-agnostic libraries
### Goals π
- Performant and low memory usage
- Good developer experience
- Cross-platform support
- Decent Accessibility support
- Useful testing APIs
- Useful and extensible built-in components and hooks
### Differences with Dioxus
**Freya** uses some of the **core** crates from Dioxus. This means that you will effectively be creating Dioxus components using RSX and hooks.
However, thanks to Dioxus being a renderer-agnostic library, you and your app will **NOT** be using Webviews, JavaScript, HTML, CSS, or any other abstraction that ends up using one of those or other web technologies.
Freya does everything on its own when it comes to:
- Elements
- Styling
- Layout
- Events
- Rendering
- Testing
- Built-in components and hooks
- Editing
- Animating
...and more. Dioxus is only used for managing app components (hooks, lifecycle, state, RSX), while **everything else is managed by Freya**.
**Freya is not meant to be a drop-in alternative to Dioxus renderers but a GUI library on its own.**
Below is a comparison of the main differences between Freya and the official Dioxus renderers for Desktop (WebView and Blitz):
| **Elements, attributes, and events** | Custom | HTML |
| **Layout** | Custom ([`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin)) | CSS or [`Taffy`](https://github.com/DioxusLabs/taffy) |
| **Styling** | Custom | CSS |
| **Renderer** | Skia | WebView or WGPU |
| **Components library** | Custom ([`freya-components`](https://github.com/marc2332/freya/tree/main/crates/components)) | None, but can use HTML elements and CSS libraries |
| **Devtools** | Custom ([`freya-devtools`](https://github.com/marc2332/freya/tree/main/crates/devtools)) | Provided in WebView |
| **Headless testing runner** | Custom ([`freya-testing`](https://github.com/marc2332/freya/tree/main/crates/testing)) | None, but tools like Playwright and similar are available |
### Support π€
If you are interested in supporting the development of this project feel free to donate to my [Github Sponsor](https://github.com/sponsors/marc2332/) page.
Thanks to my sponsors for supporting this project! π
<a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="User avatar: " /></a><a href="https://github.com/gqf2008"><img src="https://github.com/gqf2008.png" width="60px" alt="User avatar: ι«εΊδΈ°" /></a><a href="https://github.com/lino-levan"><img src="https://github.com/lino-levan.png" width="60px" alt="User avatar: Lino Le Van" /></a>
### Special thanks πͺ
- [Jonathan Kelley](https://github.com/jkelleyrtp) and [Evan Almloff](https://github.com/ealmloff) for making [Dioxus](https://dioxuslabs.com/) and all their help, specially when I was still creating Freya.
- [Armin](https://github.com/pragmatrix) for making [rust-skia](https://github.com/rust-skia/rust-skia/) and all his help and making the favor of hosting prebuilt binaries of skia for the combo of features use by Freya.
- [geom3trik](https://github.com/geom3trik) for helping me figure out how to add incremental rendering.
- [Tropical](https://github.com/Tropix126) for this contributions to improving accessibility and rendering.
- [Aiving](https://github.com/Aiving) for having made heavy contributions to [rust-skia](https://github.com/rust-skia/rust-skia/) for better SVG support, and helped optimizing images rendering in Freya.
- [RobertasJ](https://github.com/RobertasJ) for having added nested parenthesis to the `calc()` function and also pushed for improvements in the animation APIs.
- And to the rest of contributors and anybody who gave me any kind of feedback!
### License
[MIT License](./LICENSE.md)