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
这是什么？Valdi 是 Snap 推出的跨平台 UI 框架：用声明式 TypeScript 只写一次界面，它就能直接编译成 iOS、Android 和 macOS 上的原生视图。
所以它不是通过 WebView 或 JavaScript 桥来渲染的？没错——用声明式写成的 TypeScript 组件会被编译成平台原生视图，渲染路径里既没有 WebView，也没有 JavaScript 桥。
要构建并跑起来，我需要装些什么？Xcode 是唯一的先决条件，而且只在 macOS 上可用——其余一切都会自动配置好。建议安装 Valdi 的 VSCode/Cursor 扩展，这样在热重载时能有语法高亮、调试和设备日志。
我是不是全部用 TypeScript 写，还是仍然要碰原生代码？你用 TypeScript 编写带类型安全的 TSX 组件。Valdi 会自动生成到 Kotlin、Objective-C 和 Swift 的类型安全绑定；对于性能关键的部分，多语言模块让你可以用 C++、Swift、Kotlin 或 Objective-C 来写。
日常开发实际体验如何？在 iOS、Android 或桌面上都能毫秒级即时热重载，无需重新编译，还可以在 VSCode 里完整调试：断点、变量检查、性能分析和堆转储。
采用它的话，我得把整个应用重写一遍吗？不用——可以渐进式采用：你可以把 Valdi 组件放进现有的 UIKit 或 Android 视图层级里，也可以在 Valdi 布局中嵌入原生视图，或者直接用 Valdi 构建完整的功能模块。
它也能面向 Windows 或 Web 吗？不能——README 里只列出了 iOS、Android 和 macOS 的原生视图，没有 Web 或 Windows 目标。
Snap 为什么不直接用现成的框架，而是自己造了一个？按照 README 的说法，Valdi 针对的是跨平台开发的核心矛盾——开发速度与运行时性能之间的取舍。它已经在 Snap 的生产应用中支撑关键功能长达 8 年，包括高级动画、实时渲染和复杂的手势系统。
我能运行什么来看看实际效果？apps/ 目录里有六个可以运行的示例：helloworld（最小组件）、navigationexample（页面导航）、managedcontextexample（通过 managed context 共享状态）、valdigpt（AI 驱动的动态 UI）、cliexample（Valdi CLI 应用）和 benchmark。
valdigpt 是什么？一个演示 AI 驱动动态 UI 的示例应用——Valdi 渲染的 UI 是在运行时描述的，而不是在编译时就固定下来的。
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
90 MB
Stars
16.4K
Updated
CommitOct 17Releasebeta-0.2.0Sep 22
Age
11mo
Commits · 90 Days