Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

Quick Start

Welcome to the Lynx documentation! We will create a Lynx project and start developing.

System Requirements

  • Node.js 18 or later.
    • Requires Node.js 18.19 when using TypeScript as configuration.

Installation

Create a new Lynx project

We use Rspeedy(a Rspack-based Lynx build tool) to build a Lynx project.

It is recommended to start a new project using create-rspeedy, which sets up everything automatically for you. To create a project, run:

npm
yarn
pnpm
bun
npm create rspeedy@latest

After the prompts, create-rspeedy will create a folder with your project name.

Prepare Lynx Explorer

Lynx Explorer is a sandbox for trying out Lynx quickly.

INFO

We currently only provides pre-built binaries for iOS simulator. If you need to run Lynx Explorer on a real iOS device, you'll need to build it from source. Please refer to the Build Lynx Explorer for iOS guide.

  1. Install Xcode

Open up the Mac App Store, search for Xcode, and click Install (or Update if you have it already).

  1. Download LynxExplorer

Download LynxExplorer-arm64.app.tar.gz.

Then, extract the downloaded archive:

mkdir -p LynxExplorer-arm64.app/
tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/
  1. Install LynxExplorer on Simulator

Open Xcode, choose Open Developer Tool from the Xcode menu. Click the Simulator to launch one. Drag "LynxExplorer-arm64.app" into it.

Download LynxExplorer-x86_64.app.tar.gz.

Then, extract the downloaded archive:

mkdir -p LynxExplorer-x86_64.app/
tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/
  1. Install LynxExplorer on Simulator

Open Xcode, choose Open Developer Tool from the Xcode menu. Click the Simulator to launch one. Drag "LynxExplorer-x86_64.app" into it.

Scan the QR code to download the pre-built app from the GitHub Release.

Or, you may built from source following Build Lynx Explorer for Android guide.

Start developing

  1. Entry the created project:
cd <project-name>
  1. Install the NPM dependencies with package manager:
npm
yarn
pnpm
bun
npm install
  1. To start the development server, run:
npm
yarn
pnpm
bun
npm run dev

You will see a QR code showing up in the terminal, scan with your Lynx Explorer App or if you are using the simulator, just copy the bundle URL and past it on the "Enter Card URL" input in the Lynx Explorer App and hit "Go".

  1. Make your first change

Open the src/App.tsx file in your code editor and make a change.

You should see the UI on your Lynx Explorer being updated automatically.

hello-worldsrc/App.tsx
Preview

Debugging

Visit Lynx DevTool to download and open the Lynx DevTool desktop application. Use a USB cable to connect the debugging device, and start debugging.

Visit Debugging, learn how to debug your Lynx app.

Next steps

Here are a few things that we recommend exploring next. You can read them in any order.

ReactLynx

ReactLynx is the official React framework designed specifically for Lynx, offering a familiar and idiomatic React development experience.

Tutorial

Step-by-step walkthrough of building a Gallery page with Lynx

Thinking in ReactLynx

Learn how to thinking in the ReactLynx framework

Describing UI

Lynx makes it easy to create rich UI using familiar Web technology. Learn how to describe UI in the Lynx engine.

Elements

Checkout the builtin elements that Lynx have

Styling

Learn how to apply different styles in Lynx


Layout

Layout your elements and Components

Scrolling

Learn how to use scrollable elements in Lynx

Integration

Learn how to integrate Lynx with existing iOS/Android/Web Apps.

Integration

Integrate Lynx with existing Apps

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.