Tessera is a cross-platform UI library focused on performance and extensibility.
Features
- Simple, easy-to-use declarative and functional programming model
- Constraint-based layout system
- Achieve any visual effect (native support for custom shaders)
- Standalone basic component library (including
text_input,scrollable, and more) - Parallel layout support
- Cross-platform support(TODO for mobile and platform-specific features)
- Modern performance profiling system
Tessera is an experimental framework. If you encounter any issues, please feel free to submit an issue.
Overview
Tessera uses a declarative programming paradigm inspired by modern UI frameworks such as React and Compose.
We start by declaring a UI component:
use tessera_ui::tessera; #[tessera] fn app() { // Component logic }
Then we write its UI logic:
use tessera_components::{ button::{ButtonArgs, button}, column::{ColumnArgs, column}, surface::{SurfaceArgs, surface}, text::{TextArgs, text}, }; use tessera_ui::{Modifier, tessera}; #[tessera] fn app() { surface(&SurfaceArgs::default() .modifier(Modifier::new().fill_max_size()) .child(|| { column(&ColumnArgs::default().children(|scope| { scope.child(|| { button(&ButtonArgs::filled(|| {}).child(|| { text(&TextArgs::from("+")); })); }); scope.child(|| text(&TextArgs::from("Count: 0"))); scope.child(|| { button(&ButtonArgs::filled(|| {}).child(|| { text(&TextArgs::from("-")); })); }); })); })); }
Next, to actually implement the counter we need to use remember to store the counter state:
use tessera_components::{ button::{ButtonArgs, button}, column::{ColumnArgs, column}, surface::{SurfaceArgs, surface}, text::{TextArgs, text}, }; use tessera_ui::{Modifier, remember, tessera}; #[tessera] fn app() { let count = remember(|| 0i32); surface(&SurfaceArgs::default() .modifier(Modifier::new().fill_max_size()) .child(move || { column(&ColumnArgs::default().children(move |scope| { scope.child(move || { button(&ButtonArgs::filled(move || count.with_mut(|c| *c += 1)) .child(|| text(&TextArgs::from("+")))); }); scope.child(move || { let label = format!("Count: {}", count.get()); text(&TextArgs::from(label)); }); scope.child(move || { button(&ButtonArgs::filled(move || count.with_mut(|c| *c -= 1)) .child(|| text(&TextArgs::from("-")))); }); })); })); }
This is a complete counter application! For more details, please refer to the Quick Start Guide.
Contributing
Please read the Contributing Guide to learn how to contribute to the project.
Acknowledgements
- wgpu, a powerful graphics API abstraction layer.
- winit, a cross-platform windowing and event handling library.
- glyphon, a text rendering solution.
- Original logo design by @ktechhydle.
License
Tessera is dual-licensed under the MIT License or the Apache 2.0 License.