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.

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