Tessera

website · crates.io · docs.rs

Introduction

Tessera is a declarative, immediate-mode UI framework for Rust. With a functional approach at its core, it aims to provide ultimate performance, flexibility, and extensibility.

Core Features

• Declarative Component Model: Define and compose components using simple functions with the #[tessera] macro, resulting in clean and intuitive code.
• Powerful and Flexible Layout System: A constraint-based (Fixed, Wrap, Fill) layout engine, combined with components like row and column (inspired by Jetpack Compose), makes it easy to implement responsive layouts from simple to complex.

Example of `row`, viewable in `example/alignment_showcase.rs`

• Pluggable Shader Engine: Shaders are first-class citizens in Tessera. The core of Tessera doesn't come with built-in drawing primitives like a "brush". Instead, it provides an easy-to-use WGPU rendering/compute pipeline plugin system, offering an experience closer to some game engines. This is intentional, for the following reasons:

  • The Advent of WGPU: The emergence of WGPU and WGSL has made shader programming simpler, more efficient, and easily adaptable to mainstream GPU backends. Writing shaders directly is no longer a painful process.
  • Neumorphism: In recent years, pure flat design has led to visual fatigue, and more applications are adopting neumorphic design styles. The main difference from the old skeuomorphism of the 2000s is its hyper-realistic perfection, which requires many visual effects that are difficult to implement uniformly, such as lighting, shadows, reflections, refractions, bloom, and perspective. Attempting to encapsulate a perfect "brush" to achieve these effects is very difficult and inelegant.
  • Flexibility: With custom shaders, we can easily implement advanced effects like custom lighting, shadows, particle systems, etc., without relying on the framework's built-in drawing tools.
  • GPU Compute: One of the biggest advantages of WGPU over its predecessors is that compute shaders are first-class citizens. A future-oriented framework should take full advantage of this. By using custom compute shaders, we can perform complex computational tasks such as image processing and physics simulations, which are often unacceptably inefficient to perform on the CPU.

Using custom shaders instead of a built-in brush allows us to easily achieve advanced glass effects like this. This example can be found in `example/fluid_glass_showcase.rs`.

• Decentralized Component Design: Thanks to the pluggable rendering pipeline, tessera itself does not include any built-in components. While tessera_basic_components provides a set of common components, you are free to mix and match or create your own component libraries.
• Explicit State Management: Components are stateless. State is passed in explicitly as parameters (usually in the form of Arc<Lock<State>> due to the highly parallel design), and interaction logic is handled within the input_handler closure, making data flow clear and controllable.
• Parallelized By Design: The framework utilizes parallel processing in its core. For example, the size measurement of the component tree uses Rayon for parallel computation to improve the performance of complex UIs.

Preview

An excerpt from example\examples\alignment_showcase.rs:

/// Create a small colored box
#[tessera]
fn small_box(text_content: &str, color: Color) {
    surface(
        SurfaceArgs {
            style: color.into(),
            shape: Shape::RoundedRectangle {
                top_left: Dp(25.0),
                top_right: Dp(25.0),
                bottom_right: Dp(25.0),
                bottom_left: Dp(25.0),
                g2_k_value: 3.0,
            },
            padding: Dp(8.0),
            width: DimensionValue::Fixed(Px(40)),
            height: DimensionValue::Fixed(Px(40)),
            ..Default::default()
        },
        None,
        move || {
            text(
                TextArgsBuilder::default()
                    .text(text_content.to_string())
                    .color(Color::WHITE)
                    .size(Dp(12.0))
                    .build()
                    .unwrap(),
            )
        },
    );
}

Here is a showcase video of the example:

Related Documentation

• Tessera UI Website

  This is the official website and main documentation for the framework, containing the quick start guide, API documentation, and tutorials.

• docs.rs tessera_ui

  The API documentation for the tessera_ui crate. This is the core crate of the framework.

• docs.rs tessera_ui_basic_components

  The API documentation for the tessera_ui_basic_components crate. This is a separate crate that provides the official set of basic components.

Getting Started

Please refer to the Quick Start Guide to create your first application with Tessera.

Workspace Structure

Tessera adopts a multi-crate workspace structure:

• tessera-ui: Framework core, including the component tree, rendering system, runtime, basic types (Dp, Px), and event handling.
• tessera-ui-basic-components: Provides a set of ready-to-use UI components (such as row, column, text, button, surface) and their rendering pipelines.
• tessera-ui-macros: Contains the #[tessera] procedural macro for simplified component definition. Documentation
• example: Example project demonstrating framework usage.

Contributing

Read the Contributing Guide for details on how to contribute to the project.

Acknowledgements

• wgpu, for the powerful graphics API abstraction.
• winit, for the cross-platform windowing and event handling.
• glyphon, for the text rendering solution.
• Original logo design by @ktechhydle

License

Tessera is licensed under either of the MIT License or the Apache License 2.0.

Star History