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

# Source: https://lynxjs.org/rspeedy/start/quick-start.md

# Source: https://lynxjs.org/react/start/quick-start.md

# Source: https://lynxjs.org/guide/start/quick-start.md

# Source: https://lynxjs.org/rspeedy/start/quick-start.md

# Quick Start

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

## System Requirements

- [Node.js 18](https://nodejs.org/en) or later.
  - Requires Node.js 18.19 when using TypeScript as configuration.

## Installation

<Steps>
  ### Create a new Lynx project

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

  It is recommended to start a new project using [`create-rspeedy`](https://npmjs.org/package/create-rspeedy),
  which sets up everything automatically for you. To create a project, run:

  <PackageManagerTabs command="create rspeedy@latest" />

  After completing 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.

  <PlatformTabs queryKey="explorer-platform">
    <PlatformTabs.Tab platform="ios-simulator">
      We currently only provide pre-built binaries for the 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](https://github.com/lynx-family/lynx/tree/develop/explorer/darwin/ios) guide.

      :::info
      A version of Lynx Explorer is also available on the [App Store](https://apps.apple.com/us/app/lynx-go-dev-explorer/id6743227790), published by community contributors.
      While this version is not reviewed and maintained by the Lynx team, we're thankful to the community for making it more convenient for developers to try out Lynx on iOS.
      :::

      1. **Install Xcode**

      Open up the Mac App Store, search for [Xcode](https://apps.apple.com/us/app/xcode/id497799835), and click Install (or Update if you have it already).

      2. **<div id="download-lynx-explorer,ios-simulator-platform=macos-arm64,explorer-platform=ios-simulator">Download LynxExplorer</div>**

      <PlatformTabs queryKey="ios-simulator-platform">
        <PlatformTabs.Tab platform="macos-arm64">
          Download [`LynxExplorer-arm64.app.tar.gz`](https://github.com/lynx-family/lynx/releases/latest/download/LynxExplorer-arm64.app.tar.gz).

          Then extract the downloaded archive:

          ```bash
          mkdir -p LynxExplorer-arm64.app/
          tar -zxf LynxExplorer-arm64.app.tar.gz -C LynxExplorer-arm64.app/
          ```

          3. **Install LynxExplorer on Simulator**

          Open Xcode, choose **Open Developer Tool** from the Xcode menu. Click the **Simulator** to launch a simulator. Drag "LynxExplorer-arm64.app" into it.
        </PlatformTabs.Tab>

        <PlatformTabs.Tab platform="macos-intel">
          Download [`LynxExplorer-x86_64.app.tar.gz`](https://github.com/lynx-family/lynx/releases/latest/download/LynxExplorer-x86_64.app.tar.gz).

          Then, extract the downloaded archive:

          ```bash
          mkdir -p LynxExplorer-x86_64.app/
          tar -zxf LynxExplorer-x86_64.app.tar.gz -C LynxExplorer-x86_64.app/
          ```

          3. **Install LynxExplorer on Simulator**

          Open Xcode, choose **Open Developer Tool** from the Xcode menu. Click the **Simulator** to launch a simulator. Drag "LynxExplorer-x86\_64.app" into it.
        </PlatformTabs.Tab>
      </PlatformTabs>
    </PlatformTabs.Tab>

    <PlatformTabs.Tab platform="android">
      Scan the QR code to download the pre-built app from the [GitHub Release](https://github.com/lynx-family/lynx/releases/latest).

      <QRCodeSVG style={{ border: '2px solid #fff' }} size={220} value="https://github.com/lynx-family/lynx/releases/latest/download/LynxExplorer-noasan-release.apk" />

      Or, you may build from source by following the [Build Lynx Explorer for Android](https://github.com/lynx-family/lynx/tree/develop/explorer/android) guide.

      :::info
      A version of Lynx Explorer is also available on the [Play Store](https://play.google.com/store/apps/details?id=com.funcs.io.lynx.go), published by community contributors.
      While this version is not reviewed and maintained by the Lynx team, we're thankful to the community for making it more convenient for developers to try out Lynx on Android.
      :::
    </PlatformTabs.Tab>

    <PlatformTabs.Tab platform="harmony">
      We currently only provide pre-built binaries for the harmony simulator. If you need to run Lynx Explorer on a real harmony device, you'll need to build it from source. Please refer to the [Build Lynx Explorer for Harmony](https://github.com/lynx-family/lynx/tree/develop/explorer/harmony) guide.

      1. **Install DevEco Studio**

      Download the latest DevEco Studio from the [official website](https://developer.huawei.com/consumer/en/deveco-studio/).

      2. **<div id="download-lynx-explorer">Download Lynx Explorer</div>**

      Download the pre-built app [`lynx_explorer-default-unsigned.hap`](https://github.com/lynx-family/lynx/releases/latest/download/lynx_explorer-default-unsigned.hap).

      Or, you may build from source by following the [Build Lynx Explorer for Harmony](https://github.com/lynx-family/lynx/tree/develop/explorer/harmony) guide.

      3. **Install Lynx Explorer on Simulator**

      ```bash
      hdc install lynx_explorer-default-unsigned.hap
      ```
    </PlatformTabs.Tab>
  </PlatformTabs>

  ### Start developing

  1. Navigate to the created project:

  ```bash
  cd <project-name>
  ```

  2. Install the NPM dependencies with package manager:

  <PackageManagerTabs command="install" />

  3. To start the development server, run:

  <PackageManagerTabs command="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 paste it on the "Enter Card URL" input in the Lynx Explorer App and hit "Go".

  4. 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.

  <Go example="hello-world" defaultFile="src/App.tsx" img="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/doc/hello-world-showcase-ios.png" defaultEntryFile="dist/main.lynx.bundle" />

  <br />

  ### Debugging

  Visit [Lynx DevTool](https://github.com/lynx-family/lynx-devtool/releases) to download and open the Lynx DevTool desktop application. Use a USB cable to connect the debugging device, and start debugging.

  Visit [Debugging](/guide/devtool/panels.md), learn how to debug your Lynx app.
</Steps>

## 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.

<NextSteps.Root>
  <NextSteps.Step href="/guide/start/tutorial-gallery" title="Tutorial" description="Step-by-step walkthrough of building a Gallery page with Lynx" />

  <NextSteps.Step href="/react/thinking-in-reactlynx" title="Thinking in ReactLynx" description="Learn how to think in the ReactLynx framework" />
</NextSteps.Root>

### Describing UI

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

<NextSteps.Root>
  <NextSteps.Step href="/guide/ui/elements-components" title="Elements" description="Check out the built-in elements that Lynx provides" />

  <NextSteps.Step href="/guide/ui/styling" title="Styling" description="Learn how to apply different styles in Lynx" />
</NextSteps.Root>

<br />

<NextSteps.Root>
  <NextSteps.Step href="/guide/ui/layout" title="Layout" description="Layout your elements and Components" />

  <NextSteps.Step href="/guide/ui/scrolling" title="Scrolling" description="Learn how to use scrollable elements in Lynx" />
</NextSteps.Root>

### Integration

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

<NextSteps.Root>
  <NextSteps.Step href="/guide/start/integrate-with-existing-apps" title="Integration" description="Integrate Lynx with existing Apps" />
</NextSteps.Root>