I Tried TikTok’s Lynx – Is It Better Than React Native? | Code with Beto

TikTok’s Lynx is a new framework promising truly native UI for mobile and web using web technologies. Backed by TikTok and built with a Rust-based engine, it features dual runtime threads and web-like APIs for easier adoption. In this video, I explore Lynx’s setup, performance, and developer experience compared to React Native.

I walk through creating a Lynx project, running it on iOS simulators, styling with CSS including gradients, and building a simple list app. I also cover the current limitations in tooling, debugging, and navigation support. This is for developers curious about emerging cross-platform frameworks and how Lynx stacks up today.

What's inside

Introduction to Lynx and its TikTok backing
Lynx’s architecture: Rust engine and dual runtime threads
Creating a new Lynx project with Bun and Node.js 18
Running Lynx apps on iOS simulators with prebuilt binaries
Styling with CSS and using native-like components (View, Text)
Building a scrollable list and handling UI updates
Developer tooling and debugging experience with Lynx Studio
Current limitations: navigation, hot reload, and ecosystem maturity

Introduction to Lynx and its TikTok backing

Lynx is a fresh cross-platform framework from TikTok aiming to deliver truly native UI on mobile and web by leveraging web technologies. It is designed for performance with a Rust-based engine and dual runtime threads. Although TikTok itself doesn’t use Lynx, some TikTok Studio apps do. The framework is open source, inviting community contributions to grow the ecosystem.

The promise is to combine native UI speed with web-like APIs, making it easier for web developers to adopt. It supports styling with CSS, including gradients, and uses components like View and Text that map to native equivalents, similar to React Native.

Lynx’s architecture: Rust engine and dual runtime threads

Lynx runs on two distinct runtimes: a main thread runtime powered by PrimeJaz, a JavaScript engine optimized for Lynx, handling UI updates and event handling with high priority; and a background runtime for user code. This separation aims to speed up app boot time and keep UI responsive.

This dual runtime approach is unusual compared to typical single runtime frameworks. It helps Lynx deliver fast reloads and smooth UI updates, as seen in demo videos. The Rust engine underpins this performance focus.

Creating a new Lynx project with Bun and Node.js 18

To start with Lynx, you need Node.js 18 and Bun as the package manager. The quick start involves running a command like and naming your project. You can choose TypeScript or JavaScript, and enable formatting and linting presets.

The setup is straightforward and fast. After creation, you install dependencies with and open the project in your editor. This workflow feels modern and familiar to web developers.

Running Lynx apps on iOS simulators with prebuilt binaries

Lynx provides prebuilt binaries for iOS, so you don’t have to build the entire app from source for simulator testing. You download the Lynx Explorer app and drag your project bundle into the simulator. This is similar to Expo Go but for Lynx.

Running on a real iOS device requires building from source with Xcode, which is more involved. The prebuilt approach speeds up iteration during development but currently lacks some conveniences like a developer menu or hot reload.

Styling with CSS and using native-like components (View, Text)

Lynx lets you style components using regular CSS files, including advanced features like radial gradients and box shadows. Components like View and Text resemble React Native but map to native UI elements under the hood.

You can edit CSS and see quick reloads in the app, which feels fast and responsive. This CSS-based styling is a big plus for web developers used to standard web styling approaches.

Building a scrollable list and handling UI updates

I demonstrated building a simple list of Pokémon using Lynx’s List component for efficient scrolling. Initially, I struggled with scroll views and reloading, but after adjusting the component structure and keys, the list rendered and scrolled smoothly.

UI updates reload quickly, but there is no built-in hot reload or developer menu like React Native. You need to restart the app manually to see changes sometimes, which slows down iteration.

Developer tooling and debugging experience with Lynx Studio

Lynx Studio is an Electron-based developer tool providing mobile debugging features and UI inspection. It shows a live preview and terminal access but lacks the rich developer menu and debugging tools React Native developers expect.

The tooling is basic but promising. It supports inspecting elements and viewing logs but does not yet offer advanced debugging or fast refresh capabilities.

Lynx’s documentation is still sparse, especially around navigation and advanced APIs. There is no official navigation library yet, and native module support requires writing Objective-C or Swift manually, similar to React Native.

Hot reload and developer menus are missing, making development slower. The ecosystem is young, so expect rough edges and limited community packages. Lynx feels fast and promising but is not yet a full replacement for mature frameworks like React Native.

Resources

CourseReact Native course

Fundamentals through shipping: the concepts behind the prompts, with lifetime access.

Let's connect!

I Tried TikTok’s Lynx – Is It Better Than React Native?