Why Valdi’s TSX‑to‑Native Approach Is Shaking Up Cross‑Platform Development

Overview

Valdi is an open‑source cross‑platform UI framework released by Snap Inc. It targets developers familiar with TypeScript/JSX and compiles TSX directly into native view hierarchies for iOS and Android. The framework does not embed a WebView, JavaScriptCore, or any bridge layer; instead a C++ runtime renders the UI natively.

Architecture

TSX → Native Compiler : The TypeScript compiler parses TSX files and generates an intermediate representation that is fed to a C++ engine. The engine creates platform‑specific view objects (UIKit on iOS, Jetpack Compose/Android Views on Android).

No JavaScript Runtime : Because the UI is compiled ahead‑of‑time, there is no need for a JavaScript engine, which eliminates the memory overhead of WebView‑based solutions.

Performance : The iOS demo reports a state‑transition latency of ~2 ms, indicating near‑frame‑rate responsiveness with virtually no dropped frames.

Getting Started

Clone the repository: git clone https://github.com/snapchat/valdi.git Install the required toolchain (CMake ≥ 3.18, Xcode ≥ 13 for iOS, Android NDK ≥ 21).

Run the build script: ./scripts/build.sh --platform ios or ./scripts/build.sh --platform android Write UI in TSX, for example:

function Counter() { const [count, setCount] = useState(0); return ( <View> <Text>{count}</Text> <Button onPress={() => setCount(count+1)} title="Inc"/> </View> ); }

Run the generated native app on a device or emulator.

Comparison with Existing Frameworks

Valdi, Electron, and Tauri adopt three distinct strategies:

Electron : Bundles Chromium and Node.js, providing a full browser environment. High memory usage, but a mature ecosystem.

Tauri : Uses a lightweight WebView with a Rust backend for isolation. Smaller bundle size than Electron but still relies on HTML/CSS/JS for UI.

Valdi : Eliminates the web layer entirely. UI is expressed with front‑end syntax (TSX) while rendering is 100 % native, offering a middle ground between developer ergonomics and performance.

Evolution of Cross‑Platform Approaches

Web‑wrapper era – Electron‑style “browser‑in‑a‑box”.

Lightweight WebView + Rust isolation – Tauri.

Front‑end syntax + native rendering – Valdi.

Suitable Use Cases

Front‑end developers who want to ship mobile applications without learning Swift/Kotlin.

Apps that require intensive animations or complex gestures where frame‑perfect performance is critical.

Teams that aim to maximize TypeScript code reuse across iOS and Android.

Scenarios Where Valdi Is Less Appropriate

Projects that depend on a large ecosystem of third‑party plugins, templates, or native modules not yet available for Valdi.

Desktop‑only applications; Valdi currently targets mobile platforms.

Codebases heavily tied to existing Web UI libraries (React, Vue, etc.) that cannot be expressed as native components.

Current Status and Outlook

Valdi is still in beta; the core runtime is stable, but the ecosystem (UI components, tooling, documentation) is under active development. Its rapid adoption (10 k ★ on GitHub within a week) demonstrates strong community interest in a TypeScript‑first, native‑performance cross‑platform model.