Tessera is a declarative, immediate-mode UI framework developed in Rust, designed to provide exceptional performance, flexibility, and extensibility. By harnessing a functional programming approach, Tessera aims to create user interfaces that are both efficient and easy to use.

Key Features

• Declarative Component Model: Components can be defined and composed easily using simple functions together with the #[tessera] macro, leading to clear and intuitive code.

• Advanced Layout System: The framework boasts a powerful constraint-based layout engine with various layout options including Fixed, Wrap, and Fill. This, combined with layout components like row and column (inspired by Jetpack Compose), enables the creation of responsive layouts, whether simple or complex.

  Example of row, viewable in example/alignment_showcase.rs

• Pluggable Shader Engine: Tessera considers shaders as first-class citizens, offering a flexible WGPU rendering and compute pipeline. This design supports advanced graphics capabilities while ensuring that shader programming is simple and effective.

  Achieving advanced glass effects using custom shaders demonstrated in example/fluid_glass_showcase.rs

• Decentralized Component Design: Tessera encourages the development of custom components by not including built-in options in the core framework. tessera_basic_components offers fundamental components, leaving flexibility to create or integrate additional libraries.

• Explicit State Management: Components themselves are stateless, receiving their state explicitly via parameters, enhancing control over data flow and interaction logic.

• Parallel Processing: The framework emphasizes performance with parallel processing capabilities, notably improving the efficiency of component sizing and layout calculations using the Rayon library.

Example Usage

Here's a concise example of a counter application showcasing the basic usage of Tessera:

/// Main counter application component
#[tessera]
fn counter_app(app_state: Arc<AppState>) {
    {
        let button_state_clone = app_state.button_state.clone(); // Cloning for clarity
        let click_count = app_state.click_count.load(atomic::Ordering::Relaxed);
        let app_state_clone = app_state.clone(); // Clone for button interaction

        surface(
            SurfaceArgs {
                color: [1.0, 1.0, 1.0, 1.0], // White background
                padding: Dp(25.0),
                ..Default::default()
            },
            None,
            move || {
                row_ui![
                    RowArgsBuilder::default()
                        .main_axis_alignment(MainAxisAlignment::SpaceBetween)
                        .cross_axis_alignment(CrossAxisAlignment::Center)
                        .build()
                        .unwrap(),
                    move || {
                        button(
                            ButtonArgsBuilder::default()
                                .on_click(Arc::new(move || {
                                    app_state_clone.click_count.fetch_add(1, atomic::Ordering::Relaxed);
                                }))
                                .build()
                                .unwrap(),
                            button_state_clone,
                            move || text("click me!"),
                        )
                    },
                    move || {
                        text(
                            TextArgsBuilder::default()
                                .text(format!("Count: {}", click_count))
                                .build()
                                .unwrap(),
                        )
                    }
                ];
            },
        );
    }
}

Counter example found in example/counter.rs

Development Status

Tessera is currently in the early stages of development. Further improvements and features, such as IME support for Android and enhanced rendering performance, are on the roadmap. For those interested in exploring this framework or contributing to its development, the Contributing Guide provides detailed instructions.

Tessera offers an innovative approach to UI development in Rust, embracing a high-performance and flexible architecture, making it an excellent choice for building interactive applications.