Lynx

https://lynxjs.org
Admin
Lynx is a cross-platform framework that enables writing once and rendering natively on iOS, Android,...
Tokens:2,305,770
Snippets:22,673
Trust Score:8.7
Update:3 months ago
Show doc for...
Tokens:
Raw
### Project Setup and Dependency Installation

Source: https://lynxjs.org/llms-full.txt

Commands to clone the lynx-ui repository, enable corepack, and install project dependencies using pnpm.

```bash
git clone https://github.com/lynx-family/lynx-ui.git
cd lynx-ui
corepack enable
pnpm install
pnpm build
```

--------------------------------

### Basic Routing Setup

Source: https://lynxjs.org/react/routing/react-router

Configure routes by rendering `<Routes>` and `<Route>` components to couple URL segments with UI elements. This example sets up routes for the root path and a '/home' path.

```jsx
import { root } from '@lynx-js/react';
import { MemoryRouter, Routes, Route } from 'react-router';

import { App } from './App.jsx';
import { Home } from './Home.jsx';

root.render(
  <MemoryRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  </MemoryRouter>,
);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}
```

--------------------------------

### Example Package Directory Structure

Source: https://lynxjs.org/help/example.html

This structure outlines the organization of example packages within the workspace, including the manifest, lockfile, and installed examples.

```bash
packages/lynx-example-packages/
├── package.json          # Manifest listing all example dependencies
├── pnpm-lock.yaml       # Lockfile for examples
└── node_modules/        # Where installed examples reside
    └── @lynx-example/   # Namespace for official examples
```

--------------------------------

### Basic Sheet and Drawer Implementation

Source: https://lynxjs.org/lynx-ui/components/sheet

Demonstrates the setup for various sheet and drawer configurations including left, right, start, end, and top/bottom sheets. Includes examples of snap points and backdrop click-to-close functionality.

```tsx
// Copyright 2026 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 { root, useRef } from '@lynx-js/react'

import {
  SheetBackdrop,
  SheetContent,
  SheetHandle,
  SheetRoot,
  SheetView,
} from '@lynx-js/lynx-ui'
import type { SheetRootRef } from '@lynx-js/lynx-ui'

import { ActionButton, TriggerButton } from '../shared/index.js'

import './index.css'

function DrawerSection(
  props: {
    title: string
    description: string
    note: string
    close: () => void
    surfaceClassName: string
    innerClassName: string
  },
) {
  const { 
    title,
    description,
    note,
    close,
    surfaceClassName,
    innerClassName,
  } = props

  return (
    <SheetContent
      className={surfaceClassName}
      innerClassName={innerClassName}
    >
      <view className='drawer-panel'>
        <text className='header-text'>{title}</text>
        <text className='info-text'>{description}</text>
        <text className='info-text'>{note}</text>
        <ActionButton onClick={close} text='Close Drawer' />
      </view>
    </SheetContent>
  )
}

function App() {
  const leftDrawerRef = useRef<SheetRootRef>(null)
  const rightDrawerRef = useRef<SheetRootRef>(null)
  const startDrawerRef = useRef<SheetRootRef>(null)
  const endDrawerRef = useRef<SheetRootRef>(null)
  const rtlLeftDrawerRef = useRef<SheetRootRef>(null)
  const rtlRightDrawerRef = useRef<SheetRootRef>(null)
  const topSheetRef = useRef<SheetRootRef>(null)
  const bottomSheetRef = useRef<SheetRootRef>(null)

  return (
    <view className='demo-container lunaris-dark'>
      <text className='title-text'>Directional Sheet</text>
      <text className='subtitle-text'>
        Left and right are physical sides. Start and end are logical sides that
        can flip with enableRTL.
      </text>
      <view className='button-group'>
        <TriggerButton
          onClick={() => leftDrawerRef.current?.open()}
          text='Open Left Drawer'
        />
        <TriggerButton
          onClick={() => rightDrawerRef.current?.open()}
          text='Open Right Drawer'
        />
        <TriggerButton
          onClick={() => startDrawerRef.current?.open()}
          text='Open Start Drawer'
        />
        <TriggerButton
          onClick={() => endDrawerRef.current?.open()}
          text='Open End Drawer'
        />
        <TriggerButton
          onClick={() => rtlLeftDrawerRef.current?.open()}
          text='Open RTL Left Drawer'
        />
        <TriggerButton
          onClick={() => rtlRightDrawerRef.current?.open()}
          text='Open RTL Right Drawer'
        />
        <TriggerButton
          onClick={() => topSheetRef.current?.open()}
          text='Open Top Sheet'
        />
        <TriggerButton
          onClick={() => bottomSheetRef.current?.open()}
          text='Open Bottom Sheet'
        />
      </view>

      <SheetRoot
        ref={leftDrawerRef}
        side='left'
        snapPoints={['fit']}
        initialSnap={0}
      >
        <SheetView className='sheet-viewport'>
          <SheetBackdrop className='sheet-overlay' clickToClose={true} />
          <DrawerSection
            title='Left Drawer'
            description='This drawer uses side="left" with snapPoints=["fit"].'
            note='Use physical sides when the panel should stay on that edge in both LTR and RTL.'
            close={() => leftDrawerRef.current?.close()}
            surfaceClassName='drawer-content drawer-content-left'
            innerClassName='drawer-inner-content drawer-inner-content-fit'
          />
        </SheetView>
      </SheetRoot>

      <SheetRoot
        ref={rightDrawerRef}
        side='right'
        snapPoints={['72%']}
        initialSnap={0}
        rubberBand={true}
      >
        <SheetView className='sheet-viewport'>
          <SheetBackdrop className='sheet-overlay' clickToClose={true} />
          <DrawerSection
            title='Right Drawer'
            description='This drawer uses side="right" with a percentage snap point.'
            note='The 72% snap point resolves against viewport width instead of viewport height.'
            close={() => rightDrawerRef.current?.close()}
            surfaceClassName='drawer-content drawer-content-right'
            innerClassName='drawer-inner-content drawer-inner-content-percent'
          />
        </SheetView>
      </SheetRoot>

```

--------------------------------

### Example Router Configuration

Source: https://lynxjs.org/react/routing/tanstack-router

A consolidated example demonstrating the setup of TanStack Router with memory history and server-side rendering disabled.

```typescript
import { createMemoryHistory, createRouter, RouterProvider } from "@tanstack/react-router";

import { routeTree } from "./routeTree.gen.js";

const memoryHistory = createMemoryHistory({
  initialEntries: ["/"],
});

const router = createRouter({ routeTree, history: memoryHistory, isServer: false });

export function App() {
  return <RouterProvider router={router} />;
}

```

--------------------------------

### Basic External Configuration

Source: https://lynxjs.org/api/rspeedy/externals-loading-webpack-plugin.externalvalue.html

Example of configuring a single external module with a URL. This is a basic setup for loading an external dependency.

```javascript
ExternalsLoadingPlugin({
  externals: {
    lodash: {
      url: '……',
    }
  }
})
```

--------------------------------

### Install @lynx-js/motion with deno

Source: https://lynxjs.org/lynx-ui/motion-mini.html

Install the package using deno.

```bash
deno add npm:@lynx-js/motion
```

--------------------------------

### Install @lynx-js/motion with bun

Source: https://lynxjs.org/lynx-ui/motion-mini.html

Install the package using bun.

```bash
bun add @lynx-js/motion
```

--------------------------------

### Start Development Server with npm

Source: https://lynxjs.org/ai/start/quick-start

Run the development server using npm. This will typically start a local server and may display a QR code for preview.

```bash
npm run dev
```

--------------------------------

### Start Development Server with bun

Source: https://lynxjs.org/ai/start/quick-start

Run the development server using bun. This will typically start a local server and may display a QR code for preview.

```bash
bun run dev
```

--------------------------------

### Example Usage

Source: https://lynxjs.org/api/lynx-api/selector-query.html

An example demonstrating how to use SelectorQuery to get the position and size of a text node.

```APIDOC
## Example
Get the position and size of the specified `text` node:
```javascript
class Page extends Component {
  componentDidMount() {
    lynx
      .createSelectorQuery() // create SelectorQuery
      .select('#my-id') // Specify the selector of the target node
      .invoke({
        // Specify the operation for the target node
        method: 'boundingClientRect',
        success: function (res) {
          console.log(res);
        },
        fail: function (res) {
          console.log(res.code, res.data);
        },
      })
      .exec(); // Execute the query
  }

  render() {
    return (
      <view>
        <text id="my-id">...</text>
      </view>
    );
  }
}
```
```

--------------------------------

### Initialize and Configure LynxEnv Desktop API (C++)

Source: https://lynxjs.org/api/lynx-native-api/lynx-env.html

Demonstrates how to get the LynxEnv instance, retrieve version information, configure DevTool and LogBox, and register native and extension modules. Ensure LynxEnv is properly initialized before use.

```cpp
lynx::pub::LynxEnv& env = lynx::pub::LynxEnv::GetInstance();
const char* version = env.GetVersion();
env.SetDevtoolAppInfo("app_id", "demo");
env.SetDevtoolEnabled(true);
bool devtool_enabled = env.IsDevtoolEnabled();
bool connected = env.ConnectDevtool("ws://127.0.0.1:9229");
env.SetLogboxEnabled(true);
bool logbox_enabled = env.IsLogboxEnabled();
env.RegisterNativeModule("DemoModule", creator, opaque);
env.RegisterExtensionModule("DemoExtension", extension_creator, true, opaque);
```

--------------------------------

### End Trace Event Section Example

Source: https://lynxjs.org/api/lynx-native-api/trace-event.html

Shows a basic example of ending a trace event section that was previously started.

```java
TraceEvent.beginSection("logic", "parse-data");
// ... your code ...
TraceEvent.endSection("logic", "parse-data");
```

--------------------------------

### Install Valtio with bun

Source: https://lynxjs.org/llms-full.txt

Installs the Valtio state management library using bun.

```sh
bun add valtio

```

--------------------------------

### Install Valtio with deno

Source: https://lynxjs.org/llms-full.txt

Installs the Valtio state management library using deno.

```sh
deno add npm:valtio

```

--------------------------------

### Install lynx-ui Skill

Source: https://lynxjs.org/ai/skills/lynx-ui.html

Installs the lynx-ui skill for compatible coding agents to automatically load its routing guide and bundled references.

```bash
npx skills add lynx-community/skills -s lynx-ui
```

--------------------------------

### Install Lynx DevTool MCP Server using VS Code CLI

Source: https://lynxjs.org/ai/lynx-devtool-mcp.html

Install the Lynx DevTool MCP server via the VS Code CLI. Refer to the MCP install guide for more details.

```bash
code --add-mcp '{"name":"lynx-devtool","command":"npx","args":["@lynx-js/devtool-mcp-server@latest"]}'
```

--------------------------------

### Advanced Go Component Example

Source: https://lynxjs.org/help/example.html

Configure the `<Go>` component with additional props like `defaultFile`, `defaultEntryName`, and `highlight` for more control over the interactive example.

```javascript
<Go
  example="view"
  defaultFile="src/App.tsx"
  defaultEntryName="main"
  highlight={{ 'src/App.tsx': '5-10' }}
/>
```

--------------------------------

### LinearLayout Gravity Example in React

Source: https://lynxjs.org/llms-full.txt

Demonstrates how to use `linear-layout-gravity` to control item alignment within a linear layout. This example requires React and LynxJS setup.

```tsx
import { root, useState } from "@lynx-js/react";
import "./index.scss";

const LinearLayoutGravity = () => {
  const [linearOrientation, setLinearOrientation] = useState(false);
  const containerStyle = {
    linearOrientation: linearOrientation ? "horizontal" : "vertical" as "horizontal" | "vertical",
  };
  const buttonStyle = {
    width: "20%",
    height: "50px",
    backgroundColor: "red" as const,
  };
  const text1Style = {
    fontSize: "40rpx" as const,
    marginRight: "12rpx",
    fontWeight: "900" as const,
    color: "linear-gradient(120deg ,#0095ff 30% ,#42d392 100%)" as const,
  };
  const text2Style = {
    fontSize: "50rpx" as const,
    alignSelf: "center" as const,
    fontWeight: "900" as const,
    color: "linear-gradient(120deg,#0095ff 30%,#42d392 100%)" as const,
  };
  const Container1View1Style = {
    width: "20px",
    height: "20px",
    linearLayoutGravity: "none" as const,
    backgroundColor: "red" as const,
  };
  const Container2View1Style = {
    width: "20px",
    height: "20px",
    linearLayoutGravity: "start" as const,
    backgroundColor: "red" as const,
  };
  const Container3View1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
    linearLayoutGravity: "end" as const,
  };
  const Container4View1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
    linearLayoutGravity: "center" as const,
  };
  const Container5View1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
    linearLayoutGravity: "stretch" as const,
  };
  const view2Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "yellow" as const,
  };
  const view3Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "green" as const,
  };

  return (
    <scroll-view className="root" scroll-orientation="vertical">
      <view style={buttonStyle} bindtap={() => setLinearOrientation(!linearOrientation)}></view>
      <text style={text1Style}>Click above red button to switch linear-direction</text>
      <text style={text2Style}>Current: "{linearOrientation ? "row" : "column"}"</text>
      <text className="title">linear-layout-gravity:none;(default)</text>
      <view className="linear_container" style={containerStyle}>
        <view style={Container1View1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-layout-gravity:start;</text>
      <view className="linear_container" style={containerStyle}>
        <view style={Container2View1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-layout-gravity:end;</text>
      <view className="linear_container" style={containerStyle}>
        <view style={Container3View1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-layout-gravity:center;</text>
      <view className="linear_container" style={containerStyle}>
        <view style={Container4View1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-layout-gravity:stretch;</text>
      <view className="linear_container" style={containerStyle}>
        <view style={Container5View1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
    </scroll-view>
  );
};

root.render(<LinearLayoutGravity />);
```

--------------------------------

### Start Development Server with npm

Source: https://lynxjs.org/llms-full.txt

Command to start the development server using npm.

```sh
npm run dev

```

--------------------------------

### Linear Cross Gravity Examples

Source: https://lynxjs.org/api/css/properties/linear-cross-gravity.html

Demonstrates various values of linear-cross-gravity including none, start, end, center, and stretch. The example allows switching the linear-direction between row and column.

```tsx
import { root, useState } from "@lynx-js/react";
import "./index.scss";

const LinearCrossGravity = () => {
  const [linearDirection, setLinearDirection] = useState(false);
  const container1Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "none" as const,
  };
  const container2Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "start" as const,
  };
  const container3Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "end" as const,
  };
  const container4Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "center" as const,
  };
  const container5Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "stretch" as const,
  };
  const buttonStyle = {
    width: "20%",
    height: "50px",
    backgroundColor: "red" as const,
  };
  const text1Style = {
    fontSize: "40rpx" as const,
    marginRight: "12rpx",
    fontWeight: "900" as const,
    color: "linear-gradient(120deg ,#0095ff 30% ,#42d392 100%)" as const,
  };
  const text2Style = {
    fontSize: "50rpx" as const,
    alignSelf: "center" as const,
    fontWeight: "900" as const,
    color: "linear-gradient(120deg,#0095ff 30%,#42d392 100%)" as const,
  };
  const view1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
  };
  const view2Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "yellow" as const,
  };
  const view3Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "green" as const,
  };

  return (
    <scroll-view className="root" scroll-orientation="vertical">
      <view style={buttonStyle} bindtap={() => setLinearDirection(!linearDirection)}></view>
      <text style={text1Style}>Click above red button to switch linear-direction</text>
      <text style={text2Style}>Current: "{linearDirection ? "row" : "column"}"</text>
      <text className="title">linear-cross-gravity:none;(default)</text>
      <view className="linear_container" style={container1Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:start;</text>
      <view className="linear_container" style={container2Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:end;</text>
      <view className="linear_container" style={container3Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:center;</text>
      <view className="linear_container" style={container4Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:stretch;</text>
      <view className="linear_container" style={container5Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
    </scroll-view>
  );
};

root.render(<LinearCrossGravity />);
```

--------------------------------

### Example Item: MDX Desktop Docs Present, Compat Partial Desktop Support

Source: https://lynxjs.org/llms-full.txt

Illustrates a situation where MDX desktop documentation is present, but the compat data shows partial desktop support. This is an example of an item before cleanup.

```markdown
- [ ] feature: `lynx-native-api.example` | compat: `packages/lynx-compat-data/lynx-native-api/example.json` | query: `lynx-native-api/example` | desktop: clay_macos=3.7, clay_windows=false | mdx_desktop: en=yes, zh=yes | docs: docs/en/api/lynx-native-api/example.mdx desktop_line=30, docs/zh/api/lynx-native-api/example.mdx desktop_line=30
```

--------------------------------

### ReactLynx Platform UI Creation Example

Source: https://lynxjs.org/guide/performance/analysis-performance/reactlynx-render-process

Shows the nodes that create platform UI on the first screen in the hello-world project, including page, view, image, and text elements with their attributes.

```jsx
<page>
  <view className="Background" />
  <view className="Banner">
    <view className="Logo" bindtap="{onTap}">
      <image src="{lynxLogo}" className="Logo--lynx" />
    </view>
  </view>
  <text className="Title">React</text>
  <text className="Subtitle">on Lynx</text>
  <image src="{arrow}" className="Arrow" />
  <text className="Description">Tap the logo and have fun!</text>
  <text className="Hint"> Edit " src/App.tsx " to see updates!</text>
</page>
```

--------------------------------

### justify-content: flex-start Example

Source: https://lynxjs.org/api/css/properties/justify-content.html

Aligns items to the start of the main axis. This is the default behavior.

```tsx
import { root } from "@lynx-js/react";
import "./index.scss";

const JustifyContent = () => {
  const boxStyle = {
    width: "30px",
    height: "30px",
  };

  const redBoxStyle = {
    ...boxStyle,
    backgroundColor: "red",
  };

  const yellowBoxStyle = {
    ...boxStyle,
    backgroundColor: "yellow",
  };

  const greenBoxStyle = {
    ...boxStyle,
    backgroundColor: "green",
  };

  const blueBoxStyle = {
    ...boxStyle,
    backgroundColor: "blue",
  };

  const flexStartStyle = {
    justifyContent: "flex-start" as const,
  };

  return (
    <>
      <text>justify-content:flex-start;</text>
      <view className="container" style={flexStartStyle}>
        <view style={redBoxStyle} />
        <view style={yellowBoxStyle} />
        <view style={greenBoxStyle} />
        <view style={blueBoxStyle} />
      </view>
    </>
  );
};

root.render(<JustifyContent />);
```

--------------------------------

### Install Lynx DevTool MCP Server using Codex CLI

Source: https://lynxjs.org/ai/lynx-devtool-mcp.html

Install the Lynx DevTool MCP server using the Codex CLI. Ensure you follow the general MCP configuration guide.

```bash
codex mcp add lynx-devtool -- npx @lynx-js/devtool-mcp-server@latest
```

--------------------------------

### Run Component Examples

Source: https://lynxjs.org/llms-full.txt

Command to watch and run examples for a specific component package using turbo.

```bash
# Example: run button examples
npx turbo watch dev --filter '@lynx-example/lynx-ui-button'
```

--------------------------------

### Get MetricFcpEntry Example

Source: https://lynxjs.org/api/lynx-api/performance-api/performance-entry/metric-fcp-entry.html

This example demonstrates how to create a performance observer to listen for and retrieve MetricFcpEntry events. It registers for the 'metric.fcp' event and logs the entry details when received. Ensure LynxView.setExtraTiming is used for complete metric availability.

```typescript
import * as React from "@lynx-js/react";
import { root, useMemo, useState } from "@lynx-js/react";
import type { MetricFcpEntry, PerformanceEntry } from "@lynx-js/types";
import "./index.scss";

export default function MetricFcpEntryExample(this: any) {
  const [fcpEntry, setFcpEntry] = useState<string>("");

  useMemo(() => {
    "background-only";
    // 1. Create a performance observer.
    const observer = lynx.performance.createObserver((entry: PerformanceEntry) => {
      if (entry.entryType == "metric" && entry.name == "fcp") {
        // 3. Received "metric.fcp" event.
        const fcpEntry = entry as MetricFcpEntry;
        setFcpEntry(JSON.stringify(fcpEntry, null, 4));
      }
    });
    // 2. Register to listen to the "metric.fcp" event.
    observer.observe(["metric.fcp"]);
  }, []);

  return (
    <view className="container">
      <text className="title">Hello MetricFcpEntry~</text>
      <text className="entry">{fcpEntry}</text>
    </view>
  );
}

root.render(<MetricFcpEntryExample />);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}


```

--------------------------------

### Install Valtio with deno

Source: https://lynxjs.org/react/state-management/valtio

Use this command to install Valtio with deno.

```bash
deno add npm:valtio
```

--------------------------------

### Install Valtio with bun

Source: https://lynxjs.org/react/state-management/valtio

Use this command to install Valtio using bun.

```bash
bun add valtio
```

--------------------------------

### Start Development Server with pnpm

Source: https://lynxjs.org/ai/start/quick-start

Run the development server using pnpm. This will typically start a local server and may display a QR code for preview.

```bash
pnpm run dev
```

--------------------------------

### useInitData

Source: https://lynxjs.org/api/react/Interface.Lynx.html

A hook for accessing initialization data provided to the application. This data is typically loaded once when the application starts and can be used for initial setup.

```APIDOC
## Function: useInitData()

### Description
Accesses initialization data provided to the application.

### Parameters
None explicitly documented.

### Returns
An object containing initialization data.
```

--------------------------------

### Testing Environment Setup

Source: https://lynxjs.org/api/elements/built-in/page.html

Functions for initializing and managing the testing environment, including element tree manipulation and Lynx testing environment installation.

```APIDOC
## Testing Environment Functions

### Description
Provides utilities for setting up and interacting with the Lynx testing environment.

### Functions
- **initElementTree()**: Initializes the element tree.
- **installLynxTestingEnv()**: Installs the Lynx testing environment.
- **uninstallLynxTestingEnv()**: Uninstalls the Lynx testing environment.

### Interfaces
- **LynxElement**: Represents a Lynx element.
- **LynxEnv**: Represents the Lynx environment.
- **LynxGlobalThis**: Global scope for Lynx.

### Type Aliases
- **ElementTree**: Type for the element tree.
- **ElementTreeGlobals**: Global variables for the element tree.
```

--------------------------------

### Example Usage

Source: https://lynxjs.org/api/rspeedy/lynx-bundle-rslib-config.externalbundlewebpackpluginoptions.bundlefilename.html

An example demonstrating how to configure the bundleFileName property when initializing ExternalBundleWebpackPlugin.

```APIDOC
## #Example
```
new ExternalBundleWebpackPlugin({
  bundleFileName: 'lib.lynx.bundle'
})
```
```

--------------------------------

### Start Development Server with bun

Source: https://lynxjs.org/llms-full.txt

Command to start the development server using bun.

```sh
bun run dev

```

--------------------------------

### LynxJS React Example for Linear Gravity

Source: https://lynxjs.org/llms-full.txt

This example demonstrates how to use the `linear-gravity` CSS property within a React component in LynxJS. It includes dynamic switching of `linear-direction` and showcases different `linear-gravity` values like 'none', 'start', 'end', 'center', and 'space-between'.

```tsx
import { root, useState } from "@lynx-js/react";
import "./index.scss";

const LinearGravity = () => {
  const [linearDirection, setLinearDirection] = useState(false);
  const container1Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearGravity: "none" as const,
  };
  const container2Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearGravity: "start" as const,
  };
  const container3Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearGravity: "end" as const,
  };
  const container4Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearGravity: "center" as const,
  };
  const container5Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearGravity: "space-between" as const,
  };
  const buttonStyle = {
    width: "20%",
    height: "50px",
    backgroundColor: "red" as const,
  };
  const text1Style = {
    fontSize: "40rpx" as const,
    marginRight: "12rpx",
    fontWeight: "900" as const,
    color: "linear-gradient(120deg ,#0095ff 30% ,#42d392 100%)" as const,
  };
  const text2Style = {
    fontSize: "50rpx" as const,
    alignSelf: "center" as const,
    fontWeight: "900" as const,
    color: "linear-gradient(120deg,#0095ff 30%,#42d392 100%)" as const,
  };
  const view1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
  };
  const view2Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "yellow" as const,
  };
  const view3Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "green" as const,
  };

  return (
    <scroll-view className="root" scroll-orientation="vertical">
      <view style={buttonStyle} bindtap={() => setLinearDirection(!linearDirection)}></view>
      <text style={text1Style}>Click above red button to switch linear-direction</text>
      <text style={text2Style}>Current: "{linearDirection ? \"row\" : \"column\"}"</text>
      <text className="title">linear-gravity:none;(default)</text>
      <view className="linear_container" style={container1Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-gravity:start;</text>
      <view className="linear_container" style={container2Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-gravity:end;</text>
      <view className="linear_container" style={container3Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-gravity:center;</text>
      <view className="linear_container" style={container4Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-gravity:space-between;</text>
      <view className="linear_container" style={container5Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
    </scroll-view>
  );
};

root.render(<LinearGravity />);
```

--------------------------------

### Start Producer Development Server

Source: https://lynxjs.org/react/code-splitting.html

Run this command to start the development server for the producer project using the consumer configuration.

```bash
npx rspeedy dev --config lynx.config.consumer.js
```

--------------------------------

### Transition Delay Example

Source: https://lynxjs.org/llms-full.txt

Demonstrates the effect of different transition-delay values on element animations. Use this to visualize how delays impact the start of CSS transitions.

```tsx
import { root, useState } from "@lynx-js/react";
import "./index.scss";

const TransitionDelay = () => {
  const [flag, setFlag] = useState(false);

  const baseStyle = {
    opacity: flag ? "1" : "0.1" as const,
    width: flag ? "100px" : "200px",
    height: flag ? "100px" : "200px",
    backgroundColor: flag ? "blue" : "red",
    visibility: (flag ? "visible" : "hidden") as "visible" | "hidden",
    top: flag ? "0px" : "50px",
    right: flag ? "0px" : "50px",
    bottom: flag ? "0px" : "50px",
    left: flag ? "0px" : "50px",
    transform: flag ? "translateX(0px)" : "translateX(50px)" as const,
  };

  return (
    <scroll-view scroll-orientation="vertical" className="scroll">
      <view className="base" bindtap={() => setFlag(!flag)}>
        <text>Click to transition</text>
      </view>
      <view
        className="base allTransition"
        style={{
          opacity: baseStyle.opacity,
          width: baseStyle.width,
          height: baseStyle.height,
          backgroundColor: baseStyle.backgroundColor,
        }}
      >
        <text>No delay animation</text>
      </view>
      <view
        className="base allTransition"
        style={{
          opacity: baseStyle.opacity,
          width: baseStyle.width,
          height: baseStyle.height,
          backgroundColor: baseStyle.backgroundColor,
          transitionDelay: "1s" as const,
        }}
      >
        <text>1s delay animation</text>
      </view>
      <view
        className="base allTransition"
        style={{
          opacity: baseStyle.opacity,
          width: baseStyle.width,
          height: baseStyle.height,
          backgroundColor: baseStyle.backgroundColor,
          transitionDelay: "2s" as const,
        }}
      >
        <text>2s delay animation</text>
      </view>
      <view
        className="base allTransition"
        style={{
          opacity: baseStyle.opacity,
          width: baseStyle.width,
          height: baseStyle.height,
          backgroundColor: baseStyle.backgroundColor,
          transitionDelay: "3s" as const,
        }}
      >
        <text>3s delay animation</text>
      </view>
    </scroll-view>
  );
};

root.render(<TransitionDelay />);

```

--------------------------------

### justify-content: space-between Example

Source: https://lynxjs.org/api/css/properties/justify-content.html

Distributes items evenly along the main axis with equal space between them. The first item is at the start, and the last item is at the end.

```tsx
import { root } from "@lynx-js/react";
import "./index.scss";

const JustifyContent = () => {
  const boxStyle = {
    width: "30px",
    height: "30px",
  };

  const redBoxStyle = {
    ...boxStyle,
    backgroundColor: "red",
  };

  const yellowBoxStyle = {
    ...boxStyle,
    backgroundColor: "yellow",
  };

  const greenBoxStyle = {
    ...boxStyle,
    backgroundColor: "green",
  };

  const blueBoxStyle = {
    ...boxStyle,
    backgroundColor: "blue",
  };

  const spaceBetweenStyle = {
    justifyContent: "space-between" as const,
  };

  return (
    <>
      <text>justify-content:space-between;</text>
      <view className="container" style={spaceBetweenStyle}>
        <view style={redBoxStyle} />
        <view style={yellowBoxStyle} />
        <view style={greenBoxStyle} />
        <view style={blueBoxStyle} />
      </view>
    </>
  );
};

root.render(<JustifyContent />);
```

--------------------------------

### Basic Usage of Go Component

Source: https://lynxjs.org/help/example.html

Import the `Go` component from `@lynx` and provide the `example` ID to embed an interactive example.

```javascript
import { Go } from '@lynx';

<Go example="view" />;
```

--------------------------------

### Example: End Trace Section

Source: https://lynxjs.org/llms-full.txt

Shows how to close a previously started trace event using endSection. Ensure the category and name match the beginSection call.

```objective-c
[LynxTraceEvent beginSection:@"logic" withName:@"parse-data"];
// ... your code ...
[LynxTraceEvent endSection:@"logic" withName:@"parse-data"];
```

--------------------------------

### Initialize Rspeedy Project

Source: https://lynxjs.org/llms.txt

Use this command to scaffold a new ReactLynx project with Rspeedy configuration and sample code. Refer to the Quick Start guide for more details.

```bash
pnpm create rspeedy
```

--------------------------------

### Create New Web Project with Rsbuild (deno)

Source: https://lynxjs.org/3.8/guide/start/integrate-with-existing-apps.html

Use this command to initialize a new web project using Rsbuild with deno.

```bash
deno init --npm rsbuild@latest
```

--------------------------------

### LynxJS CSS API: Linear Cross Gravity Example

Source: https://lynxjs.org/llms-full.txt

Demonstrates how to use the linear-cross-gravity CSS property in LynxJS to control item alignment along the cross axis. This example allows toggling between row and column directions to observe the effects of 'none', 'start', 'end', 'center', and 'stretch' alignments.

```tsx
import { root, useState } from "@lynx-js/react";
import "./index.scss";

const LinearCrossGravity = () => {
  const [linearDirection, setLinearDirection] = useState(false);
  const container1Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "none" as const,
  };
  const container2Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "start" as const,
  };
  const container3Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "end" as const,
  };
  const container4Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "center" as const,
  };
  const container5Style = {
    linearDirection: linearDirection ? "row" : "column" as "row" | "column",
    linearCrossGravity: "stretch" as const,
  };
  const buttonStyle = {
    width: "20%",
    height: "50px",
    backgroundColor: "red" as const,
  };
  const text1Style = {
    fontSize: "40rpx" as const,
    marginRight: "12rpx",
    fontWeight: "900" as const,
    color: "linear-gradient(120deg ,#0095ff 30% ,#42d392 100%)" as const,
  };
  const text2Style = {
    fontSize: "50rpx" as const,
    alignSelf: "center" as const,
    fontWeight: "900" as const,
    color: "linear-gradient(120deg,#0095ff 30%,#42d392 100%)" as const,
  };
  const view1Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "red" as const,
  };
  const view2Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "yellow" as const,
  };
  const view3Style = {
    width: "20px",
    height: "20px",
    backgroundColor: "green" as const,
  };

  return (
    <scroll-view className="root" scroll-orientation="vertical">
      <view style={buttonStyle} bindtap={() => setLinearDirection(!linearDirection)}></view>
      <text style={text1Style}>Click above red button to switch linear-direction</text>
      <text style={text2Style}>Current: "{linearDirection ? \"row\" : \"column\"}"</text>
      <text className="title">linear-cross-gravity:none;(default)</text>
      <view className="linear_container" style={container1Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:start;</text>
      <view className="linear_container" style={container2Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:end;</text>
      <view className="linear_container" style={container3Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:center;</text>
      <view className="linear_container" style={container4Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
      <text className="title">linear-cross-gravity:stretch;</text>
      <view className="linear_container" style={container5Style}>
        <view style={view1Style}></view>
        <view style={view2Style}></view>
        <view style={view3Style}></view>
      </view>
    </scroll-view>
  );
};

root.render(<LinearCrossGravity />);

```

--------------------------------

### Install Valtio with npm

Source: https://lynxjs.org/llms-full.txt

Installs the Valtio state management library using npm.

```sh
npm install valtio

```

--------------------------------

### Start Development Server with yarn

Source: https://lynxjs.org/ai/start/quick-start

Run the development server using yarn. This will typically start a local server and may display a QR code for preview.

```bash
yarn run dev
```

--------------------------------

### Incorrect: Slice Events Across Timer/Callback Boundary

Source: https://lynxjs.org/llms-full.txt

This example shows an incorrect usage of profileStart/profileEnd across a setTimeout boundary. Slice events must start and end on the same thread.

```javascript
// Timer/callback
lynx.performance.profileStart('async function');
setTimeout(() => {
  // ...
  lynx.performance.profileEnd();
}, 3000);
```

--------------------------------

### Auto-scrolling with useRef and invoke

Source: https://lynxjs.org/guide/interaction/event-handling/manipulating-element.react.html

This example demonstrates how to auto-scroll a `<scroll-view />` component. It uses `useRef` to get a reference to the element and then calls the `autoScroll` method via `invoke()` in an event handler.

```typescript
import { useRef } from "@lynx-js/react";
import type { NodesRef } from "@lynx-js/types";

import { ScrollItem } from "../component/scrollItem.jsx";

export const App = () => {
  const scrollRef = useRef<NodesRef>(null);

  const handleTap = () => {
    scrollRef.current
      ?.invoke({
        method: "autoScroll",
        params: {
          rate: 120,
          start: true,
        },
      })
      .exec();
  };

  return (
    <view
      style={{
        width: "100%",
        height: "100%",
        padding: "10px",
        display: "linear",
        marginTop: "20px",
      }}
    >
      <view bindtap={handleTap}>
        <text
          style={{
            fontSize: "20px",
            height: "40px",
            paddingLeft: "10px",
            marginTop: "10px",
          }}
        >
          Tap me to enable auto-scroll
        </text>
      </view>
      <scroll-view
        ref={scrollRef}
        scroll-orientation="vertical"
        style={{ width: "100%", height: "100%", paddingLeft: "5px" }}
      >
        {Array.from({ length: 20 }).map((item, index) => (
          <ScrollItem width="calc(100% - 10px)" height="100px" index={index} />
        ))}
      </scroll-view>
    </view>
  );
};

```

--------------------------------

### padding-inline-start Syntax Examples

Source: https://lynxjs.org/api/css/properties/padding-inline-start.html

Illustrates the various valid syntaxes for the padding-inline-start CSS property, including length and percentage values.

```css
/* <length> values */
padding-inline-start: 0.5em;
padding-inline-start: 0px;
padding-inline-start: 2rpx;

/* <percentage> value */
padding-inline-start: 10%;

```

--------------------------------

### Example Item: Partial MDX Desktop Docs

Source: https://lynxjs.org/llms-full.txt

Illustrates a scenario where desktop support is present, but only some locales have MDX desktop documentation. This is an example of an item before cleanup.

```markdown
- [ ] feature: `lynx-native-api.example` | compat: `packages/lynx-compat-data/lynx-native-api/example.json` | query: `lynx-native-api/example` | desktop: clay_macos=3.7, clay_windows=3.7 | mdx_desktop: en=yes, zh=no | docs: docs/en/api/lynx-native-api/example.mdx desktop_line=20, docs/zh/api/lynx-native-api/example.mdx
```

--------------------------------

### Get Element ID - JavaScript Example

Source: https://lynxjs.org/api/engine/element-api/__GetID.html

Demonstrates how to set an Element's ID using __SetID and then retrieve it using __GetID. If an ID is not set, an empty string is returned.

```javascript
// main-thread.js
let element = __CreateElement('view', 0, {});
__SetID(element, 'video');

let id = __GetID(element);
```

--------------------------------

### Install Jotai with deno

Source: https://lynxjs.org/llms-full.txt

Installs the Jotai state management library using deno.

```sh
deno add npm:jotai

```
Tokens:
Raw