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

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

Then we write its UI logic:

#[tessera]
fn app() {
    surface(
        SurfaceArgs::default().modifier(Modifier::new().fill_max_size()),
        || {
            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::default().modifier(Modifier::new().fill_max_size()),
        || {
            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.

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