# snapchat/valdi

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/snapchat-valdi).**

16,380 stars · 542 forks · C++ · NOASSERTION

## Links

- GitHub: https://github.com/Snapchat/Valdi
- Homepage: https://discord.gg/uJyNEeYX2U
- awesome-repositories: https://awesome-repositories.com/repository/snapchat-valdi.md

## Topics

`android` `cross-platform` `ios` `typescript` `valdi`

## Description

Valdi is a cross-platform native UI framework that compiles declarative TypeScript code into native platform views. It functions as a declarative UI engine and multi-platform frontend toolchain designed to achieve high performance by avoiding web views.

The framework features a native bridge binding tool that generates type-safe bindings between TypeScript and native languages, allowing direct access to platform APIs. It supports a hot-reload development workflow, enabling real-time updates to the user interface across platforms without requiring full project recompilation.

The system includes a flexbox-based layout engine for responsive design and a rendering pipeline that optimizes performance through view recycling and multi-threaded logic execution in worker threads. Additional capabilities cover component state management, application screen navigation, interface localization, and a visual hierarchy inspector for debugging layout structures.

## Tags

### User Interface & Experience

- [Cross-Platform Native Renderers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/native-ui-renderers/cross-platform-native-renderers.md) — Compiles declarative TypeScript code into high-performance native platform views across multiple operating systems. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))
- [Cross-Platform Rendering](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/web-based-native-ui/cross-platform-rendering.md) — Renders native user interfaces from a single TypeScript codebase across multiple platforms.
- [Automatic Element Alignment](https://awesome-repositories.com/f/user-interface-experience/automatic-element-alignment.md) — Automatically calculates component positions and sizes using a flexible box model for consistent alignment. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))
- [Declarative Layout Engines](https://awesome-repositories.com/f/user-interface-experience/declarative-layout-engines.md) — Manages component state and layout through a declarative rendering engine.
- [Flexbox Layout Engines](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines.md) — Uses a flexbox-based layout engine to ensure consistent and responsive element alignment across screens.
- [Declarative Native Renderers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-libraries/native-ui-renderers/declarative-native-renderers.md) — Compiles declarative TypeScript UI definitions directly into native operating system views.
- [Native Compilation Frameworks](https://awesome-repositories.com/f/user-interface-experience/typescript-ui-frameworks/native-compilation-frameworks.md) — Compiles TypeScript and JSX user interfaces into native application code for high performance.
- [Component State Managers](https://awesome-repositories.com/f/user-interface-experience/component-state-managers.md) — Tracks internal component data changes to trigger automatic visual updates of the user interface. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))
- [Screen Transitions](https://awesome-repositories.com/f/user-interface-experience/navigation-routing/screen-transitions.md) — Controls the transition and stack of different view hierarchies to manage multi-screen user flows. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))
- [Responsive Design](https://awesome-repositories.com/f/user-interface-experience/responsive-design.md) — Implements flexible layouts and animations that adapt to different screen sizes and orientations.
- [State-Driven View Refreshing](https://awesome-repositories.com/f/user-interface-experience/state-driven-view-refreshing.md) — Automatically refreshes the native view hierarchy by tracking changes in internal component state.
- [View Hierarchy Inspectors](https://awesome-repositories.com/f/user-interface-experience/view-hierarchy-inspectors.md) — Provides a visual inspector to analyze and debug the rendered view tree and layout structures. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))
- [View Recycling Systems](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems.md) — Optimizes memory and performance by recycling UI components that have scrolled off the screen.
- [Generic View Recycling](https://awesome-repositories.com/f/user-interface-experience/view-recycling-systems/generic-view-recycling.md) — Optimizes rendering performance and reduces latency by recycling view components that scroll off screen. ([source](https://cdn.jsdelivr.net/gh/snapchat/valdi@main/README.md))

### Development Tools & Productivity

- [Type-Safe Binding Generators](https://awesome-repositories.com/f/development-tools-productivity/type-safe-binding-generators.md) — Generates type-safe bindings between TypeScript and native languages for compile-time safety.
- [Cross-Platform Toolchains](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-toolchains.md) — Provides a comprehensive toolkit for building and debugging native interfaces across diverse platforms.
- [Hot Code Reloading](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading.md) — Provides a development workflow that updates the interface in real time without recompiling.
- [Hot-Reloading Systems](https://awesome-repositories.com/f/development-tools-productivity/hot-reloading-systems.md) — Implements a runtime reloading mechanism that updates the UI without requiring a full application restart.

### Operating Systems & Systems Programming

- [Native API Bridges](https://awesome-repositories.com/f/operating-systems-systems-programming/kernel-core-internals/system-programming-primitives/system-abstractions/native-interoperability-bindings/native-system-integrations/native-api-bridges.md) — Bridges TypeScript code to native platform methods and hardware capabilities.
- [Native UI Bindings](https://awesome-repositories.com/f/operating-systems-systems-programming/kernel-core-internals/system-programming-primitives/system-abstractions/native-interoperability-bindings/native-ui-bindings.md) — Connects custom native view factories and attribute bindings to implement specialized platform functionality. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))

### Programming Languages & Runtimes

- [Logic Thread Isolation](https://awesome-repositories.com/f/programming-languages-runtimes/logic-thread-isolation.md) — Offloads complex JavaScript processing to worker threads to prevent blocking the main user interface thread. ([source](https://cdn.jsdelivr.net/gh/snapchat/valdi@main/README.md))
- [Native Bindings](https://awesome-repositories.com/f/programming-languages-runtimes/native-bindings.md) — Generates type-safe bindings between TypeScript and native languages for direct platform API access. ([source](https://cdn.jsdelivr.net/gh/snapchat/valdi@main/README.md))

### Mobile Development

- [Native View Embedding](https://awesome-repositories.com/f/mobile-development/native-view-embedding.md) — Inserts custom platform components into declarative layouts or hosts native view hierarchies within the app. ([source](https://cdn.jsdelivr.net/gh/snapchat/valdi@main/README.md))

### Software Engineering & Architecture

- [UI-Responsive Background Workers](https://awesome-repositories.com/f/software-engineering-architecture/worker-task-dispatch-models/ui-responsive-background-workers.md) — Executes long-running logic in background worker threads to keep the interface fluid. ([source](https://github.com/Snapchat/Valdi/tree/main/docs))