Tessera

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.

Star History