Skip to content

Snapchat/Valdi

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

373 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Valdi

License: MIT Platforms Status Discord TypeScript Documentation PRs Welcome

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>;
  }
}

Hello World example running on iOS

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

Example Apps

The apps/ directory contains runnable examples:

App What it shows
helloworld Minimal component β€” the fastest way to get something on screen
navigation_example Screen navigation patterns
managed_context_example Sharing state across components with managed context
valdi_gpt AI-driven dynamic UI β€” Valdi rendering UI described at runtime
cli_example Building a Valdi CLI application
benchmark Performance benchmarks

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:

  • Automatic view recycling - Global view pooling system reuses native views across all screens, dramatically reducing inflation latency
  • Optimized component rendering - Components re-render independently without triggering parent re-renders, enabling fast incremental updates
  • Optimized layout engine - C++ layout engine runs on the main thread with minimal marshalling overhead
  • Viewport-aware rendering - Only visible views are inflated, making infinite scrolling performant by default

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

Feature Highlights

Need Help?

  • GitHub Discussions β€” ask questions, share what you're building, report issues
  • Discord β€” real-time chat with the community

Contributing

Please follow the contributing guidelines.

License

Valdi is made available under the MIT License.

About

Valdi is a cross-platform UI framework that delivers native performance without sacrificing developer velocity.

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors