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
• 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.

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.

Star History