Lynx 3.6: Lynx for AI, reactlynx-use, CSS for Design Engineering#

Lynx 3.6 is now officially released!

This release introduces Lynx for AI to enhance AI-native development capabilities, introduces reactlynx-use for improved developer experience, and enhances CSS capabilities for design expressiveness.

On the native side, Lynx 3.6 improves platform integration with standalone BackgroundRuntime and asynchronous TemplateBundle creation on HarmonyOS, along with Auto Layout support for LynxView on iOS.

Let's take a closer look at what's new in Lynx 3.6.

Lynx for AI: AGENTS.md and MCPs#

AI assistants are quickly becoming part of everyday development. With Lynx 3.6, we’re introducing Lynx for AI—a new section on our website at /ai to help coding agents understand Lynx, follow best practices, and help you ship.

In this release, we’re shipping AGENTS.md and two MCP servers as the first building blocks for agent-friendly Lynx projects (Skills coming soon!).

Lynx Docs MCP#

Lynx Docs MCP connects your coding agent (Gemini, Claude, Cursor, Copilot, etc.) to Lynx documentation via MCP, using llms.txt plus carefully designed prompts so the agent can retrieve the right docs and act on them.

Lynx DevTool MCP#

Lynx DevTool MCP helps coding agents connect to devices and inspect/control Lynx pages like DevTools: read elements/console/source code, perform interactions such as clicks and drags, and capture screenshots for multimodal analysis.

reactlynx-use: Hooks for ReactLynx#

reactlynx-use is a hooks toolkit for ReactLynx projects.

It combines two sets of hooks: community-proven utilities that follow standard React patterns (such as useEffectOnce, useDebounce, etc.), built upon the excellent foundation provided by react-use, and Lynx-specific hooks that expose Lynx capabilities and its dual-thread model through a React-friendly API.

Notable Lynx-specific hooks include:

• useVelocity: Track the velocity and direction of tap events on the main thread.
• useTapLock: Constrain main-thread tap interactions to a specific direction or range.
• useMainThreadImperativeHandle: A main-thread counterpart of useImperativeHandle.
• useEventListener: A flexible event subscription hook supporting exposure, disexposure, and more.

This keeps everyday logic in familiar hooks, while making it straightforward to tap into Lynx’s main-thread input model and runtime events when you need to.

CSS for Design Engineering#

From Lynx 3.6 onward, CSS takes on a more explicit role in design engineering and design systems. As a medium for expressing design intent, CSS describes how decisions are scoped and composed, and how visual structure and perception are formed in the interface.

This release focuses on improving CSS expressiveness through CSS variables, gradients, and filters.

For each capability, we’ve also prepared a polished demo that you can render and interact with on the web.

Inline CSS Variables for Computable Styling#

As of Lynx 3.6, CSS variables can be defined and referenced inline. This allows them to be applied directly at component boundaries (where JS-defined parameters are handed off to CSS), without relying on ancestor class switches (such as theme-light / theme-dark) or imperative JS setProperty calls.

It becomes essential when a component's style is user-selected or computed at runtime, since such continuous values cannot be represented by a finite set of predefined classes and would otherwise require imperative style updates.

style={{
  '--x': pointer.x,  // normalized parameter from JS
  backgroundColor: 'var(--dot-accent-color)', //defer resolution to component CSS
}}

Inline CSS variables provide a direct path for passing design parameters from JS into CSS's inheritance and computation model, so that design intent can be dynamically expressed and resolved while preserving component-level scoping and the declarative styling model.

Nested CSS Variables for Token Layering#

With Lynx 3.6, CSS variables can be defined in terms of other variables, allowing design tokens to be layered and resolved compositionally.

Design tokens capture high-level design decisions, such as colors, typography, spacing, shadows, and glows. Nested CSS variables enable these tokens to flow down into component-level variables and concrete visual styles.

/* Resolve and compose shadow tokens via nested CSS variables. */
.card {
  --blur: 12px;
  --ambient-shadow: 0 0 var(--blur) var(--color);
  box-shadow: var(--ambient-shadow), var(--rim-shadow);
}

This is especially important for composite declarations like box-shadow. A single box-shadow may contain multiple shadow layers, each combining several interacting dimensions such as offset, blur, spread, and color. With nested CSS variables, shadow layers can now be derived, combined, and adjusted from design tokens, while keeping their structure explicit and traceable in CSS.

Conic Gradients as Design Primitives#

Lynx 3.6 adds support for the conic-gradient() CSS image function. You can use it in CSS properties that accept <image> values, such as in background-image and mask-image, to create continuous angular color transitions directly in CSS.

.bg {
  background-image: conic-gradient(from 30deg, #ff7385, #fe69a1, #00d0f1);
}

Conic gradients are a natural fit for angular or cyclic representations, including color wheels and hue pickers. In practice, they’re a lightweight design primitive you can compose into interactive controls and visual tools.

CSS Filters for Shape Formation#

Lynx 3.6 extends CSS filter support with contrast, brightness, and saturate.

With these additions, the CSS filter property becomes a composable tool for shape formation. The newly supported contrast filter, when combined with the existing blur capability, amplifies overlapping regions and allows soft shapes to merge into coherent forms.

Visual structures such as merging, perceptual grouping, and fluid boundaries can be constructed directly in CSS, without relying on bitmap assets or custom rendering pipelines.

Native APIs#

Standalone BackgroundRuntime on HarmonyOS#

HarmonyOS now supports standalone BackgroundRuntime, aligning more closely with existing Android and iOS capabilities.

With standalone BackgroundRuntime, developers can run JavaScript tasks independently of rendering, or pre-create background runtimes to reduce LynxView initialization latency.

Asynchronous TemplateBundle Creation on HarmonyOS#

On Android and iOS, TemplateBundle.fromTemplate can be called from any thread. On HarmonyOS, however, ArkTS logic must run on the application's main thread.

To reduce main-thread I/O blocking, Lynx 3.6 introduces asynchronous APIs for creating TemplateBundle instances on HarmonyOS:

• TemplateBundle.fromTemplateAsync
• TemplateBundle.fromTemplateAsyncWithOption

AutoLayout Support for LynxView on iOS#

On iOS, LynxView now supports Auto Layout via [LynxView enableAutoLayout].

When enabled, LynxView can derive layout parameters directly from client-side Auto Layout constraints, eliminating the need to configure layout values manually.

Upgrade Guide#

To upgrade to Lynx 3.6, follow the integration guide and update your Lynx dependency versions accordingly. Lynx for AI

Lynx 3.5: Main Thread Script, React Compiler, HarmonyOS Improvements#

Lynx 3.5 is now officially released!

Following our stable bi-monthly release cadence, Lynx 3.5 brings several key improvements. This release adds experimental support for React Compiler, enhances main thread scripts with stopPropagation for better event bubbling control, enables immediate interactivity after first-frame rendering, and improves cross-thread communication. We've also expanded HarmonyOS platform support and introduced new features like the pointer-events CSS property.

Let's dive in and see what's new!

React Compiler #

React Compiler optimizes components at compile time, so you don't need to manually add useMemo, useCallback, or memo. You can now use React Compiler in ReactLynx to optimize your app's performance.

Learn how to enable React Compiler in ReactLynx.

Main Thread Script#

Event Stop Propagation #

When an event fires, it propagates through event bubbling, allowing different parts of your UI to handle it. Previously, Lynx only supported static event bubbling interception via catch-type event handler attributes, which lacked the flexibility of web standards. With Lynx 3.5, main thread scripts now support event.stopPropagation(), giving you runtime control over event bubbling that matches what you'd expect on the web.

function handleInnerTap(e: MainThread.TouchEvent) {
  'main thread';
  e.stopPropagation(); // ✋ stop event bubbling
  flash('inner');
}

Immediate Interactivity After First-Frame#

Previously, main thread events had to wait for the background thread to complete hydration before responding, creating a frustrating delay where the page looked ready but wasn't interactive, similar to the uncanny valley effect commonly seen in server-side rendering.

To eliminate this delay, we optimized the hydration process so that main thread events can respond immediately after the first frame is rendered. After the background thread hydrates, it correctly takes over the state from the main thread and replays runOnBackground calls, ensuring proper synchronization between threads while achieving immediate interactivity as soon as the first frame is visible.

function App() {
  const gotoUser = () => {
    'main thread';
    // go to second page
  };
  return (
    
      goto user
    
  );
}

Cross-Thread Function Calls Now Return Values#

Lynx provides runOnMainThread and runOnBackground for cross-thread function calls. In Lynx 3.5, both APIs now support async return values, making cross-thread communication more flexible and intuitive.

function App() {
  const countRef = useMainThreadRef(0);

  const addCount = (value) => {
    'main thread';
    countRef.current += value;
    return countRef.current;
  };

  const increaseMainThreadCount = async () => {
    // await for return value from main thread
    const result = await runOnMainThread(addCount)(1);
    console.log(result);
  };
}

Built-in Animations for <list> Updates#

The <list> element now includes default update animations out of the box. When you add, remove, or update list items, smooth transitions are applied automatically—no extra code needed.

<list update-animation="default"></list>

CSS Property: pointer-events #

Lynx 3.5 adds support for the pointer-events CSS property, giving you control over whether an element can receive touch events.

pointer-events: auto;  // Default value. The element can be the target of touch events.
pointer-events: none;  // The element cannot be the target of touch events.

HarmonyOS Improvements#

Fetch API#

Lynx provides a Fetch API that follows web standards, so it works just like you'd expect. With Lynx 3.5, Fetch API support extends to HarmonyOS, making cross-platform development even easier.

accessibilityAnnounce#

Lynx 3.5 adds accessibilityAnnounce() support on HarmonyOS, bringing it in line with Android and iOS. This method lets screen readers announce specific text, helping visually impaired users understand interface changes and action results.

lynx.accessibilityAnnounce(
  {
    content: 'hello lynx',
  },
  (res) => {
    console.log('result: ' + JSON.stringify(res));
  },
);

requestResourcePrefetch#

The requestResourcePrefetch API is now available on HarmonyOS, matching Android and iOS support. Use it to prefetch CDN resources like images, videos, and audio files for faster loading.

lynx.requestResourcePrefetch?.(
  {
    data: [
      {
        uri: 'https://demo.org/test.jpg',
        type: 'image',
        params: { priority: 'high', cacheTarget: 'disk' },
      },
    ],
  },
  (res) => {
    console.log(
      'prefetch status of each resource:',
      JSON.stringify(res.details),
    );
  },
);

Upgrade Guide#

To upgrade to Lynx 3.5, follow the integration guide and update your Lynx dependency versions.

One More Thing: Desktop Support Preview#

We previously planned for Lynx 3.5 to introduce desktop support. At the time, our plan was to open source our custom rendering pipeline and low-level integration APIs for desktop. Since then, we've decided to go further and open source the full desktop stack to give you a more battery-included experience. As a result, we would have to adjust our timeline to early 2026.

To get a preview of where we are heading, and how our approach both learns from and differs from prior arts like Electron and Qt, check out the talk "Bringing Lynx to Desktop and Beyond" from our Multi-Platform Lead ZhiXuan Wang at Ubuntu Summit 2025:

Announcing Lynx for HarmonyOS#

As introduced in the open-sourcing blog, Lynx's vision continues to be unlocking native for more platforms and more users. With HarmonyOS now adding new platform and device diversity to the market, we want to enable Lynx developers to reach these users with the same ease they already enjoy on Android, iOS, and Web with Lynx.

Today, we are happy to share that Lynx now provides public beta support for HarmonyOS, delivering feature parity in CSS, Elements, and APIs — along with the same level of native performance and user experience.

Consistent Rendering for HarmonyOS#

In Tutorial: Product Gallery we built a complex page using Lynx. Let's see how Lynx performs on Android vs HarmonyOS. As shown below, it achieves pixel-perfect alignment. This allows Lynx developers to write once, run everywhere - one codebase for Android, iOS, Web, and HarmonyOS apps, improving efficiency and maintainability.

The high consistency of Lynx's CSS and native elements across Android, iOS, and HarmonyOS is attributed to our architectural decision: Lynx's rendering pipeline is shared and consistent across multiple platforms. On HarmonyOS, we implement the same set of CSS, animations, and custom component by swapping the paint layer to issue instructions to ArkUI.

Native Lynx for HarmonyOS#

Native Painting with ArkUI#

Lynx on Harmony uses ArkUI components for painting. Lynx with OpenHarmony explored two approaches: ArkTS and C API.

We finally chose C API to directly map Lynx platform-ui-tree to HarmonyOS native UI, combining Lynx performance with ArkTS ecosystem benefits.

• Native UI Rendering: Using ArkUI's C API to convert element-tree operations directly to native UI calls, eliminating data conversion overhead for better performance in complex UI updates.

• Custom Native Element: By utilizing HarmonyOS's BuilderNode and Builder capabilities, developers can dynamically construct ArkTS subtrees and seamlessly embed them into the ArkUI node tree created by Lynx, achieving highly customized component implementations.

Native Interactions#

Lynx designed a complete event system that captures and responds to gestures and events in complex interactions.

• Custom HitTest: Accurately find the nodes responding to events on the Lynx platform-ui-tree, ensuring precise interactions.
• Gesture Support: Integrates HarmonyOS gesture like tap and longpress, ensuring native-like gesture experience on Lynx.
• Custom Gesture Control in Embedded Scenarios: Offers a comprehensive set of event APIs, including user-interaction-enabled and block-native-event, empowering Lynx developers to manage event propagation and handling logic for efficient processing of nested scrolling scenarios with native pages.

Native Extensions#

• Native Element Customization: Lynx provides rich built-in elements and supports integration of custom HarmonyOS native elements (via ArkTS), enabling developers to extend UI capabilities for highly customized interfaces while preserving native performance. More details: Custom Element.
• Native Modules: Lynx enables developers to call HarmonyOS native APIs from JavaScript, supporting both system services and custom native modules. More detail: Native Modules。

Create Your First Lynx on HarmonyOS#

Lynx's official website offers development documentation and demo code for developers to get started quickly and efficiently.

1. Use the Pre-built Lynx Explorer: For the easiest development setup, follow the Quick Start to install the Lynx Explorer hap package and begin Lynx development.

2. Local Build of Lynx Explorer: Developers interested in exploring the Lynx on HarmonyOS source code can also attempt local builds by following the guide Building Lynx Explorer for Harmony.

3. Integrate with Existing Apps on HarmonyOS: For developers with existing HarmonyOS application projects seeking to integrate Lynx, the official website provides Integrate with Existing Apps.

Welcome to the Lynx community. Let's build outstanding native experiences with Lynx on HarmonyOS!