Valdi README

The project's README from github.com/Snapchat/Valdi. As one markdown file: README.md.

Valdi

License: MIT Platforms Status 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.

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:

Learn more in our Performance Optimization Guide.

Developer Experience Built for Speed

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

Flexible Adoption Model

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

Deep Native Integration

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

Proven at Scale

Feature Highlights

Need Help?

Contributing

Please follow the contributing guidelines.

License

Valdi is made available under the MIT License.

Valdi (Snapchat/Valdi)

Searching Database…

16.4K ·GitHub
Valdi
What is this?Valdi is a cross-platform UI framework from Snap: write your UI once in declarative TypeScript, and it compiles directly to native views on iOS, Android, and macOS.
So it doesn't render through a web view or a JavaScript bridge?Correct — declaratively rendered TypeScript components are compiled into platform-native views, with no web views and no JavaScript bridges in the rendering path.
What do I need installed to build and run something?Xcode is the only prerequisite and it is macOS-only — everything else is set up automatically. Installing the Valdi VSCode/Cursor extensions is recommended for syntax highlighting, debugging, and device logs during hot reload.
Do I write everything in TypeScript, or do I still touch native code?You write TSX components in TypeScript with type safety. Valdi auto-generates type-safe bindings to Kotlin, Objective-C, and Swift, and polyglot modules let you write performance-critical code in C++, Swift, Kotlin, or Objective-C.
What does day-to-day development actually feel like?Millisecond instant hot reload on iOS, Android, or desktop without recompiling, plus full debugging in VSCode: breakpoints, variable inspection, performance profiling, and heap dumps.
Do I have to rewrite my whole app to adopt it?No — adoption is incremental: you can drop Valdi components into existing UIKit or Android view hierarchies, embed native views inside Valdi layouts, or build entire features in Valdi.
Can it target Windows or the web too?No — the README lists native views on iOS, Android, and macOS only; there is no web or Windows target.
Why did Snap build its own framework instead of using an existing one?Per the README, Valdi targets the core tension of cross-platform development — velocity vs. runtime performance. It has powered critical features in Snap's production apps for 8 years, including advanced animations, real-time rendering, and complex gesture systems.
What can I run to see it in action?The apps/ directory has six runnable examples: helloworld (minimal component), navigationexample (screen navigation), managedcontextexample (shared state via managed context), valdigpt (AI-driven dynamic UI), cliexample (Valdi CLI app), and benchmark.
What is valdigpt?An example app demonstrating AI-driven dynamic UI — Valdi rendering UI that is described at runtime rather than fixed at compile time.
What are similar projects?native, react-native, mui, ng-native, flutter, expo, lynx, compose-multiplatform
Which topics is it in?declarative-ui, animations, gesture-control, ui-framework, xcode, vscode, native, mobile-development, component-library, testing, cpp, c++
Creator
Snapchat
Size
89.7 MB
Stars
16.4K
Updated
CommitOct 16Releasebeta-0.2.0Sep 22
Age
11mo
Commits · 90 Days