Lynx 3.7: Desktop Support, SVG, Skills, and ReactLynx Updates#

April 16, 2026

icecreamx10Multiplatform Lead @ Lynx

MoonfaceXComponent Lead @ Lynx

upupmingEngineering @ Lynx

The Lynx Teamlynxjs.org

Copy Markdown

Lynx 3.7 is now officially released!

This release brings official desktop platform support for macOS and Windows, introduces the new SVG element, introduces new Agent Skills for better observability, and updates ReactLynx with simpler External Bundle presets and cross-thread shared modules.

#Desktop Support: macOS and Windows

We previously planned to open source desktop support in Lynx 3.5, and later decided to go further and open source the full desktop stack. With Lynx 3.7, that vision is now a reality.

Lynx officially supports macOS and Windows as first-class platforms. You can now build and render Lynx views inside native desktop applications, using the same front-end stack and tooling you already use for mobile and web. We also plan to open source Lynxtron soon, an Electron-like desktop application framework that uses Lynx as its UI renderer. Stay tuned!

desktopsrc/mouse-cursor/App.tsx

Code

Preview

#CSS and Element Coverage on Desktop

The rendering core, which includes the CSS engine, is reused across platforms, so CSS coverage is naturally near-complete. The desktop UI is powered by Lynx's own rendering engine rather than native platform widgets, which means primitive elements need to be reimplemented for this custom backend, and coverage is still growing.

CSS: 97% property coverage. 311 out of 319 supported Lynx CSS properties are now available on desktop, including:

• Layout: Flexbox, Grid, Linear Layout, the full box model, positioning, and relative positioning.
• Styling: typography, borders, shadows, gradients, masks, filters, and CSS custom properties.
• Animation: animation, transition, @keyframes, and the full transform stack.

Elements: 73% attribute coverage. 179 out of 246 element attributes are already available on desktop, with identical support on macOS and Windows. Most built-in elements work directly on desktop today.

In practice, most Lynx pages built for mobile can already render on desktop with minimal or no front-end changes.

Each API page includes a compatibility overview and a detailed compatibility table. For a cross-API view, the API Status Dashboard now includes macOS and Windows columns.

#Desktop-Specific Capabilities

#Mouse Events

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

#Keyboard Events

<input
  onKeyDown={(e) => console.log(`Key down: ${e.key}`)}
  onKeyUp={(e) => console.log(`Key up: ${e.key}`)}
/>

#Wheel Events

<view onWheel={(e) => console.log(`Wheel delta: ${e.deltaX}, ${e.deltaY}`)} />

#CSS cursor

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

#Getting Started

For platform-specific integration details, see Integrate with Existing Apps, which now includes desktop guides alongside Android, iOS, HarmonyOS, and Web. A playground app built with Lynxtron will also provide a more direct way to fetch and run Lynx examples on desktop.

#<svg>: Scalable Vector Graphics

<svg> is now available as a standalone Lynx element in 3.7, bringing native vector rendering across platforms for icons, charts, and other resolution-independent graphics.

The <svg> element supports both inline vector content and external SVG assets:

svgsrc/base/index.tsx

Code

Preview

You can also load external SVG assets directly:

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

<svg> parses vector nodes on a dedicated thread and supports most SVG elements and attributes, with consistent rendering behavior across Android, iOS, HarmonyOS, macOS, Windows, and Web.

#Agent Skills

As part of the Lynx for AI initiative, six agent skills are now open-sourced. Install any skill with:

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

Together with Lynx DevTool MCP, coding agents can now inspect running pages, verify interactions, and debug their own changes with tighter feedback loops.

#ReactLynx

#External Bundle Presets

External Bundle lets you build a Lynx bundle once and load it from multiple Lynx apps at runtime. Use it when you want to share ReactLynx components or common business bundles across apps. Unlike Chunk Splitting which splits code within a single app, External Bundle is designed for cross-application reuse.

Lynx 3.7 adds built-in presets via defineExternalBundleRslibConfig to simplify setup:

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

Then load that bundle in the host app:

#Cross-Thread Shared Modules

By default, main thread functions cannot directly call plain functions that lack the 'main thread' directive, making code reuse difficult. Shared modules solve this by letting you explicitly declare modules as shareable between threads.

Add with { runtime: 'shared' } after an import statement, and the exported functions, classes, and objects in that module become directly callable from main thread functions:

#Upgrade Guide

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