How to get started with Lynx js? Configure your first project

Lynx JS is a framework that allows you to create mobile applications using HTML-like syntax, native CSS and logic in JavaScript. This allows web developers to quickly enter the world of mobile apps without having to learn new languages. The framework is designed with performance and simplicity in mind – all thanks to a few key features like: declarative user interface, built-in CSS support and dual-threaded architecture. If you are interested in the basics about Lynx, see our article titled:“Lynx – a new player in the cross-platform mobile framework market“.

Prerequisites to get started with Lynx JS

To get started with Lynx JS, you need to meet certain system requirements and prepare a suitable development environment.

System requirements:

• Node.js: Version 18 or higher. For projects using TypeScript, version 18.19 or higher is recommended.
• Operating system: macOS or Linux. Developers planning to create iOS apps are required to have Xcode installed on macOS. ​
• Android SDK: Required for developing Android apps. ​
• Code editor: For example, AI Code Editor, Visual Studio Code or any other code editor.

Installation and configuration of the first project

Step 1 Start the project using create-rspeedy, which will set everything up automatically, without the need for manual configuration. Run the command:

run create rspeedy@latest

During the configuration process, you will be asked to: 
– project name or path: you can enter your own or press the Tab keyto use the default
– language selection – TypeScript or JavaScript 
– additional tools, e.g. Biome for formatting.

Once you have completed these steps, a new folder with the project configuration will be created.

Step 2. Go to your project directory and install the required packages:

cd name-your-project

Step 3. Install NPM dependencies using the package manager:

nmp install

Step 4. Next, start the development server:

nmp run dev

Your application should now work. You can preview your application in Lynx Explorer.

How can I preview the app in Lynx Explorer?

1. Checking the app on iOS

For iOS, you first need to download Xcode from the Mac App Store. Then download LynxExplorer for macOS from the official website. After downloading, you need to extract it:

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

The next step is to drag the LynxExplorer app onto the iOS Simulator, which will install it in this environment.

2. Checking the Android app

To run the app in developer mode, type the following in the terminal

npm run dev

This command will launch a local development server and generate a QR code that allows you to easily connect to the application.

Then download and install the Lynx Explorer app on your Android device. Once you have started Lynx Explorer, scan the QR code you generated earlier. The app will automatically load on your phone, allowing you to test its live functionality.

Need support with mobile projects?

Write to us!

How can I make changes to the project?

It’s very simple. Open the file src/App.tsx in your code editor and make any changes you want.

You should see that the user interface in the Lynx Explorer application is updated automatically.

How can I build the first component in Lynx?

Now that you have your environment ready and your project running, it is time to create your first component. I will show you a simple example of a click counter, which will help you learn the basics of Lynx syntax, reactive data and event handling.

First, create Counter.lynx file in src/components/ directory. Paste the following code into it:

<view class="container">
  <text class="count">Clicks: {{ count }}</text>
  <view class="button" @tap="increment">
    <text>+</text>
  </view>
</view>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },

.container {
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f9f9f9;
}

.count {
  font-size: 24px;
  margin-bottom: 20px;
}

.button {
  background-color: #007aff;
  padding: 12px 20px;
  border-radius: 10px;
}

.button text {
  color: white;
  font-size: 20px;
}
</style>

This simple component demonstrates several key features of Lynx JS:

• declarative structure – layout based on view and text, similar to HTML, but directly mapped to native Android and iOS components.
• reactivity – the count variable automatically updates the interface after each change.
• events – assigning @tap=“increment” calls the method when the button is clicked.
• CSS styling – exactly like in web applications. You have access to properties that are missing in React Native, for example, without additional tools.

To display a component, import it in the App.lynx file and use it like a regular tag:

<template>
  <view class="app">
    <Counter />
  </view>
</template>

<script>
import Counter from './components/Counter.lynx'

export default {
  components: {
    Counter
  }
}
</script>

After saving the changes and refreshing the application (in the emulator or via Lynx Explorer), you will see a fully functional counter. This is the first step towards creating more complex interfaces in Lynx JS.

Developing projects with Lynx JS – what makes this framework stand out?

Lynx JS is not just another mobile framework – it is a modern platform that has been designed for maximum performance, flexibility and convenience for web developers. Here are a few features that really make the difference:

1. Two-thread architecture

Unlike React Native, Lynx works in a two-thread model – the application logic and interface rendering work independently of each other. This allows the UI to remain responsive even with complex calculations in the background. This is a huge step forward in terms of smoothness and stability.

2. Full support for native CSS

Lynx allows you to write styles using full CSS (Cascading Style Sheets), including selectors, variables, animations, and media queries. You don’t have to learn any new APIs for styling – everything works just like in a browser.

3. Lynx is not just for Reacters

Although it currently supports React, Lynx is a framework agnostic. This means that it will be possible to develop applications with other libraries such as Vue or Svelte in the future.

4. It also works on the web

Lynx can also be rendered in a web browser, which speeds up the UI testing process and allows you to build cross-platform applications with even more freedom.

FAQ – Frequently Asked Questions

How do I get started with Lynx?
Install Node.js (18+), download the Rspeedy tool and create a new project with the command Run create rspeedy@latest. Then start the development server with the command Run run dev and open the app in Lynx Explorer.

How does the Lynx app work?
The Lynx application is based on a two-thread architecture – the user interface is rendered natively (Android/iOS), and the application logic runs in a separate thread. You write the code in HTML syntax with CSS and JavaScript, which allows you to create fast and responsive mobile applications.