2026年6月8日

胡静工程师 @ Lynx

王浩阳工程师 @ Lynx

艾浩工程师 @ Lynx

高晨超工程师 @ Lynx

方舟工程师 @ Lynx

夏梦非组件主管 @ Lynx

赵靖凯框架主管 @ Lynx

黄玄架构师 @ Lynx

复制 Markdown

自 AI Agent 兴起以来，我们一直在思考：如何让 Agent 驱动的生成式 UI 真正像原生 UI 一样融入真实的应用。Lynx 在这件事上有天然优势：它在 Mobile、Web、Desktop 上原生渲染，并能直接嵌入到你已有的应用中。所以当 Google 推出 Agent-to-UI 协议 A2UI，一个让 AI Agent 安全生成富交互界面、无需执行任意代码的开放协议时，我们觉得这是个很自然的契合点。

今天，我们的 A2UI 渲染器正式发布，把生成式 UI 带到 Lynx 上。

#流式生成，原生渲染

A2UI 协议天然支持流式传输： Agent 一边推理一边发送 UI 片段，客户端逐步渲染。 这种渐进式的交互模式让用户不再面对空白等待，而是看着界面随 Agent 的输出逐步成型。

Lynx A2UI 继承了 Lynx 的 双线程架构：A2UI 协议消息在后台线程完成解析，UI 更新则提交到主线程呈现，两者并行互不阻塞。 即使 Agent 高频输出大量 UI 片段，界面依然保持流畅响应。

#基于 lynx-ui 的能力目录

A2UI 的核心机制是 能力目录（Catalog）： 客户端向 Agent 声明自己支持哪些组件、函数和参数，Agent 只能在授权范围内选择。 这约束了生成边界，而每个组件具体如何渲染，则交由各端的渲染器决定。

Lynx A2UI 内置了一套基于 lynx-ui 的 默认组件目录，涵盖按钮、列表、弹窗等常见组件，开箱即用。 在默认目录之外，开发者通常还会 定义自己的组件，将业务能力注册到 Catalog 中，供 Agent 在对话中按需调用。

#可编程的 Action

A2UI 通过 Action 机制 处理用户交互：组件以结构化的方式描述用户意图，而不是执行任意代码。协议层面还把 Action 分成了两类：functionCall 在本地执行，Agent 完全不知情；event 则会回传给 Agent 继续推理。

Lynx A2UI 在协议之上提供了一层 API 抽象。<A2UI> 渲染容器订阅一个 MessageStore，按到达顺序保存原始协议消息。每当一个 Action 触发，onAction 会把它整理成统一的 { name, context } 交给应用：要么往同一个 store 里塞一条新消息，让界面立刻更新；要么发给后端 Agent，再把流式响应写回同一个 store。

#立即体验

Lynx GenUI Playground 提供了完整的交互体验，覆盖从模型对话到 UI 渲染的全链路。 无需本地搭建，打开浏览器即可与 Agent 对话并实时观察界面逐步生成。如果想在真机上感受原生渲染的效果，下载 Lynx Explorer，扫描页面中的二维码即可在移动设备上实时体验。

阅读 ReactLynx 中的 A2UI 指南，或直接查看更详细的 接入文档预览版 将 Lynx A2UI 集成到你的应用中。对应的 npm 包是 @lynx-js/genui/a2ui，支持从 A2UI 0.9 开始；我们也会与 Google 的 A2UI 团队一起适配 v1.0 候选版本。 如果你在使用中遇到问题、有功能建议，或想分享你的实践案例，欢迎在 GitHub 上提交 Issue 或参与讨论。

我们相信，AI 时代的跨平台框架不应只是能运行 AI 生成的代码，而应当为 Agent 提供一条安全、高效、原生的界面通道。Lynx A2UI 是我们在这个方向上迈出的第一步，我们也期待与社区一起探索 Open UI 等生成式 UI 的更多可能。

2026年5月31日

岳明基础设施主管 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

Lynx 3.8 已经正式发布！

正如 2026 路线图中提到的规划，Lynx 3.8 开启了新的月度发布节奏。切换到月度发布后，每个版本都会更小、更聚焦。3.8 的重点包括 Android 上的 WebAssembly、<frame> 自适应尺寸、按行数调整字号、HarmonyOS SessionStorage、LynxEngine 复用和 DevTool 协议更新。

进入 3.8 之前，也别错过我们最近发布的 lynx-ui：一套开箱即用的组件库，帮助你构建跨平台 Lynx 界面。

#Android 上的 WebAssembly

本次发布通过 PrimJS 运行时集成，在 Android 上引入了 WebAssembly 初步支持。Lynx 应用现在可以在后台线程加载和执行 WebAssembly 模块，让计算密集型逻辑在 JavaScript 性能不够时获得另一种实现选择。

当前实现主要覆盖常见的构造函数式使用方式：

const module = new WebAssembly.Module(wasmBytes);
const instance = new WebAssembly.Instance(module, imports);

const result = instance.exports.add(1, 2);

下面这个完整的 Lynx 页面示例展示了同样的调用流程：

当前实现完整支持 WebAssembly.Module 和 WebAssembly.Instance，并覆盖 WebAssembly.Memory、WebAssembly.Table 和 WebAssembly.Global 的常见用法。

#自适应布局、文本适配与平台行为

本次版本改进了 Lynx 内容对宿主容器的适配、受限布局中的文本呈现，并补齐了一些平台行为差异。

#<frame> 自适应尺寸与加载指标

<frame> 现在可以通过新的 auto-width 和 auto-height 属性，根据嵌入 Lynx 页面的内容确定自身尺寸，减少宿主侧手动计算尺寸的需要。

<frame src={url} auto-width auto-height />

它也增强了启动和可观测性支持，包括预设布局、更好的 data 与 global-props 传递、通过 layoutchange 上报固有尺寸，以及 Android 和 iOS 上的 <frame> 加载指标。

#按行数调整字号

新的 -x-auto-font-size-line-ranges CSS 属性可以根据实际渲染行数，为不同文本行数设置不同的字号搜索范围。配合 -x-auto-font-size: true 使用：

.title {
  -x-auto-font-size: true;
  -x-auto-font-size-line-ranges:
    line-range(1, 18px, 22px), line-range(2, 16px, 18px),
    line-range(3 to infinity, 14px);
}

这适用于标题、卡片和信息流等场景，让单行、双行和多行文本分别使用更合适的字号范围。

css-apisrc/-x-auto-font-size-line-ranges/index.scss

Code

预览

#桌面端曝光

macOS 和 Windows 现在支持 enable-exposure-ui-clip，让开发者可以在复杂布局中更精细地控制曝光计算。

#原生侧集成

#LynxViewGroup 中的引擎复用

在 Android 上，LynxViewGroup 现在可以为同一个组创建出的 LynxView 缓存并复用 LynxEngine。当应用反复基于同一个 template bundle 创建视图时，例如多页面或嵌入式视图场景，这一能力会很有用。

不少应用里，用户会反复离开并重新进入同一个 Lynx 页面。此时，缓存 LynxEngine 可以避免反复创建和销毁引擎，并复用引擎已经完成的工作，例如已经构建好的 UI 树，从而让页面再次进入时更快完成渲染。

应用无需直接管理 LynxEngine。创建启用缓存的 group，将它传给每个 LynxViewBuilder，并在不再需要时释放即可：

ILynxViewGroup group = new LynxViewGroupBuilder()
    .setContext(context)
    .setTemplateBundle(templateBundle)
    .setGlobalProps(globalProps)
    .setEnableCacheEngine(true) // 启用缓存。
    .build();

LynxView first = new LynxViewBuilder()
    .setLynxViewGroup(group)
    .build(context);

// 稍后，使用同一个 group 创建的另一个 LynxView 可以复用缓存的引擎。
LynxView second = new LynxViewBuilder()
    .setLynxViewGroup(group)
    .build(context);

group.release();

#资源加载回调

LynxViewClientV2 新增 onResourceLoaded 回调，使客户端可以在原生侧观察资源加载过程。这为宿主应用提供了统一入口，用来收集资源耗时、成功或失败状态以及其他诊断信息。

#HarmonyOS 上的 SessionStorage

HarmonyOS 现在支持 SessionStorage API，可用于跨页面数据共享。前端代码可以在 HarmonyOS 上使用已有的 lynx.setSessionStorageItem、lynx.getSessionStorageItem、lynx.subscribeSessionStorage 和 lynx.unsubscribeSessionStorage API，管理 session 级的跨页面状态。

#DevTool 协议与调试

DevTool 协议和调试能力改进包括：

• MTS 调试现在支持已预执行、已预解码的 MTSRuntime 实例。
• CDP 支持新增 DOM.describeNode。
• DOM.getDocument 现在支持 depth 参数。
• DevTool 可以通过 CDP Performance domain 查询 PerformanceEntry 数据。

#升级指南

参照官网接入 Lynx 到现有应用，更新 Lynx 依赖版本，即可完成 Lynx 3.8 版本升级。

#感谢

Lynx 3.8 是月度发布节奏的第一步：更小的版本、更清晰的升级路径，也让我们更快响应反馈。

感谢每一位正在使用 Lynx、尽早试用新版本、提交 issue，并帮助项目在开放社区中持续进步的开发者。下次月度发布再见。

2026年5月22日

方舟工程师 @ Lynx

王洋工程师 @ Lynx

罗昶安工程师 @ Lynx

夏梦非组件主管 @ Lynx

杜光瑜设计工程 @ Lynx

黄玄架构师 @ Lynx

复制 Markdown

lynx-ui 在去年 12 月的 React Advanced London 上首次亮相并开源。几个月来，我们一直在打磨组件、完善文档、丰富示例。今天，lynx-ui 正式发布。

#原生基础，Web 速度

内置元素和 XElement 为 Lynx 提供了至关重要的底层能力：流畅滚动、精准手势、原生渲染。但产品不是仅靠原子就能构建的，这正是组件的意义所在。Lynx 采用分层架构：原生层提供底层基础能力，Web 前端技术栈则在其上负责组件组合、状态管理、样式系统与产品特定行为的扩展。

lynx-ui 落地了这一分层思路：保留原生用户体验，提供 Web 级别的开发速度。

#可组合的原语（Primitive）

当一个组件把所有东西都封在里面，每来一个新需求就要加一个 prop，最终会变成谁也不敢动的黑盒。lynx-ui 是一个 unstyled 组件库。每个组件是一个 primitive，负责行为和状态，但不附带任何视觉样式。一个 primitive 由多个 part 组成，每个 part 独立渲染、独立样式化。

Popover 展示了这个思路。它不是一个不透明的单体组件，而是由各司其职的 part 组合而成：PopoverRoot 管理状态，PopoverTrigger 定义意图，PopoverPositioner 处理定位，PopoverContent 保持结构独立。

正因为 primitive 是 unstyled 的，同样的可组合模型也为设计系统奠定了基础。你可以通过样式与主题机制定义自己的主题，也可以按照 shadcn/ui 的模式在 primitive 之上组合出带主题的 wrapper。

#LUNA

LUNA 是我们在此基础上构建的参考设计语言。

LUNA 从 Lynx 标志性的渐变色出发，将品牌表达调适为更柔和的 UI 色调：温暖的粉红和玫瑰色渐变至薰衣草和水蓝色。在 LUNA 中，渐变作为一等视觉材质，用于表达形态和运动，赋予组件一种流动介质的质感。这种细腻也延伸到了 token 命名：LUNA 描述的是表面的感受，而非其位置——ambient 融入背景，faint 处于感知的阈值，veil 和 film 创造柔和的半透明层。

#可编程的交互

手势驱动的组件对两件事要求很高：行为要可定制，响应要低延迟。滑动、拖拽、轻扫，每一帧都在被用户感知。反馈一旦跟不上手势，体验就不再是原生的。

Lynx 采用双线程模型，JavaScript 默认跑在后台线程，主线程专注渲染。需要时，主线程脚本可以把交互逻辑搬到主线程，逐帧行为因此完全可编程。Swiper 就是一个例子：拖拽时卡片逐帧跟手，不会事后追赶。

有了原生基础和可编程的交互，动效不再只是装饰，而是组件行为的一部分。

#Motion

Motion 是 Web 社区最知名的动画库之一，同时支持弹簧和贝塞尔曲线过渡。有了主线程脚本的可编程性做基础，我们把 Motion 搬到了 Lynx 上，实验版随 lynx-ui 一起发布。@lynx-js/motion 通过一层很薄的适配直接使用 Motion 源码，保持了和 Web 完全一致的使用方式。

Sheet 是一个很好的例子。拖拽、阻尼、释放、归位，这些需要连贯成一个完整的行为。主线程脚本让交互紧贴渲染，Motion 控制面板怎么动，两者配合之下，面板给人一种被"握住"的感觉，而不是在回放动画。

#立即体验

lynx-ui 目前已支持 iOS、Android 和 HarmonyOS，Web 和 Desktop 支持也在推进中。阅读简介了解全貌，或直接跳到快速开始安装 @lynx-js/lynx-ui-*。

下载 Lynx Explorer，扫描组件示例中的二维码，即可在真机上查看实际效果。你也可以直接将组件集成到自己的 Lynx 应用中，在真实业务流中试用。

我们希望 lynx-ui 能在真实应用的实践中不断成长。如果它体验很好、阻碍了你、或者缺少了什么，请在 lynx-family/lynx-ui 仓库中告诉我们。一起塑造它的未来。

2026年4月16日

icecreamx10多平台主管 @ Lynx

夏梦非组件主管 @ Lynx

upupming工程师 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

Lynx 3.7 已经正式发布！

本次版本正式支持 macOS 和 Windows 桌面端平台，引入了新的 SVG 元件，引入了新的 Agent Skills 以提升可观测性，并为 ReactLynx 带来了更简单的 External Bundle presets 和跨线程共享模块能力。

#桌面端支持：macOS 与 Windows

我们此前计划在 Lynx 3.5 中开源桌面端支持，随后决定进一步开源完整的桌面端技术栈。在 Lynx 3.7 中，这一愿景已成为现实。

Lynx 正式支持 macOS 和 Windows 作为一级平台。你现在可以在原生桌面应用中构建和渲染 Lynx 视图，使用与移动端和 Web 端完全相同的前端技术栈和工具链。 我们也计划在最近开源 Lynxtron，它是一个 Electron-like 的桌面应用框架，使用 Lynx 作为 UI 渲染层。敬请期待！

desktopsrc/mouse-cursor/App.tsx

Code

预览

#CSS 与元件支持

渲染核心在各平台间复用（包括 CSS 引擎），CSS 属性覆盖率自然接近完整，目前达 97%（319 项中的 311 项）。桌面端界面由 Lynx 自绘渲染，而不是通过系统原生控件拼装，原生元件需要基于自绘渲染器重新实现，元素属性覆盖率目前为 73%（246 项中的 179 项），macOS 与 Windows 的支持范围保持一致，并持续扩展中。已覆盖的 CSS 能力包括：

• 布局：Flexbox、Grid、Linear Layout、完整盒模型、定位与相对定位。
• 样式：排版、边框、阴影、渐变、蒙版、滤镜，以及 CSS 自定义属性。
• 动画：animation、transition、@keyframes 和完整的 transform 能力。

这意味着大多数为移动端构建的 Lynx 页面已经可以在桌面端渲染，前端代码通常只需极少修改甚至无需修改。每个 API 页面上方均提供兼容性概览，下方附有详细的兼容性表格。也可在 API 兼容状态看板 上一览全局，现已包含 macOS 和 Windows 列。

#桌面端专属能力

#鼠标事件

<view
  onMouseDown={(e) =>
    console.log(`按键 ${e.button} 位置 (${e.clientX}, ${e.clientY})`)
  }
  onMouseMove={(e) => handleHover(e)}
  onMouseLeave={() => resetState()}
/>

#键盘事件

<input
  onKeyDown={(e) => console.log(`按下按键: ${e.key}`)}
  onKeyUp={(e) => console.log(`释放按键: ${e.key}`)}
/>

#滚轮事件

<view onWheel={(e) => console.log(`滚轮偏移: ${e.deltaX}, ${e.deltaY}`)} />

#CSS cursor

<view style={{ cursor: 'pointer' }}>
  <text>Hover me</text>
</view>

#快速上手

桌面端的接入细节可直接查看将 Lynx 集成到现有应用。该页面现已包含与 Android、iOS、HarmonyOS、Web 并列的桌面端指南。 后续也会有一个由 Lynxtron 构建的 playground 应用，在桌面端更直接地获取并运行 Lynx 示例。

#<svg>：可缩放矢量图形

<svg> 作为独立元件在 Lynx 3.7 中新增，为图标、图表和其他分辨率无关的图形场景提供跨平台的原生矢量渲染能力。

<svg> 支持内联矢量内容：

svgsrc/base/index.tsx

Code

预览

也可以直接加载外部 SVG 资源：

<svg
  style={{ width: '100px', height: '100px' }}
  src="https://example.com/icon.svg"
/>

为了最大化性能，<svg> 将解析工作交由后台独立线程处理，并将整个图形作为一个原生视图进行渲染，而非为每个节点创建独立的元素。这使得主线程在解析耗时和节点数量上都保持轻量，非常适合图标、插画和图表等静态展示场景。它支持 17 个常用 SVG 标签和超过 40 个属性，并在 Android、iOS、HarmonyOS、macOS、Windows 和 Web 之间保持一致的渲染表现。

#Agent Skills

作为 Lynx for AI 的一部分，六个 Agent Skills 现已开源。安装任意技能：

npx skills add lynx-community/skills -s <skill-name>

配合 Lynx DevTool MCP，coding agent 现在可以检查运行中的页面、验证交互并缩短自调试链路。

#ReactLynx

#External Bundle Presets

External Bundle 允许你构建一次 Lynx bundle，然后在多个 Lynx 应用中运行时加载。当你需要跨应用共享 ReactLynx 组件或通用业务 bundle 时，可以使用它。与 Chunk Splitting 用于拆分单个应用内代码不同，External Bundle 专为跨应用复用而设计。

Lynx 3.7 通过 defineExternalBundleRslibConfig 新增了内置 presets 以简化配置：

import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

export default defineExternalBundleRslibConfig({
  id: 'comp-lib',
  source: {
    entry: {
      './App.js': './external-bundle/CompLib.tsx',
    },
  },
  plugins: [pluginReactLynx()],
  output: {
    externalsPresets: {
      reactlynx: true,
    },
  },
});

然后在宿主应用里加载这份 bundle：

#跨线程共享模块

默认情况下，主线程函数无法直接调用没有 'main thread' 指令的普通函数，这使得代码复用变得困难。共享模块机制解决了这一限制，允许你显式声明某些模块可在主线程和后台线程之间共享。

在 import 语句后添加 with { runtime: 'shared' }，该模块导出的函数、类和对象即可在主线程函数中直接调用：

#升级指南

参照官网接入 Lynx 到现有应用，更新 Lynx 依赖版本，即可完成 Lynx 3.7 版本升级。

2026年4月13日

刘守群工程主管 @ Lynx

复制 Markdown

去年，我们在 TikTok 的支持下将 Lynx 框架开源，此后收到了开发者和更广泛社区的宝贵反馈。我们还分享了 2025 年路线图，聚焦于保持一致的发布节奏、扩展多平台支持并开放更多核心功能。

随着从 v3.2 到 v3.6 的持续发布，Lynx 已取得多项重要进展：

• 全面支持 Web 和 OpenHarmony。
• 扩展 lynx-ui 覆盖范围，并提升原生 API 的稳定性。
• 社区中涌现出多个新项目，如 miso-lynx、Vue Lynx 等。

与此同时，我们认识到构建一个优秀的开发者框架是一项长期的努力——尤其是在快速发展的 AI 时代。今天，我们很高兴分享 2026 年 Lynx 开源路线图。

#1. 更快且更可预测的发布节奏

在过去一年中，Lynx 采用了双月发布周期。随着即将发布的 v3.7 完成本轮周期，我们将从 2026 年年中开始过渡到每月发布一次。

在开发和发布过程中，我们将持续改进：

• 发布说明与升级指南。
• 核心 API 的稳定性保障。
• 跨版本的长期可维护性。

#2. 拥抱 AI

AI 正在从根本上重塑软件的构建方式。我们相信，在开放环境中构建框架，是跟上 AI 发展节奏并成为真正 AI 原生框架的关键。

今年，我们将重点投入更加稳定、结构化的 API 设计，以及高质量、对大模型友好的文档（lynx-website）、Agent Skills、开发工具与示例。

同时，我们也将探索基于 Lynx 的生成式 UI，因为我们认为这是 AI 时代跨平台框架的重要方向。我们的目标是让 Lynx 成为最具 AI 原生能力的跨平台框架之一。

#3. 持续投入多平台，包括桌面端

多平台支持始终是我们的核心使命，不仅体现在渲染层，也体现在能力体系、API 设计以及整体开发者体验上。

目前我们已正式支持 Android、iOS、Web 和 OpenHarmony，同时也开源了面向桌面平台（macOS / Windows）的渲染引擎 Clay。

今年，我们将继续提升桌面平台的生产可用性，并加强与行业生态的融合，包括 Lynxtron（即将推出），它将 Lynx 与 Electron 结合用于桌面开发。

#4. 生产就绪的基础设施

开源后，我们收到了大量开发者反馈，希望获得开箱即用的解决方案以快速构建跨平台应用。为应对这些需求，TikTok 已开源 Sparkling，提供应用脚手架与原生导航帮助开发者快速上手。我们将持续增加更多原生能力，包括设备 API 等。

在框架层，我们将通过 lynx-ui 提供更多生产就绪的 UI 组件，扩展动画与 CSS 能力以打造更高质量的 UI 体验，同时持续投入主线程脚本等关键特性，并进一步提升各平台的运行时性能。

在工具链层，我们将开放更多性能分析与诊断工具，并持续增强 Lynx DevTool，为开发者提供一站式的开发与调试体验。

#5. 加强社区协作

跨平台框架是一个由开源社区持续推动、长期演进的技术领域。Lynx 本身也深受这一生态的启发。

Lynx 工具链基于 Rspack 构建，我们已与 Rspack 社区保持紧密合作，共同打造高性能的 Rspeedy 工具链。这一与 Web 工具生态的伙伴关系，也为更广泛的社区协作奠定了基础。

展望未来，我们将进一步加强与更广泛的 Web 社区的协作，包括 React、Vue.js、Motion 等项目，并持续完善 MiniApps 能力，使其成为真正可用于生产环境的解决方案。

我们也有开放职位，欢迎加入我们，一起参与 Lynx 的成长之旅。点击这里查看机会。

2026年1月30日

刘继龙性能主管 @ Lynx

杜光瑜设计工程 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

Lynx 3.6 已经正式发布！

本次版本推出面向 AI 的 Lynx 以增强 AI 原生开发能力，引入 reactlynx-use 以提升开发体验，并围绕设计表达能力增强了 CSS 能力。

在原生侧，Lynx 3.6 进一步完善平台集成，在 HarmonyOS 上支持独立的 BackgroundRuntime 与异步创建 TemplateBundle，并在 iOS 上新增 LynxView 的 Auto Layout 支持。

下面我们一起来看看 Lynx 3.6 带来了哪些新变化。

#面向 AI 的 Lynx：AGENTS.md 与 MCP

AI 助手正在快速成为日常开发的一部分。Lynx 3.6 正式引入 Lynx for AI：我们在官网上线了 /ai 专区，帮助 coding agent 更容易理解 Lynx、遵循最佳实践，并更高效协助你交付。

本次版本我们提供 AGENTS.md 以及两项 MCP Server，让项目更懂 Lynx（Skills 即将发布！）。

#Lynx Docs MCP

Lynx Docs MCP 通过 MCP 将你的 coding agent（如 Gemini、Claude、Cursor 或 Copilot）接入 Lynx 文档，并结合 llms.txt 与精心设计的提示词，让 agent 能更快检索到正确资料并更好地完成开发任务。

#Lynx DevTool MCP

Lynx DevTool MCP 是一个 MCP 服务器，帮助编码代理连接设备并像 DevTools 一样检视与操控 Lynx 页面：读取元素/控制台/源码、执行点击拖拽等交互，并支持截图给多模态模型分析。

#reactlynx-use：为 ReactLynx 而生的 Hooks

reactlynx-use 是一套面向 ReactLynx 项目的 Hooks 工具集。

它包含两类 Hooks：一类是开源社区长期验证、遵循“标准 React”范式的通用 Hooks（如 useEffectOnce、useDebounce 等），并受益于 react-use 提供的优秀基础；另一类则是面向 Lynx 能力与双线程模型的特制 Hooks，把主线程交互、运行时事件等能力以更 React 的方式暴露出来。

其中，面向 Lynx 的 Hooks 代表包括：

• useVelocity：追踪主线程 Tap 事件的速度与方向。
• useTapLock：将主线程 Tap 事件限制在指定的方向与范围内。
• useMainThreadImperativeHandle：useImperativeHandle 的 Lynx 主线程版本。
• useEventListener：提供更灵活的事件监听能力，支持 exposure、disexposure 等。

这使你可以用熟悉的 Hooks 来处理日常逻辑，并在需要时顺畅接入 Lynx 的主线程输入模型与运行时事件。

#为设计工程而生的 CSS

从 Lynx 3.6 开始，CSS 在设计工程与设计系统中承担了更加明确的角色。作为一种表达设计意图的媒介，CSS 既描述设计决策如何在不同层级中被组合与生效，也直接参与界面中视觉结构与感知的形成。

本次版本围绕 CSS 变量、渐变与滤镜三个方面，增强了 CSS 的表达能力。

我们也为每一项能力准备了精彩的 Demo，它们都可以在 Web 端渲染并支持交互体验。

#内联 CSS 变量：用于可计算样式

自 Lynx 3.6 起，CSS Variable（CSS 变量）可以以内联方式定义和引用。这使它们能直接被应用在组件边界处（JS 参数进入 CSS 解析流程的地方），而无需依赖祖先节点的 class 切换（如 theme-light / theme-dark），也不需要命令式的 JS setProperty 调用。

当组件的样式由用户选择或在运行时计算得到时，这种能力尤为关键，因为此类连续值无法通过有限的预定义 class 集合来表达，否则就只能退回到命令式的样式更新方式。

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

Inline CSS Variables（内联 CSS 变量）通过 JS 将设计参数交由 CSS 的继承与计算体系处理，使设计意图能够被动态解析与表达，并在不破坏组件作用域隔离的前提下，维持声明式的样式模型。

design-guidesrc/force_field/field.tsx

Code

预览

#嵌套 CSS 变量：用于设计变量分层

自 Lynx 3.6 起，CSS Variable（CSS 变量）可以基于其他变量进行定义，从而支持 Design Token（设计变量）的分层组合与逐步解析。

Design Token 用于承载高层级的设计决策，例如颜色、排版、间距、阴影与光影效果。通过 Nested CSS Variables（嵌套 CSS 变量），这些设计决策可以层层向下传递，落到组件级变量，并最终形成具体的视觉样式。

/* 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);
}

这一能力在处理 box-shadow 这类复合声明时尤为关键。一个 box-shadow 往往包含多个阴影层，每一层又由位移、模糊、扩散和颜色等多个相互关联的维度共同定义。 借助 Nested CSS Variables，阴影层现在可以由 Design Token 派生并进行组合，并在 CSS 中保持清晰、可追溯的结构关系。

design-guidesrc/soft_glow/index.css

Code

预览

#圆锥渐变：作为设计原语

Lynx 3.6 新增支持 conic-gradient() 这一 CSS 图像函数。它可以用于支持 <image> 类型值的 CSS 属性中，例如 background-image 和 mask-image，用于在 CSS 中直接生成连续的角度型颜色过渡。

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

圆锥渐变（Conic Gradient）非常适合用于表达角度或周期性结构，例如颜色环、色相选择器等。在实际场景里，它更像一种轻量的设计原语，可以被组合进交互控件与可视化工具中。

design-guidesrc/color_wheels/index.css

Code

预览

#CSS 滤镜：用于形态生成

Lynx 3.6 扩展了 CSS Filter（CSS 滤镜）能力，新增支持 brightness、contrast 与 saturate。

随着这些能力的引入，CSS filter 属性成为一种可组合的形态生成工具。将新增支持的 contrast 滤镜与既有的 blur 能力配合使用，可以放大重叠区域的视觉响应，使原本柔和、分散的形状逐渐融合为连贯的整体。 诸如形状融合、感知分组与流动边界等视觉结构，可以直接通过 CSS 构建，而无需依赖位图资源或额外的自定义渲染管线。

design-guidesrc/gooey_effect/index.css

Code

预览

#Native APIs

#HarmonyOS 支持独立的 BackgroundRuntime

HarmonyOS 新增支持独立的 BackgroundRuntime，与 Android 和 iOS 的现有能力进一步对齐。

借助独立的 BackgroundRuntime，开发者可以在不依赖渲染的情况下独立运行后台 JS 任务，或提前创建后台运行时，以降低 LynxView 初始化阶段的延迟。

#HarmonyOS 平台新增异步创建 TemplateBundle 的方法

在 Android 和 iOS 平台上，TemplateBundle.fromTemplate 可以在任意线程执行；而在 HarmonyOS 上，ArkTS 逻辑必须运行在应用主线程。

为减少主线程 I/O 阻塞，Lynx 3.6 在 HarmonyOS 上引入了异步创建 TemplateBundle 的 API：

• TemplateBundle.fromTemplateAsync
• TemplateBundle.fromTemplateAsyncWithOption

#iOS 平台 LynxView 新增 enableAutoLayout 能力

iOS 平台新增方法 [LynxView enableAutoLayout]。

开启后，LynxView 可以直接从客户端的 Auto Layout 约束中解析排版参数，无需再手动设置 LynxView 的布局配置。

#升级指南

参照官网接入 Lynx 到现有应用，更新 Lynx 依赖版本，即可完成 Lynx 3.6 版本升级。

2025年11月10日

刘继龙性能主管 @ Lynx

黄玄架构师 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

Lynx 3.5 已经正式发布!

延续稳定的双月发布节奏，Lynx 3.5 带来了多项重要更新：React 编译器的实验性支持；主线程脚本支持了 stopPropagation 事件冒泡拦截、首帧即可交互、跨线程通信等一系列增强；进一步对齐了 HarmonyOS 平台能力，并新增了 <pointer-events> CSS 属性等功能。

让我们一起来看看有哪些新特性！

#React 编译器 experimental

React Compiler 可以在编译期对组件进行优化，从而无需手动使用 useMemo、useCallback 和 memo。你现在可以在 ReactLynx 中使用 React Compiler 来优化你的应用性能。

查看如何在 ReactLynx 中开启 React Compiler。

#主线程脚本

支持用 stopPropagation 阻止事件冒泡 Web 友好

当一个事件被触发后，它会沿着响应链进行传播。此前，虽然 Lynx 已经支持使用 catch 类型的事件处理器属性静态拦截事件冒泡，但这种方式仍缺乏 Web 一样的表达力。得益于主线程编程能力，Lynx 3.5 在主线程脚本中支持了和 Web 一致的 event.stopPropagation()，实现运行时的事件冒泡拦截。

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

eventsrc/event_stop_propagation/index.tsx

Code

预览

#首帧即可进行主线程交互

此前，主线程事件需要等待后台线程完成“激活”（Hydration）后才能响应，导致页面在首帧可见后，仍存在一段不可交互的延迟，类似服务端渲染中的常见的恐怖谷效应。

为了消除这段延迟，我们优化了激活流程，使得主线程事件可以在首帧渲染后立刻响应，并在后台线程激活后正确接管主线程中的状态并重放 runOnBackground，在保证线程间的正确同步的同时，实现首帧可见即可交互。

function App() {
  const gotoUser = () => {
    'main thread';
    // go to second page
  };
  return (
    <view main-thread:bindtap={gotoUser}>
      <text>goto user</text>
    </view>
  );
}

#跨线程函数调用支持返回数据

Lynx 提供了 runOnMainThread 和 runOnBackground 两个 API 用于跨线程函数调用。在 Lynx 3.5 中，这两个 API 现在支持异步返回值，让跨线程通信更加灵活和直观。

import { runOnMainThread, useMainThreadRef } from '@lynx-js/react';

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);
  };
}

#<list> 元件内置更新动画

为了提供更生动、自然的列表交互体验，<list> 元件现已内置默认的更新动画。当列表项被插入、删除或更新时，将自动触发平滑的过渡效果，无需开发者编写额外代码。

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

#CSS 属性 pointer-events Web 友好

Lynx 3.5 版本新增 CSS 属性 pointer-events 来指定元件是否能够响应触摸事件。

pointer-events: auto;  // 默认值，此时，节点可以响应触摸事件。
pointer-events: none;  // 节点不能响应触摸事件

css-apisrc/pointer-events/App.tsx

Code

预览

#HarmonyOS 功能补齐

#Fetch API

Lynx 提供了与 Web 标准兼容的 Fetch API，用法与 Web 平台保持一致。Lynx 3.5 将 Fetch API 的支持扩展到了 HarmonyOS 平台，让跨平台开发更加便捷。

#accessibilityAnnounce

Lynx 3.5 在 HarmonyOS 平台补齐了 accessibilityAnnounce() 方法，与 Android 和 iOS 平台保持一致。该方法可调用屏幕阅读器朗读指定文本，帮助视觉障碍用户感知界面状态变化或操作结果。

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

#requestResourcePrefetch

requestResourcePrefetch API 现已支持 HarmonyOS 平台，与 Android 和 iOS 保持一致。该 API 允许开发者主动预加载 CDN 资源（目前支持 image、video 和 audio），以提升资源加载性能。

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),
    );
  },
);

#升级指南

参照官网接入 Lynx 到现有应用更新 Lynx 依赖版本，完成 Lynx 3.5 版本升级。

#桌面端支持预告

我们原本计划在 Lynx 3.5 版本正式引入桌面端支持，最初只是打算开放自渲染管线和底层集成 API。经过讨论，我们决定更进一步，开源整套桌面端技术体系。因此发布时间将顺延至 2026 年初，敬请期待。

如果你想抢先了解 Lynx 桌面端的整体设计思路，以及我们与 Electron 和 Qt 等主流方案有哪些异同，欢迎观看我们多平台负责人 王之轩 在 Ubuntu Summit 2025 的主题演讲 《Bringing Lynx to Desktop and Beyond》：

2025年9月25日

白强软件工程师

石文涛渲染主管 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

如 Lynx 开源博客所介绍，我们的愿景始终是为 更多平台与更多用户 解锁原生能力。随着 HarmonyOS NEXT 的发布为市场带来新的平台和设备多样性，我们希望 Lynx 开发者也能够像在 Android、iOS 和 Web 上一样，轻松地触达这些用户。

今天，我们很高兴地宣布，Lynx 现已提供 HarmonyOS 的公开测试版支持，在 CSS、UI 元件、API 上实现了功能对等，并带来同等级别的性能表现与原生体验。

#功能对齐的 Lynx for HarmonyOS

在之前 教程：产品双列 中，我们使用 Lynx 实现了一个复杂的页面，我们来看一下 Lynx 分别运行 Android 与 HarmonyOS 上的表现；如下图所示，整体能实现像素级对齐。基于此， Lynx 开发者可以做到一次编写，多端运行，使用同一份代码库同时构建 Android、iOS、Web 和 HarmonyOS 应用，提高开发效率和代码可维护性。

Lynx 在 Android、iOS、HarmonyOS 上 CSS、原生组件等功能高度一致得益于 Lynx 的架构实现：在多平台上 Lynx 的渲染流水线是共用、一致的。在 HarmonyOS 上，Lynx 渲染指令与 HarmonyOS 的 ArkUI 渲染组件对接，进而实现 CSS 属性绘制、动画、自定义组件等。

#原生的 Lynx for HarmonyOS

#渲染指令直驱 ArkUI

Lynx 渲染指令直接对接 ArkUI 组件，Lynx 与 OpenHarmony 一起探索了两种对接方式：ArkTS 与 C API。

Lynx for HarmonyOS 最终选择 C API 方式将 Lynx platform-ui-tree 直接映射为 HarmonyOS 的原生组件。既能保证 Lynx 的性能优势，同时也能结合 ArkTS 的丰富生态与能力。

• 原生组件渲染：利用了 ArkUI 的 C API 将 element-tree 操作直接转换为对原生 UI 节点的调用，其渲染指令可以绕开 ArkTS 虚拟机的执行开销，不存在语言间数据传递的转换，在 HarmonyOS 上实现接近甚至超越原生 ArkTS 的渲染性能。

• 自定义元件：通过 HarmonyOS 提供的 BuilderNode 和 Builder 可动态构建 ArkTS 子树，直接嵌入到 Lynx 创建的 ArkUI 节点树，以实现高度定制自定义元件。

#复杂交互处理

Lynx 在 HarmonyOS 构建了一套完整的事件处理机制，能在复杂交互场景下捕获和响应手势与事件。

手势识别	混合场景自定义手势控制

• 自定义 HitTest：在 Lynx platform-ui-tree 上准确查找响应事件的节点，保障基础交互的准确性。
• 手势识别：集成了 HarmonyOS 的手势识别能力如 tap、longpress 等，保障在使用 Lynx for HarmonyOS 时拥有与原生一致的手势体验。
• 混合场景自定义控制：提供一系列事件 API，如 user-interaction-enabled 和 block-native-event，允许开发者可控制事件的穿透和消费逻辑，可高效处理与原生页面的混合滚动等复杂场景。

#原生能力拓展

• 元件定制能力：Lynx 不仅提供了丰富的内置元件，还允许开发者将自己开发的 HarmonyOS 原生组件（通过 ArkTS 实现）封装并注册到 Lynx 运行时中。这意味着开发者可以根据业务需求扩展应用的 UI 能力，实现高度定制化的界面和交互，保持原生体验。更多内容参考：自定义元件的使用指南。
• 原生模块定制能力：通过 Lynx 的原生模块扩展能力，开发者可以在 JavaScript 中调用 HarmonyOS 的原生 API，无论是系统级的服务还是自定义的原生模块。更多内容参考：原生模块的使用指南。

#在 HarmonyOS 创建第一个 Lynx 应用

在 Lynx 官网中已经准备好了详细的开发文档和示例代码，帮助开发者快速上手。

1. 使用预构建的 Lynx Explorer：若希望以最便捷的方式开启开发，可以按照快速上手描述的步骤操作安装 Lynx Explorer hap 包上手 Lynx 开发。

2. 本地构建 Lynx Explorer：若开发者想对 Lynx for HarmonyOS 的源码有更多的探索，可尝试本地构建，参考为 Harmony 构建 Lynx Explorer。

3. 集成 Lynx 到已有的应用工程中：若开发者已经有自己的 HarmonyOS 应用工程，并希望将 Lynx 集成其中，官网也提供了集成参考。

我们邀请你一同加入 Lynx 社区，一起在 HarmonyOS 上，用 Lynx 构建卓越的原生体验！