Deep Dive into GaiaX: Architecture, Rendering Pipeline, and Core Concepts

GaiaX is a cross‑platform high‑performance rendering engine that acts as a view‑reconstruction framework. It converts a set of DSL files— index.json, index.css, and index.databinding —into native view components on Android and iOS.

Core Concepts

Designers provide component mockups; developers use GaiaStudio to drag, drop and script nodes, producing the three DSL files that together form a GaiaX template. At runtime the GaiaX SDK parses the template, builds a node tree from index.json, enriches each node with style information from index.css and data‑binding logic from index.databinding, and finally creates a native view tree.

Architecture

The system is organized into three layers.

Foundation Layer : Contains Stretch , a Rust‑based FlexBox layout library that computes absolute positions for nodes.

Core Layer :

Template Data Management – cache and data‑source modules for loading and caching template files.

Template Parsing & Conversion – parses the three DSL files, converts units, evaluates expressions, and builds animation data.

Rendering – split into Node & Layout (creates the node tree and uses Stretch) and View & Rendering (creates native views, applies styles, binds data, handles animations and events).

Context Management – constructs GXTemplateContext that holds runtime information for a template instance.

Service Layer : Exposes the public API (e.g., createView, bindData) and extension points such as expression evaluation, Lottie animation, and event handling.

Rendering Pipeline (Render Bus)

Business code creates a GXTemplateItem (business ID + template ID) and calls createView.

Template Data Management retrieves the template entity from cache or loads it from the configured data source.

Template Parsing & Conversion reads index.json, index.css, and index.databinding, builds the node tree and creates key‑value maps for styles and bindings.

Context Module builds a GXTemplateContext that stores size, template item, root view, etc.

Node & Layout Module invokes Stretch to transform FlexBox‑based nodes into absolute‑layout nodes, producing X/Y coordinates, width and height.

View & Rendering Module creates native views (e.g., AbsoluteLayout, GXView, GXText), applies the computed layout, binds data, runs animations and events, and assembles the final view hierarchy for display.

Node‑Tree Calculation

Stretch translates the FlexBox definitions and the hierarchical relationships described in index.json into absolute layout coordinates, ensuring consistent cross‑platform positioning.

View‑Hierarchy Merging

To reduce the number of native view objects, GaiaX merges redundant view nodes according to these rules:

The root node is never merged.

A node can be merged only if all conditions are met:

Node type is view.

Style information is empty.

Node has no virtual parent.

Node does not participate in animation, event handling, analytics, or data‑binding.

Layout information of merged nodes is accumulated; when a non‑mergeable node is encountered, the accumulated offsets are applied to the next renderable node.

The process repeats recursively for the entire tree.

Core merging implementation can be examined at: https://github.com/alibaba/GaiaX/blob/main/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/view/GXViewTreeMerger.kt

Text Auto‑Fit Logic

Because Stretch only handles static layout, GaiaX adds custom text‑auto‑fit handling:

If width is fixed, compute the required height; if height is fixed, compute the required width (single‑line vs. multi‑line).

Pre‑process: run Stretch once to obtain the initial layout.

If style properties such as width, height, margin, or padding change, run Stretch a second time.

When flexGrow is present, set it to 0 after text adaptation to prevent further growth.

Core text‑fit implementation is available at: https://github.com/alibaba/GaiaX/blob/main/GaiaXAndroid/src/main/kotlin/com/alibaba/gaiax/render/node/text/GXFitContentUtils.kt

Open‑Source Repository

The GaiaX source code is hosted on GitHub: https://github.com/alibaba/GaiaX