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)
• Handle-based layout and measurement API
• 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

• Try the Web Demo

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::button,
    column::column,
    surface::surface,
    text::text,
};
use tessera_ui::{Modifier, tessera};

#[tessera]
fn app() {
    surface()
        .modifier(Modifier::new().fill_max_size())
        .child(|| {
            column().children(|| {
                button().filled().on_click(|| {}).child(|| {
                    text().content("+");
                });
                text().content("Count: 0");
                button().filled().on_click(|| {}).child(|| {
                    text().content("-");
                });
            });
        });
}

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

use tessera_components::{
    button::button,
    column::column,
    surface::surface,
    text::text,
};
use tessera_ui::{Modifier, remember, tessera};

#[tessera]
fn app() {
    let count = remember(|| 0i32);
    surface()
        .modifier(Modifier::new().fill_max_size())
        .child(move || {
            column().children(move || {
                button()
                    .filled()
                    .on_click(move || count.with_mut(|c| *c += 1))
                    .child(|| text().content("+"));
                let label = format!("Count: {}", count.get());
                text().content(label);
                button()
                    .filled()
                    .on_click(move || count.with_mut(|c| *c -= 1))
                    .child(|| text().content("-"));
            });
        });
}

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.

Tests should protect observable framework behavior and meaningful algorithmic invariants through production code. Use the layout/headless runtime for component interaction and explicit frame times for animation. See the Unit Test Standards for test boundaries, review criteria, and deterministic execution. CI runs crate tests and runnable rustdoc examples.

Keep expected results independent of the implementation, identify the intended failure in negative tests, and avoid fixtures that supply the behavior under test. Run tests that change process-global density in child processes to keep parallel layout tests isolated.

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