Lynx — Cross-Platform Native UI Framework by ByteDance

Introduction

Lynx is an open-source framework from ByteDance that lets web developers build native mobile and web applications using CSS and React. Parts of TikTok are built with Lynx, and the framework is designed for both standalone apps and embedding native UI components inside existing apps.

What Lynx Does

• Renders truly native UI on Android and iOS using platform widgets
• Uses standard CSS for layout and styling, reducing the learning curve for web developers
• Supports React-style component authoring via ReactLynx
• Runs a multithreaded engine for smooth 60fps rendering
• Works in standalone mode or embedded mode inside existing native apps

Architecture Overview

Lynx's core engine is written in Rust and C++ for performance and memory safety. The engine parses CSS, resolves layout, and dispatches rendering commands to platform-native views. JavaScript runs on a separate thread, communicating with the main thread through an optimized bridge. This separation keeps the UI thread free from JS garbage collection pauses.

Self-Hosting & Configuration

• Requires Node.js 18+ and platform SDKs (Xcode 15+ for iOS, Android SDK API 21+)
• Scaffold a project with npm create lynx-app@latest
• Configure platforms in lynx.config.ts
• Use the Lynx DevTools Chrome extension for live debugging
• Build for production with npm run build generating platform bundles

Key Features

• Web-standard CSS engine (Flexbox, Grid, and common properties)
• Multithreaded architecture separating JS execution from UI rendering
• Embeddable: drop Lynx views into existing native apps
• Hot module replacement for instant feedback during development
• Battle-tested on hundreds of millions of devices via TikTok

Comparison with Similar Tools

• React Native — uses a JS bridge; Lynx uses a Rust-based engine with CSS-native layout
• Flutter — custom rendering engine (Impeller/Skia); Lynx uses platform-native views
• Valdi — compiles TS to native at build time; Lynx interprets at runtime with a high-performance engine
• Weex — similar web-to-native approach by Alibaba; Lynx has a newer Rust core and active maintenance
• NativeScript — accesses native APIs from JS; Lynx focuses on CSS-first layout and embedding

FAQ

Q: Is Lynx production-ready? A: Yes. ByteDance uses it internally across products including TikTok, serving hundreds of millions of users.

Q: Can I use Lynx inside my existing React Native or native app? A: Yes. Lynx supports an embedded mode where individual screens or components can be rendered inside a host native app.

Q: Does Lynx support web output? A: Yes. Lynx can target Android, iOS, and web from the same codebase.

Q: What languages does the codebase use? A: The engine is Rust and C++, the developer-facing API is TypeScript/React, and platform bindings are in Kotlin and Swift.

Sources

• https://github.com/nicedoc/nicedoc-lynx
• https://lynxjs.org/guide/