ConfigsJul 27, 2026·3 min read

Valdi — Cross-Platform Native UI Framework by Snapchat

TypeScript framework that compiles UI components into truly native views for iOS, Android, and macOS without web views or JavaScript bridges.

Agent ready

Ready-to-run agent install

This asset can be installed after the agent chooses its runtime, checks the plan, and runs the matching command.

Native · 98/100Policy: allow
Agent surface
Any MCP/CLI agent
Kind
Skill
Install
Single
Trust
Trust: Established
Entrypoint
Valdi
Direct install command
npx -y tokrepo@latest install 24942bee-89bf-11f1-9bc6-00163e2b0d79 --target codex

Run after dry-run confirms the install plan.

Introduction

Valdi is an open-source cross-platform UI framework from Snapchat that compiles TypeScript components directly into native platform views. Unlike web-view wrappers or JavaScript bridge approaches, Valdi generates true native widgets, delivering the performance users expect from platform-native apps while letting teams share a single codebase.

What Valdi Does

  • Compiles TypeScript component definitions into native iOS, Android, and macOS views
  • Eliminates JavaScript bridges by translating the component tree at build time
  • Provides a React-like declarative API familiar to web developers
  • Supports platform-specific code paths when native differentiation is needed
  • Ships a hot-reload development server for rapid iteration

Architecture Overview

Valdi's compiler takes a TypeScript component tree and emits platform-specific code: Swift/UIKit for iOS, Kotlin/Jetpack for Android, and AppKit for macOS. There is no runtime JavaScript engine on device. Shared business logic stays in TypeScript and compiles to native via an embedded bytecode VM, while the UI layer is entirely native. This two-tier model gives you native rendering speed with shared logic.

Self-Hosting & Configuration

  • Requires Node.js 18+ and platform SDKs (Xcode for iOS, Android Studio for Android)
  • Initialize a project with npx create-valdi-app
  • Configure targets in valdi.config.ts (platforms, build settings, asset paths)
  • Use npx valdi run android or npx valdi run ios for local development
  • CI builds produce standard .ipa and .apk artifacts

Key Features

  • True native performance without web views or JS bridges
  • Single TypeScript codebase for iOS, Android, and macOS
  • Battle-tested at Snapchat scale after 8 years of internal use
  • Built-in navigation, gestures, and animation primitives
  • Platform-escape-hatch API for embedding raw SwiftUI or Jetpack Compose

Comparison with Similar Tools

  • React Native — uses a JS bridge at runtime; Valdi compiles away the bridge entirely
  • Flutter — renders via its own Skia engine; Valdi uses platform-native widgets
  • Kotlin Multiplatform — shares Kotlin business logic; Valdi shares TypeScript UI definitions
  • Expo — wraps React Native with managed services; Valdi targets native compilation
  • NativeScript — interprets JS at runtime to access native APIs; Valdi compiles ahead of time

FAQ

Q: How mature is Valdi? A: Snapchat used it internally for eight years before open-sourcing it in 2025, so the core is production-proven at scale.

Q: Can I use existing npm packages? A: Pure TypeScript/JavaScript logic packages work. UI packages that assume a DOM or React Native bridge will not.

Q: Does Valdi support web targets? A: Currently iOS, Android, and macOS. Web output is on the roadmap but not yet available.

Q: What license is Valdi released under? A: MIT license, fully open-source.

Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets