Lynx 4.0：AI 生成式界面、ReactLynx 动态元素、折叠屏适配及更多元件开源

2026年9月11日

石文涛渲染主管 @ Lynx

Lynx 团队lynxjs.org

Lynx 4.0 已经正式发布！

这个版本继续改善从编写界面到定位问题的开发体验：让 AI 更准确地使用 Lynx API、生成可渲染的界面，让 ReactLynx 支持更灵活的动态元素构建，并把线上错误与运行时 UI 节点映射回源码。在折叠屏适配上，Lynx 通过客户端同步尺寸变化，让 Lynx 页面沿用熟悉的 Flex 布局和相对单位，随窗口大小自然调整。此外，4.0 还更新了桌面端 CSS 与元件能力，开源了 <webview> 和 <blur-view>，并新增了全局内存查询。下面我们一起来看看这些变化。

Lynx for AI

给 Agent 提供 Lynx 文档

让 AI 编写 Lynx 页面时，一个常见问题是它会沿用 Web 开发经验，生成 Lynx 尚不支持的属性或布局写法。lynx-api-docs Agent Skill 为 coding agent 提供项目本地的 Lynx API、CSS、布局和元件参考资料，帮助它在实现前确认能力边界。

这些资料来自公开的 @lynx-js/lynx-api-docs 软件包，可以通过社区维护的 Lynx Agent Skills 安装：

npx skills add lynx-community/skills -s lynx-api-docs

安装后，兼容的 agent 可以按任务加载相关资料。比如在实现一个滚动列表前，先确认 <scroll-view> 的属性、事件和布局约束，再生成代码。更多项目配置方式见面向 AI 的 Lynx。

从模型对话到原生界面

除了帮助开发者写代码，Lynx A2UI 也让 Agent 能在运行时生成界面：模型输出结构化的协议消息，由 Lynx 渲染器转换为原生 UI，并随着消息到达逐步更新。

Agent 根据组件目录生成协议消息，Lynx 负责渲染与交互。

在此前发布 A2UI 渲染器的基础上，我们新增了 lynx-a2ui Skill，并通过 lynx-community/skills 统一维护和分发：

npx skills add lynx-community/skills -s lynx-a2ui

这个 Skill 会先读取应用的能力目录（Catalog），再根据其中的组件、函数和参数约束生成 A2UI 消息。开发者可以使用默认目录，也可以提供业务自己的目录，让 Agent 生成的界面使用应用已支持的能力。完整介绍见 A2UI 驱动的 Lynx 生成式界面。

模拟示例

下面的天气查询示例使用模拟 Agent，逐步发送 A2UI 协议消息，由 ReactLynx 将 Catalog 中的组件渲染为天气卡片。点击按钮切换城市时，用户操作会作为 Action 回传给模拟 Agent，再通过后续消息更新页面，展示从流式渲染到交互反馈的完整过程。

体验 Playground

你也可以在 Lynx A2UI Playground 的 Create 页面与模型对话，实时体验界面的生成与更新；在 Examples 中编辑、回放已有案例，查看协议消息与渲染结果的对应关系；或在 Catalog 中组合内置组件并预览效果。

用 OpenUI 生成可交互界面

Lynx 也提供了 lynx-openui Skill，将自然语言界面需求转换为 OpenUI Lang v0.5 声明式程序。生成的内容可以传给 @lynx-js/genui/openui 的 <OpenUiRenderer> 渲染，适合需要流式生成、响应式状态和工具调用的界面。

npx skills add lynx-community/skills -s lynx-openui

这个 Skill 会引导 Agent 先读取内置 Catalog 或应用提供的自定义组件签名，再检查组件名称、位置参数和引用关系，生成符合当前 Renderer 能力的程序。默认输出完整程序；显式启用 edit mode 或 mergeStatements 后，也可以只输出发生变化的语句，实现增量更新。

对于可交互界面，可以通过 $state 表达响应式状态，通过 Query() 读取宿主数据，并用 Action() 编排交互步骤。查询和写入只使用宿主实际提供的工具，其中 Mutation() 必须由显式 Action 触发，例如用户点击提交按钮。这样，生成的界面既能展示内容，也能接入应用已有的业务流程。

接入方式见 ReactLynx 中的 OpenUI，也可以在 Lynx GenUI OpenUI Playground 中体验。

ReactLynx

动态创建与克隆元素

ReactLynx 新增对 createElement 和 cloneElement 动态构建 Lynx 元素的支持。当元件类型需要到运行时才能确定，或需要基于已有元素调整属性时，可以直接使用熟悉的 React API：

import { cloneElement, createElement } from '@lynx-js/react';

export function StatusLabel({ selected }: { selected: boolean }) {
  const label = createElement('text', { className: 'label' }, 'Lynx 4.0');

  return selected
    ? cloneElement(label, { className: 'label label-selected' })
    : label;
}

这为配置驱动的界面和通用组件封装提供了更多选择。如果元件结构在开发时已经确定，仍然推荐直接写出 JSX，让编译器能够分析静态结构并参与渲染优化。两种写法的取舍可以参考编译协同渲染。

统一调试信息

线上报错通常指向压缩后的 JavaScript，主线程字节码中的位置也不能直接当作源码行列号使用。构建工具现在通过统一的 debug-metadata.json 汇集 JavaScript、CSS Source Map、字节码调试信息和 UI Source Map，为错误与节点定位提供同一份构建依据。

借助这些信息，可以完成两类反解：

线上错误反解：把打包后的错误堆栈还原为源码文件、行和列；主线程字节码会先映射到编码后的 JavaScript，再映射回源码。
UI 节点树反解：从客户端导出运行时 UI 树，将节点映射到创建它的 JSX，帮助定位界面问题。

UI Source Map 默认关闭，需要在 pluginReactLynx 中显式开启：

lynx.config.ts

import { defineConfig } from '@lynx-js/rspeedy';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

export default defineConfig({
  plugins: [
    pluginReactLynx({
      enableUiSourceMap: true,
    }),
  ],
});

生产构建默认会在生成后删除 debug-metadata.json。用于线上反解时，需要在构建流程中保存并托管与产物对应的调试信息；用于 UI 树反解时，还需要让运行时获取对应的 debugMetadataUrl。具体接入方式见线上错误反解和反解 UI 节点树。

折叠屏适配

苹果在秋季发布会上推出了首款折叠屏 iPhone——iPhone Duo。展开屏幕，正在浏览的页面有了更多空间；合上屏幕，内容又回到较小的窗口。用户期待的，是页面能顺着屏幕的变化自然调整。

Lynx 已经支持折叠屏适配，并在 TikTok 中投入使用。我们希望接入尽可能简单：客户端把尺寸变化同步给 Lynx，同步更新 screen metrics、viewport 和 GlobalProps，前端继续使用熟悉的 Flex 布局和相对单位适应尺寸变化，让页面随窗口大小自动调整。具体接入方式见折叠屏适配指南。

CSS

媒体查询

Lynx 4.0 实现了 CSS Media Queries Level 4 规范的一个子集，支持在 @media 规则中根据设备/视口环境条件应用不同的样式。

使用过程中可以根据视口宽高、宽高比、横竖屏方向、像素密度和颜色模式偏好调整布局与样式。除了 min-、max- 写法，还支持 and、or、not 条件组合、逗号分隔的查询列表，以及 width >= 768px 这样的 Level 4 范围语法。完整的语法、单位、支持范围与使用限制见媒体查询文档。

桌面端专属能力（macOS 与 Windows）

Lynx 4.0 继续扩展 PC 端的 CSS 能力，新增自定义文本插入光标和多层遮罩合成。在原生平台中，以下两项能力目前仅在 macOS 和 Windows 的 Clay 自绘渲染后端实现，尚未在 Android、iOS 和 HarmonyOS 原生渲染后端提供。各平台的详细支持情况可查看对应 API 页面的兼容性表。

自定义文本插入光标

新增四个 Lynx 特有的 -x-caret-* 属性，用于定制 <input> 和 <textarea> 中文本插入光标的样式：

-x-caret-gradient：设置光标渐变。
-x-caret-width：设置光标宽度。
-x-caret-height：设置光标高度。
-x-caret-radius：设置光标圆角。

input {
  -x-caret-gradient: linear-gradient(to bottom, #00a6a6, #1479ff);
  -x-caret-width: 2px;
  -x-caret-height: 20px;
  -x-caret-radius: 1px;
}

多层遮罩合成

mask-composite 用于控制当前遮罩层与下方遮罩层如何组合。它支持 add、subtract、intersect 和 exclude，可以表达叠加、相减、交集和排除重叠区域等效果。

.masked-view {
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, transparent);
  mask-composite: exclude;
}

元件能力更新

`<webview>` 开源

Lynx 4.0 开源了 <webview>，用于在 Lynx 页面中嵌入网页，便于复用已有的 Web 资源。它支持 Android、iOS、HarmonyOS、macOS 和 Windows。

使用时，需要为 <webview> 设置确定的宽度和高度。你可以加载网页地址，也可以直接传入 HTML 字符串。

加载 Web 内容

通过 src 指定网页地址：

加载 HTML 字符串

通过 html 传入 HTML 内容：

更多属性、事件和方法见 <webview> API 文档。

`<blur-view>` 开源

Lynx 4.0 还开源了 <blur-view>，支持 Android、iOS 和 HarmonyOS。它为背景内容提供高斯模糊效果，类似于 CSS 的 backdrop-filter: blur，可用于浮层、面板等需要模糊背景的场景。

基础用法

在 Android 上，使用 android-capture-target 指定需要模糊的背景元素，并为目标元素设置 flatten={false}：

iOS 液态玻璃效果

具体属性及其平台支持范围见 <blur-view> API 文档。

其他更新

全局 Lynx 内存查询

当应用同时承载多个 Lynx 页面时，定位内存问题往往需要先回答：哪些实例还存活、内存主要花在哪里？Lynx 4.0 在 iOS 和 Android 提供了全局 Lynx 内存查询，可以异步采集当前进程内存活实例的 Lynx 归因内存，并按 Element、UI/View、主线程 runtime 和后台线程 runtime 等分类返回结果。

这项能力适合在内存压力或问题排查时主动获取快照。若需要进一步追踪 JavaScript 对象的引用关系，可以根据查询结果选择目标实例，再分析 heap snapshot。

升级指南

参照接入 Lynx 4.0 到现有应用，将 Lynx 和 PrimJS 依赖更新到 4.0.x，并按目标平台更新配套依赖。完整的引擎更新与修复列表见 Lynx 4.0 发布记录。

感谢每一位反馈问题、贡献代码和分享实践的开发者，期待看到大家用 Lynx 4.0 构建的新体验。

Lynx 4.0：AI 生成式界面、ReactLynx 动态元素、折叠屏适配及更多元件开源#

#Lynx for AI

#给 Agent 提供 Lynx 文档

#从模型对话到原生界面

#模拟示例

#体验 Playground

#用 OpenUI 生成可交互界面

#ReactLynx

#动态创建与克隆元素

#统一调试信息

#折叠屏适配

#CSS

#媒体查询

#桌面端专属能力（macOS 与 Windows）

#自定义文本插入光标

#多层遮罩合成

#元件能力更新

#<webview> 开源

#加载 Web 内容

#加载 HTML 字符串

#<blur-view> 开源

#基础用法

#iOS 液态玻璃效果

#其他更新

#全局 Lynx 内存查询

#升级指南