Introducing Kuikly Compose DSL: Standard Compose on Six Native Platforms

Background and Motivation

Jetpack Compose is the official UI toolkit for Android, and Compose Multiplatform is expanding to more platforms. With AI models now able to generate Compose code that runs out‑of‑the‑box, the natural question is whether Kuikly can support Compose. The challenge is not just running a demo but aligning Compose Runtime semantics—node tree, layout, gestures, scrolling—with Kuikly’s native rendering engine across six platforms.

Architecture Design

Overall Idea

The solution retains the full Compose Runtime, layout engine, animation system, and high‑level components (LazyColumn, Pager, Material3) while delegating rendering to Kuikly’s existing cross‑platform native engine. This three‑layer architecture consists of:

Top layer: unchanged Compose Runtime and high‑level components; developers write @Composable functions exactly as in standard Jetpack Compose.

Middle layer: the Kuikly Compose DSL, a custom applier that maps Compose node trees, coordinate systems, gesture events, and scrolling components to Kuikly’s native view hierarchy.

Bottom layer: Kuikly’s native rendering engine covering Android, iOS, HarmonyOS, H5, WeChat Mini‑Program, and macOS.

Why Native Rendering?

Kuikly chose native rendering over Skia because it provides identical system‑level experience (e.g., scrolling inertia, input handling, accessibility) and reuses the mature native rendering pipeline already proven in over 30 internal apps with 5 billion daily active users.

Why Reuse Compose Upper Layers?

Standard Compatibility : By reusing Compose’s state management, recomposition, layout, animation, and gesture handling, existing Compose code migrates with < 5 % effort; more than 50 internal pages have already been migrated.

AI‑Friendly : Standard Compose APIs are heavily represented in AI training data, allowing AI‑generated demos (73 examples) to compile and run without modification.

Core Integration Issues and Implementation

Node‑Tree Integration – KuiklyApplier

Compose’s Applier normally targets Android View or Skia Canvas. Kuikly implements a custom KuiklyApplier extending AbstractApplier<KNode>. It handles regular insert/remove as well as special cases like movableContentOf and SubcomposeLayout by using removeChildForMove and reinsertChild to keep native references alive.

Layout System Integration

Compose layout produces a hierarchy of LayoutNode objects with nested Modifier chains, each creating its own coordinate space. Kuikly resolves the mismatch by:

Deriving the View size from the first drawing modifier (e.g., background or border).

Computing the View position by cumulatively adding offsets from child drawing coordinates to the parent.

This guarantees that the visual size matches the View frame and that padding offsets are preserved without inflating the view hierarchy.

Gesture System Bridging

When a native ScrollView and a Compose region coexist, touch events must be routed correctly. Kuikly’s bridge works as follows:

Compose detectors that consume a move event call preventTouch to stop the native container from handling the same sequence.

If the native list starts scrolling or the system takes over, Kuikly maps the native cancel to Compose so the detector exits early.

The event pipeline then proceeds through SuperTouchManager, coordinate conversion using pageDensity, synthetic event synthesis via SyntheticEventSender, and finally the standard Compose PointerInputEventProcessor and HitPathTracker.

Scrolling Component Integration

Compose’s LazyColumn / LazyRow only layout visible items, while the native ScrollView requires a total content height and stable contentOffset. Kuikly solves this by dynamically expanding the native container as the user scrolls and applying offset compensation so that the visible region aligns with Compose’s layout. Operations like scrollToItem trigger a re‑layout of the target region before driving the native scroll.

Business Practice

Kuikly Compose DSL has been deployed in Tencent News, New Micro‑Video, Tencent Maps (HarmonyOS), and other internal products. After open‑sourcing, more than ten external teams—including Kuaishou, NetEase Mail, MiniMax, Founder Securities, and others—have integrated the DSL.

Typical cases:

New Micro‑Video : An AI‑driven development model built the entire app with Kuikly Compose DSL.

Tencent News : Core modules migrated to a single codebase covering Android, iOS, and HarmonyOS.

Tencent Maps (HarmonyOS) : Full migration of standard Compose pages to Kuikly Compose DSL, validating API compatibility.

Future Directions and Quick Start

Future Roadmap

Continuous improvement of tooling (recomposition performance debugger, live preview, hot reload, performance analysis).

AI‑assisted development tools built around the standard Compose API.

Further rendering chain and first‑screen performance optimizations.

Quick Start

Kuikly Compose DSL is open‑source on GitHub. Developers can start by visiting the Kuikly website, the GitHub repository, and the README’s Getting Started guide.

For teams seeking a standard Compose API with native rendering and six‑platform coverage, Kuikly Compose DSL offers a ready‑to‑use solution that also benefits from AI‑generated code compatibility.