Beyond WebView: Why Karrot Chose Lynx

Several screens in the Karrot app were built with WebView, incurring initial loading costs while fetching web documents and data from the network. Although SSR, native placeholders, and Service Worker caching provided improvements, they increased product complexity. Karrot sought an execution environment capable of displaying the actual UI from the very first frame.

The new runtime needed to meet the following conditions:

• Ability to be adopted on a per-screen basis while maintaining the existing native app
• Ability to deploy frontend bundles separately from the app binary
• Ability to start with one frontend engineer, one iOS engineer, and one Android engineer
• Ability to revert to the existing WebView implementation if issues arose

Lynx is a cross-platform technology that builds iOS and Android UIs using a development model close to React and CSS, and can be embedded as UI blocks within existing native apps. Instead of replacing the entire app, Karrot evaluated Lynx as a rendering layer to replace a subset of its WebView screens.

Karrot paid particular attention to the runtime and first-screen rendering approach rather than the React API or CSS syntax. Lynx's main-thread runtime uses PrimJS (QuickJS), which is easy to embed and has low initialization costs, making it suitable for reducing runtime preparation and first-screen display time—critical factors for mobile UIs.

Additionally, ReactLynx divides responsibilities between the main thread and background threads. The main thread handles the first screen and subsequent UI updates, while the background thread manages the full React runtime, component lifecycles, and side effects, ensuring that the first screen does not have to wait for background tasks.