open-index/open-npm huggingface dataset:
npm package: @lynx-dev/react-rsbuild-plugin
Description: A rsbuild plugin for ReactLynx
Author: Qingyu Wang
Latest version: 0.9.0

A Rspeedy plugin to integrate with ReactLynx.

## Getting Started

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { pluginReactLynx } from '@lynx-dev/react-rsbuild-plugin'
import { defineConfig } from '@lynx-dev/rspeedy'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],
})
```

## License

Rspeedy is Apache-2.0 licensed.
npm package: @lynx-dev/react-rsbuild-plugin-canary
Description: A rsbuild plugin for ReactLynx
Author: Qingyu Wang
Latest version: 0.9.0

A Rspeedy plugin to integrate with ReactLynx.

## Getting Started

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { pluginReactLynx } from '@lynx-dev/react-rsbuild-plugin'
import { defineConfig } from '@lynx-dev/rspeedy'

export default defineConfig({
  plugins: [
    pluginReactLynx(),
  ],
})
```

## License

Rspeedy is Apache-2.0 licensed.
npm package: @lynx-dev/rspeedy
Description: A webpack/rspack-based frontend toolchain for Lynx
Author: Qingyu Wang
Latest version: 0.8.2

<p align="center">
  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lynxjs.org/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
</p>

<p>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@lynx-dev/rspeedy">
    <img alt="" src="https://img.shields.io/npm/v/@lynx-dev/rspeedy?logo=npm">
  </a>
  <a aria-label="License" href="https://www.npmjs.com/package/@lynx-dev/rspeedy">
    <img src="https://img.shields.io/badge/License-Apache--2.0-blue" alt="license" />
  </a>
</p>

## Getting Started

```bash
npm create rspeedy@latest
```

## Documentation

Visit [Rspeedy Website](https://lynxjs.org/rspeedy/index) to view the full documentation.

## Contributing

Contributions to Rspeedy are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/contributing.md) to make sure you have a smooth experience contributing to Rspeedy.
npm package: @lynx-dev/rspeedy-canary
Description: A webpack/rspack-based frontend toolchain for Lynx
Author: Qingyu Wang
Latest version: 0.8.2

<p align="center">
  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lynxjs.org/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
</p>

<p>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@lynx-dev/rspeedy">
    <img alt="" src="https://img.shields.io/npm/v/@lynx-dev/rspeedy?logo=npm">
  </a>
  <a aria-label="License" href="https://www.npmjs.com/package/@lynx-dev/rspeedy">
    <img src="https://img.shields.io/badge/License-Apache--2.0-blue" alt="license" />
  </a>
</p>

## Getting Started

```bash
npm create rspeedy@latest
```

## Documentation

Visit [Rspeedy Website](https://lynxjs.org/rspeedy/index) to view the full documentation.

## Contributing

Contributions to Rspeedy are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/contributing.md) to make sure you have a smooth experience contributing to Rspeedy.
npm package: @lynx-dev/tasm
Description: If you want to compile `lepus_cmd_exec` with **CMake**, please use **`python tools/oliver/lynx-tasm/gn_to_cmake_oliver.py`** to generate or update **CMakeLists.txt** in advance.
Latest version: 0.0.4

## CMake build
If you want to compile `lepus_cmd_exec` with **CMake**, please use **`python tools/oliver/lynx-tasm/gn_to_cmake_oliver.py`** to generate or update **CMakeLists.txt** in advance.

# 0.0.3
support compile `@lynx-dev/tasm` as wasm binary.

# 0.0.4
support MAX_TASM_VERSION 3.0
npm package: @lynx-dev/template-webpack-plugin
Description: Simplifies creation of Lynx template files to serve your webpack bundles
Author: Qingyu Wang
Latest version: 0.6.3

<h2 align="center">@lynx-dev/template-webpack-plugin</h2>

A webpack plugin that simplifies creation of `template.js` files to serve your bundles.
Just like [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin), but for Lynx.
npm package: @lynx-dev/template-webpack-plugin-canary
Description: Simplifies creation of Lynx template files to serve your webpack bundles
Author: Qingyu Wang
Latest version: 0.6.3

<h2 align="center">@lynx-dev/template-webpack-plugin</h2>

A webpack plugin that simplifies creation of `template.js` files to serve your bundles.
Just like [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin), but for Lynx.
npm package: @lynx-dev/types
Description: @lynx-dev/types is a type package of all public APIs officially provided by the Lynx team. Using this package can help you better use Lynx APIs to develop your applications.
Author: Lynx Authors
Latest version: 1.0.16

# Introduction

@lynx-dev/types is a type package of all public APIs officially provided by the Lynx team. Using this package can help you better use Lynx APIs to develop your applications.

# Implementation

There are three pieces of content in the entire package, namely:
 
1. background-thread
2. main-thread
3. common

These three sections contain all of Lynx's publicly available features:

1. The **background-thread** contains all the APIs that can be used in the background-thread runtime, including animation functions, the lynx family of APIs, NativeModules, and so on.
2. **main-thread** is the API that can only be called in the main thread, and contains worklet-related functions. Be careful when using this part of the API, as it is called in the main thread, and evaluate the performance impact carefully.
3. **common** are all the APIs common to **background-thread** and **main-thread**, such as setting attributes for element, event listening, and so on.

# Usage

## For Framework Developers

```json
"peerDependencies": {
  "@lynx-dev/types": "latest"
}
```

## For Product Developers

```json
"devDependencies": {
  "@lynx-dev/types": "latest"
}
```

After installing the dependencies, you can use them directly, for example:

```typescript
import { ListProps } from '@lynx-dev/types';
let prop: ListProps;
```

If you need to extend the type, for example, GlobalProps, each business will be extended according to its own type, and can be extended like this:

```typescript
declare module '@lynx-dev/types' {
  interface GlobalProps {
     foo: string;
     bar: number;
  }
}
```

Once extended, it can be used anywhere in the package.
npm package: @lynx-dev/web-constants
Description: A common dependency library that defines constants for the Lynx3 Web Platform.
Latest version: 0.6.2

# @lynx-dev/web-constants

A common dependency library that defines constants for the Lynx3 Web Platform.

## Usage

```javascript
import  { cardIdAttribute, lynxViewRootDomId }'@lynx-dev/web-constants';
```
npm package: @lynx-dev/web-constants-canary
Description: A common dependency library that defines constants for the Lynx3 Web Platform.
Latest version: 0.6.2

# @lynx-dev/web-constants

A common dependency library that defines constants for the Lynx3 Web Platform.

## Usage

```javascript
import  { cardIdAttribute, lynxViewRootDomId }'@lynx-dev/web-constants';
```
npm package: @lynx-dev/web-core
Description: Lynx3 Web Platform runtime core
Latest version: 0.6.2

# @lynx-dev/web-core

Lynx3 Web Platform runtime core

## Usage

```javascript
import '@lynx-dev/web-core';
import '@lynx-dev/web-core/index.css';

document.body.innerHTML = `
<lynx-view 
    style="height:100vh; width:100vw;" 
    url="http://localhost:3000/main/main-thread.js"
>
</lynx-view>`;
```

## Document

See our website for more information.
npm package: @lynx-dev/web-core-canary
Description: Lynx3 Web Platform runtime core
Latest version: 0.6.2

# @lynx-dev/web-core

Lynx3 Web Platform runtime core

## Usage

```javascript
import '@lynx-dev/web-core';
import '@lynx-dev/web-core/index.css';

document.body.innerHTML = `
<lynx-view 
    style="height:100vh; width:100vw;" 
    url="http://localhost:3000/main/main-thread.js"
>
</lynx-view>`;
```

## Document

See our website for more information.
npm package: @lynx-dev/web-elements
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.2.4

# @lynx-dev/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details                                                                          |
| -------------- | --------------- | -------------------------------------------------------------------------------- |
| Elements       |                 |                                                                                  |
| canvas         | ❌              | No                                                                               |
| image          | ✅              | Full Support                                                                     |
| list           | ✅              | Only single layout type is supported, flow and waterfall will be supported later |
| scroll-view    | ✅              | Full Support                                                                     |
| text           | ✅              | Full Support                                                                     |
| view           | ✅              | Full Support                                                                     |
| X-Elements     |                 |                                                                                  |
| svg            | ✅              | Full Support                                                                     |
| x-blur-view    | ✅              | Full Support                                                                     |
| x-input        | ✅              | Full Support                                                                     |
| x-textarea     | ✅              | Full Support                                                                     |
| x-swiper       | ✅              | Full Support                                                                     |
| x-viewpager-ng | ✅              | Full Support                                                                     |
| x-foldview-ng  | ✅              | Full Support                                                                     |
| x-refresh-view | ✅              | Full Support                                                                     |
| x-overlay-ng   | ✅              | Full Support                                                                     |
| x-audio-tt     | ✅              | Full Support                                                                     |

## Usage

Normally, you don't need to import `@lynx-dev/web-elements` directly, because the `@lynx-dev/web-core` has included it.

But if you want to use it separately, you can import it like this:

```javascript
import '@lynx-dev/web-elements/all';
import '@lynx-dev/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-dev/web-elements-canary
Description: It provides the custom-element implementation of Lynx Elements in Web.
Latest version: 0.2.4

# @lynx-dev/web-elements

It provides the custom-element implementation of Lynx Elements in Web.

So far, support compared to Lynx Elements on the client:

| Elements       | Whether support | Details                                                                          |
| -------------- | --------------- | -------------------------------------------------------------------------------- |
| Elements       |                 |                                                                                  |
| canvas         | ❌              | No                                                                               |
| image          | ✅              | Full Support                                                                     |
| list           | ✅              | Only single layout type is supported, flow and waterfall will be supported later |
| scroll-view    | ✅              | Full Support                                                                     |
| text           | ✅              | Full Support                                                                     |
| view           | ✅              | Full Support                                                                     |
| X-Elements     |                 |                                                                                  |
| svg            | ✅              | Full Support                                                                     |
| x-blur-view    | ✅              | Full Support                                                                     |
| x-input        | ✅              | Full Support                                                                     |
| x-textarea     | ✅              | Full Support                                                                     |
| x-swiper       | ✅              | Full Support                                                                     |
| x-viewpager-ng | ✅              | Full Support                                                                     |
| x-foldview-ng  | ✅              | Full Support                                                                     |
| x-refresh-view | ✅              | Full Support                                                                     |
| x-overlay-ng   | ✅              | Full Support                                                                     |
| x-audio-tt     | ✅              | Full Support                                                                     |

## Usage

Normally, you don't need to import `@lynx-dev/web-elements` directly, because the `@lynx-dev/web-core` has included it.

But if you want to use it separately, you can import it like this:

```javascript
import '@lynx-dev/web-elements/all';
import '@lynx-dev/web-elements/index.css';

document.body.innerHTML = `
<x-text style="font-size: 24px;font-weight: bold">
  Hello lynx.
</x-text>
`;
```

## Document

See our website for more information.
npm package: @lynx-dev/web-elements-compat
Description: A compatibility plugin for linear layout and color.
Latest version: 0.2.2

# @lynx-dev/web-elements-compat

A compatibility plugin for linear layout and color.

If you want your product to run on chrome < 118, safari < 18 browsers, then you need to use it.

## Usage

```javascript
import '@lynx-dev/web-elements-compat/LinearContainer';
```
npm package: @lynx-dev/web-elements-compat-canary
Description: A compatibility plugin for linear layout and color.
Latest version: 0.2.3-canary-20250114-1e108965

# @lynx-dev/web-elements-compat

A compatibility plugin for linear layout and color.

If you want your product to run on chrome < 118, safari < 18 browsers, then you need to use it.

## Usage

```javascript
import '@lynx-dev/web-elements-compat/LinearContainer';
```
npm package: @lynx-dev/webpack-dev-transport
Description: A webpack dev-server transport implementation for Lynx
Author: Qingyu Wang
Latest version: 0.1.0

<h2 align="center">@lynx-dev/webpack-dev-transport</h2>

A webpack devServer transport implementation for Lynx.

### Client

The client transport can be used in the
[`devServer.client.webSocketTransport`](https://webpack.js.org/configuration/dev-server/#websockettransport)
configuration of `webpack.config.js`.

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { createRequire } from 'node:module';

import { LynxTransportServer } from '@lynx-dev/webpack-dev-transport';

const require = createRequire(import.meta.url);
export default {
  devServer: {
    client: {
      webSocketTransport: require.resolve(
        '@lynx-dev/webpack-dev-transport/client',
      ),
    },
  },
};
```

### Server

The server transport can be used in the
[`devServer.webSocketServer`](https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver)
configuration of `webpack.config.js`.

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { LynxTransportServer } from '@lynx-dev/webpack-dev-transport';

export default {
  devServer: {
    allowedHosts: 'all', // disable host checks, which Lynx does not support
    webSocketServer: LynxTransportServer,
  },
};
```
npm package: @lynx-dev/webpack-dev-transport-canary
Description: A webpack dev-server transport implementation for Lynx
Author: Qingyu Wang
Latest version: 0.1.0

<h2 align="center">@lynx-dev/webpack-dev-transport</h2>

A webpack devServer transport implementation for Lynx.

### Client

The client transport can be used in the
[`devServer.client.webSocketTransport`](https://webpack.js.org/configuration/dev-server/#websockettransport)
configuration of `webpack.config.js`.

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { createRequire } from 'node:module';

import { LynxTransportServer } from '@lynx-dev/webpack-dev-transport';

const require = createRequire(import.meta.url);
export default {
  devServer: {
    client: {
      webSocketTransport: require.resolve(
        '@lynx-dev/webpack-dev-transport/client',
      ),
    },
  },
};
```

### Server

The server transport can be used in the
[`devServer.webSocketServer`](https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver)
configuration of `webpack.config.js`.

```js
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
import { LynxTransportServer } from '@lynx-dev/webpack-dev-transport';

export default {
  devServer: {
    allowedHosts: 'all', // disable host checks, which Lynx does not support
    webSocketServer: LynxTransportServer,
  },
};
```
npm package: @lynx-example/7guis
Description: 7 GUIs benchmark — Counter, Temperature Converter, Flight Booker, Timer, CRUD, Circle Drawer, Cells
Author: Lynx Authors
Latest version: 0.2.0

# 7GUIs

The [7GUIs](https://eugenkiss.github.io/7guis/) benchmark implemented in ReactLynx. Each task exercises a different aspect of UI programming.

## Tasks

### Counter

Basic `useState` with a tap handler. The simplest possible state management example.

### Temperature Converter

Two-way data binding between Celsius and Fahrenheit `<input>` fields using controlled components.

### Flight Booker

Form validation and conditional logic — a date-based flight booking form with one-way / return toggle and input validation.

### Timer

Elapsed-time progress driven by `setInterval`, with a draggable duration control. Demonstrates timer lifecycle and cleanup with `useEffect`.

### CRUD

Filterable list with create, update, and delete operations. Shows list rendering with `v-for`-style mapping, text input binding, and selection state.

### Circle Drawer

Tap-to-draw circles on a canvas-like area with undo/redo history and radius adjustment. Exercises complex state (history stack, selection, adjustment mode) and absolute positioning.

### Cells

A 5x10 spreadsheet grid supporting formulas (`=A0+B1`). Demonstrates dynamic expression evaluation, cell references, and inline editing with `<input>`.

## Getting Started

```bash
pnpm install
pnpm run dev
```

Each task is a separate entry point — the dev server will list all of them. Scan the QR code with [LynxExplorer](https://lynxjs.org/guide/start/quick-start.html#setting-up-the-development-environment) to preview on device.