Valdi

Note

Beta Status: Valdi has been widely used in Snap's production apps for the last 8 years. We're calling this a beta because our tools and documentation need more battle testing in the open source world. Valdi will exit beta when we're happy with the developer experience.

Valdi is a cross-platform UI framework that delivers native performance without sacrificing developer velocity. Write your UI once in declarative TypeScript, and it compiles directly to native views on iOS, Android, and macOS—no web views, no JavaScript bridges.

Quick Example

A basic Valdi component:

import { Component } from 'valdi_core/src/Component';

class HelloWorld extends Component {
  onRender() {
    const message = 'Hello World! 👻';
    <view backgroundColor='#FFFC00' padding={30}>
      <label color='black' value={message} />
    </view>;
  }
}

Quick Start

Prerequisites: Xcode (macOS only) - everything else is automatic!

# Install Valdi CLI
npm install -g @snap/valdi

# One-command setup (installs all dependencies)
valdi dev_setup

# Create your first project
mkdir my_project && cd my_project
valdi bootstrap
valdi install ios  # or android

Tip

Editor Extensions: For the best development experience, install the Valdi VSCode/Cursor extensions for syntax highlighting, debugging, and device logs during hot reload.

Quick Links

Why Choose Valdi?

Valdi is a cross-platform UI framework designed to solve the fundamental problem of cross-platform development: velocity vs. runtime performance. For 8 years, it has powered a large portion of Snap's production apps.

True Native Performance

Unlike frameworks that rely on web views or JavaScript bridges, Valdi compiles declaratively rendered TypeScript components into platform-native views. Valdi also includes several other performance advantages:

Learn more in our Performance Optimization Guide.

Developer Experience Built for Speed

Valdi eliminates the traditional compile-test-debug cycle that slows native development:

Instant hot reload - See changes in milliseconds on iOS, Android, or desktop without recompiling
Full VSCode debugging - Set breakpoints, inspect variables, profile performance, and capture heap dumps directly in VSCode
Familiar syntax - TSX components with TypeScript for type safety

Flexible Adoption Model

Valdi integrates easily into existing apps - start small and scale as needed:

Embed Valdi in native - Drop Valdi components into existing UIKit or Android view hierarchies
Embed native in Valdi - Use platform-specific views within Valdi layouts via <custom-view>
Polyglot modules - Write performance-critical code in C++, Swift, Kotlin, or Objective-C with type-safe bindings to TypeScript
Full-stack architecture - Build entire features in Valdi with worker threads for background processing, eliminating platform-specific bridge code

Deep Native Integration

Valdi generates type-safe bindings between TypeScript and native platforms:

Automatic code generation - TypeScript interfaces compile to Kotlin, Objective-C, and Swift bindings
Native API access - Direct access to platform APIs and third-party native libraries through polyglot modules
Bidirectional communication - Pass complex data structures and callbacks between TypeScript and native code safely
Native protobuf support - Seamless integration with protobuf for efficient data serialization

Proven at Scale

Powers critical features in production Snap apps.
Supports advanced animations, real-time rendering, and complex gesture systems

Feature Highlights

Flexbox layout system with automatic RTL support
Worker threads for multi-threaded JavaScript execution
Native animations for native look and feel
Advanced gesture recognition with platform-native handling
Built-in testing framework with component-level unit tests
Bazel integration for reproducible, incremental builds

Need Help?

Join our Discord for support.

Contributing

Please follow the contributing guidelines.

License

Valdi is made available under the MIT License.