Valdi: A New TypeScript‑First Cross‑Platform UI Framework with Millisecond Hot Reload

What is Valdi?

Valdi is Snapchat's open‑source, TypeScript‑first cross‑platform UI framework. It compiles TSX directly into native iOS, Android and macOS views, eliminating WebView and JS Bridge, while providing millisecond hot reload and full access to the npm ecosystem. In one sentence: React‑like feel, native speed.

Why Snapchat built it

In 2016 Snapchat's user base exploded and feature iteration accelerated. React Native suffered obvious performance bottlenecks—animation frame drops and List scrolling lag. Flutter was not yet released, and its custom Skia engine raised concerns about pixel‑perfect UI consistency. Pure native development required separate iOS and Android codebases and painful feature‑flag management. To solve these issues, Snap assembled a team to write UI in TypeScript, compile the code to native Objective‑C/Swift and Java/Kotlin components, and completely bypass the JS Bridge.

Core Advantages

Language : TypeScript + TSX, giving React developers zero learning cost.

Rendering : Compilation produces native View objects, resulting in zero bridge overhead and true native frame rates.

Performance : Automatic view recycling, incremental rendering, multi‑threaded JS; memory grows only 7 MB when scrolling through 10 k chat items.

Hot Reload : Saving a file triggers a refresh within 200 ms, preserving state and without restarting the app.

Type Safety : Automatic generation of TypeScript ↔ native bindings catches null‑pointer errors at compile time.

Mixed Integration : Bidirectional embedding allows gradual migration—old projects can replace screens page by page.

5‑Minute Quick Start (iOS & Android)

1. Install prerequisites (once)

brew install bazel node
npm i -g typescript tsx
git clone https://github.com/Snapchat/Valdi.git
export PATH=$PWD/Valdi/toolchain:$PATH

2. Create a project

valdi new AwesomeApp
cd AwesomeApp

3. Write a component (src/ui/Home.tsx)

import { Component } from '@valdi/core';

export class Home extends Component {
  onRender() {
    return (
      <view backgroundColor="#FFFC00" padding={20}>
        <label value="Hello Valdi 🎉" fontSize={18} />
        <button title="点我" onPress={() => alert('来自原生按钮！')} />
      </view>
    );
  }
}

4. Run the app

# iOS (simulator)
cd ios && pod install && cd ..
valdi dev --ios
# Android
valdi dev --android

Saving a file refreshes the UI within 200 ms, and breakpoints work directly in the TypeScript source.

Valdi vs React Native vs Flutter

Rendering : Valdi – native View; React Native – JS Bridge + native components; Flutter – Skia custom drawing.

Language : Valdi – TypeScript; React Native – JavaScript/TypeScript; Flutter – Dart.

Performance : Valdi – native frame rate; React Native – bridge overhead; Flutter – high but not native.

Bundle size increase : Valdi +1.8 MB; React Native +3~5 MB; Flutter +4~7 MB.

Hot reload latency : Valdi ~200 ms; React Native >1 s; Flutter ~500 ms.

Web support : Valdi planned for Q2 2026; React Native and Flutter already support web.

Ecosystem : Valdi – early, npm‑based; React Native – mature; Flutter – rich.

Mixed integration : Valdi – on‑demand embedding; React Native – complex; Flutter – requires the Flutter engine.

Current Limitations & Risks

Development currently limited to macOS/Linux (Windows support slated for Q1 2026).

Web target not yet available (planned Q2 2026).

Only UIKit/Android View adapters are complete; SwiftUI and Jetpack Compose support is in progress.

Complex charts and maps need custom bridges, currently community‑driven.

Beta‑0.0.1 API may change; stable release expected Q1 2026.

Recommendation: Try Valdi in an isolated module or a small feature first; avoid committing the whole codebase immediately.

Conclusion: Can Valdi Become Mainstream?

React Native benefits from a strong ecosystem moat, Flutter excels with self‑draw performance, and Valdi offers a third path: compile TypeScript directly into native View performance without compromise. Its eight‑year, 8.5 billion‑user battle‑tested foundation and rapid community adoption (6.8 k ★ on GitHub) make it a compelling option for teams seeking native speed with React‑style productivity.

Repository:

https://github.com/Snapchat/Valdi