Valdi

Note on Beta Status

Valdi has been a cornerstone of Snap's production applications for the past 8 years. We currently classify it as "beta" because our tools and documentation require further refinement and testing within the open-source community. Valdi will exit beta status once we are fully satisfied with the overall developer experience.

Valdi is an innovative cross-platform UI framework engineered to deliver uncompromised native performance while significantly boosting developer velocity. Write your user interface once using declarative TypeScript, and it compiles directly to native views across iOS, Android, and macOS – eliminating the need for web views or JavaScript bridges.

Quick Example

Here's 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) - all other dependencies are handled automatically!

Installation & Setup:

# Install Valdi CLI globally
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 valdi install android

Tip: Editor Extensions

For an optimal development experience, install the Valdi VSCode/Cursor extensions for syntax highlighting, debugging, and device logs during hot reload.

Quick Links

• Getting Started Guide
• Documentation
• Codelabs
• API Reference
• Frequently Asked Questions
• Component Library

Why Choose Valdi?

Valdi is a cutting-edge cross-platform UI framework specifically designed to resolve the inherent tension in cross-platform development: balancing developer velocity with runtime performance. For over 8 years, it has been the powering engine behind a significant portion of Snap's production applications.

True Native Performance

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

• Automatic View Recycling: A global view pooling system efficiently reuses native views across all screens, dramatically reducing UI inflation latency.
• Optimized Component Rendering: Components re-render independently without triggering unnecessary parent re-renders, enabling rapid incremental updates.
• Optimized Layout Engine: A high-performance C++ layout engine operates on the main thread with minimal marshalling overhead.
• Viewport-Aware Rendering: Only visible views are inflated, ensuring that features like infinite scrolling are performant by default.

Learn more in our Performance Optimization Guide.

Developer Experience Built for Speed

Valdi streamlines the development process by eliminating the traditional compile-test-debug cycle that often slows down native development:

• Instant Hot Reload: Witness changes in milliseconds on iOS, Android, or desktop devices without the need for full recompilation.
• Full VSCode Debugging: Set breakpoints, inspect variables, profile performance, and capture heap dumps directly within VSCode.
• Familiar Syntax: Develop using TSX components combined with TypeScript for robust type safety.

Flexible Adoption Model

Valdi is designed for easy integration into existing applications, allowing you to start small and scale your usage as needed:

• Embed Valdi in Native: Seamlessly drop Valdi components into your existing UIKit or Android view hierarchies.
• Embed Native in Valdi: Incorporate platform-specific views directly 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: Construct entire features within Valdi, utilizing worker threads for background processing and eliminating platform-specific bridge code.

Deep Native Integration

Valdi automatically generates type-safe bindings between TypeScript and native platforms, ensuring robust and reliable communication:

• Automatic Code Generation: TypeScript interfaces are compiled directly into Kotlin, Objective-C, and Swift bindings.
• Native API Access: Gain direct access to platform APIs and third-party native libraries through polyglot modules.
• Bidirectional Communication: Safely pass complex data structures and callbacks between TypeScript and native code.
• Native Protobuf Support: Enjoy seamless integration with Protobuf for highly efficient data serialization.

Proven at Scale

Valdi powers critical features in Snap's production applications, demonstrating its reliability and robustness. It supports advanced animations, real-time rendering, and complex gesture systems, proving its capability for demanding use cases.

Feature Highlights

• Flexbox layout system with automatic RTL (Right-to-Left) support.
• Worker threads for efficient multi-threaded JavaScript execution.
• Native animations for a truly native look and feel.
• Advanced gesture recognition with platform-native handling.
• Built-in testing framework including component-level unit tests.
• Bazel integration for reproducible and incremental builds.

Need Help?

Join our Discord for support.

Contributing

Please follow the contributing guidelines.

License

Valdi is made available under the MIT License.