GitHub - tessera-ui/tessera: Tessera is a cross-platform UI library for rust, focused on performance and extensibility.

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_editor, scrollable, and more)
Parallel layout support
Immediate mode

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::tessera;

#[tessera]
fn app() {
    // Component logic
}

Then we write its UI logic:

#[tessera]
fn app() {
    surface(
        SurfaceArgs {
            width: DimensionValue::FILLED,
            height: DimensionValue::FILLED,
            ..Default::default()
        },
        || {
            column(ColumnArgs::default(), |scope| {
                scope.child(|| {
                    button(
                        ButtonArgs::filled(|| {}),
                        || text("+"),
                    )
                });
                scope.child(|| text("count: 0"));
                scope.child(|| {
                    button(
                        ButtonArgs::filled(|| {}),
                        || text("-"),
                    )
                });
            });
        },
    );
}

Next, to actually implement the counter we need to use remember to store the counter state:

#[tessera]
fn app() {
    surface(
        SurfaceArgs {
            width: DimensionValue::FILLED,
            height: DimensionValue::FILLED,
            ..Default::default()
        },
        || {
            let count = remember(|| 0);
            column(ColumnArgs::default(), move |scope| {
                scope.child(move || {
                    button(
                        ButtonArgs::filled(move || count.with_mut(|c| *c += 1)),
                        || text("+"),
                    )
                });
                scope.child(move || text(format!("Count: {}", count.get())));
                scope.child(move || {
                    button(
                        ButtonArgs::filled(move || count.with_mut(|c| *c -= 1)),
                        || text("-"),
                    )
                });
            });
        },
    );
}

This is a complete counter application! For more details, please refer to the Quick Start Guide.

Getting Started

Please refer to the Quick Start Guide to create your first application with Tessera.

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.