September 3rd, 2025

#Lynx 3.4: HarmonyOS Support, Trace and Recorder, Text Input Elements

Leron Liu

Engineering Manager, Performance @ Lynx

The Lynx Team

lynxjs.org

Lynx 3.4 is now officially released!

In line with the technical roadmap announced earlier this year, we've kept a steady bimonthly release rhythm. We skipped a blog for Lynx 3.3 since it had few user-facing features, but that release set the stage for a packed 3.4 releases, bringing new platform support for HarmonyOS, enabling Windows development, launching new developer tools Trace and Recorder, open-sourcing the highly-requested <input> and <textarea> elements, even more flexible animations, variable fonts, and more!

#New Platform Support

#HarmonyOS Support Public Beta

Lynx now officially supports the HarmonyOS platform. Developers can integrate Lynx into their HarmonyOS applications by following our Integration Guide. Additionally, we will soon be publishing a dedicated blog that takes a closer look at Lynx on HarmonyOS. Stay tuned.

#Support for Windows Development

• The build tool Rspeedy now supports the Windows, enabling developers to develop and build Lynx projects on Windows PCs;

• Developers can successfully compile the Android Lynx Engine and LynxExplorer application in a Windows environment;

Support for the Windows version of Devtool desktop is currently in development and will be released soon.

#New Developer Tools

Lynx 3.4 introduces two developer tools dedicated to improving the developer experience and debugging efficiency.

#Trace

Trace delivers comprehensive, end-to-end insight into your Lynx app’s rendering pipeline. From parsing and construction to layout and rendering, Trace captures and visualizes every stage of your page’s lifecycle. What was once a “black box” is now a transparent, interactive map of your app’s inner workings. Developers can finally observe, understand, and optimize performance at the deepest levels, making it easier than ever to identify bottlenecks and fine-tune for maximum efficiency.

#Recorder

Recorder is your time machine for Lynx apps. It logs every aspect of your app’s runtime behavior—from external resource loading and native module calls (with results), to the complete stream of user interactions. These sessions can be exported and replayed with pixel-perfect accuracy in LynxExplorer, transforming elusive, hard-to-reproduce bugs and tricky asynchronous issues into solvable problems. With Recorder, debugging is as easy as pressing “play,” offering clarity and confidence even in the most complex scenarios.

#Text Input Elements

In a recent UI capability survey conducted within the Lynx community, <input>/<textarea> elements emerged as the most highly anticipated core features, garnering over 50% of the vote.

Lynx 3.4 delivers two core text input elements. We will continue to improve core elements. Developers are welcome to continue voting in the discussion to help shape Lynx's future.

#Single-line <input> Element

inputsrc/base/index.tsx

Preview

#Multi-line <textarea> element

textareasrc/base/index.tsx

Preview

#List Recycle Optimization

Lynx 3.4 optimizes the recycling strategy of the <list> element to improve rendering performance.

#Recycle <list> Sticky Item

When a <list-item> is scrolled out of the <list> viewport, the original recycling mechanism would cache the item for reuse. Prior to Lynx 3.4, <list-item> elements with the sticky attribute were not recycled. In long lists making heavy use of the sticky feature, this could lead to high memory usage. Lynx 3.4 optimizes this strategy; sticky items are now also recycled after scrolling out of the viewport. If this change adversely affects your existing scenarios, you can temporarily disable this optimization by setting experimental-recycle-sticky-item={false}. If you encounter any issues, please provide feedback via an issue.

sticky <list-item> in Lynx 3.3	sticky <list-item> in Lynx 3.4

#Prevent <list-item> from Being Recycled

When a <list-item> contains complex components, recycling and re-updating the node incurs significant CPU overhead. Developers can now set recyclable={false} to prevent specific <list-item> from being recycled. Once disabled, the item will not be recycled when it slides out of the viewport and won't require re-rendering when it reappears, making it suitable for scenarios demanding rendering performance.

listsrc/recyclable/index.tsx

Preview

#More Flexible Animations

#Element.animate()

The MainThread.Element now features an animate() method for finely controlling CSS animations on the MTS (Main Thread Scripting), including operations like play, pause, and seeking, enabling more flexible interactive animations.

animationsrc/animate_mt/index.tsx

Preview

#CSS Variables Triggering Transition

Transition animations can now be triggered by changes in CSS variables, enhancing the flexibility and maintainability of transition animations. In multi-theme designs, developers can associate animation parameters with theme variables. Switching themes only requires modifying the variable values without changing selector logic to complete the theme transition.

animationsrc/transition_variable/index.scss

Preview

#Variable Fonts

Lynx 3.4 adds support for variable fonts. Developers can now perform finer adjustments to font styles using underlying CSS properties like font-variation-settings and font-optical-sizing. Read the MDN and web.dev guides to learn more about variable fonts technology.

textsrc/variable_font/index.tsx

Preview

#Upgrade Guide

Refer to the official guide on Integrating Lynx into Existing Apps, update the Lynx and LynxService dependency versions to complete the upgrade to Lynx 3.4.