Lynx in Action: Building a Conversational App from Scratch

Lynx is best described as a web-inspired, high-performance cross-platform framework for mobile app development. It is a Rust-powered engine coupled with a JavaScript runtime, created to render mobile UIs with speed and precision. In essence, Lynx allows you to write your app’s interface using standard web paradigms – for example, defining UI components in markup (similar to HTML tags like and ) and styling them with CSS – rather than dealing with platform-specific widgets. This makes it easy for web developers to feel at home when building mobile apps.

In this blog post, We’ll be building a chatbot using the Lynx Framework

As per the Lynx Docs, we shall begin by typing the below in our terminal (Ensure you have Node v18^ installed).

npm create rspeedy@latest

Then download the LynxExplorer and extract the downloaded archive by running the below:

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

Open Xcode, choose Open Developer Tool from the Xcode menu. Click the Simulator to launch a simulator. Drag “LynxExplorer-arm64.app” into it. This will install the LynxExplorer App on your simulator.

Then type the following commands and start developing:

cd <project-name>
npm install
npm run dev

You will see a link similar to the below in your terminal

http://198.179.1.241:3000/main.lynx.bundle?fullscreen=true

Copy this link and paste it into the LynxExplorer on your simulator.

For debugging purposes, download the Debugging Tool. After installation, you should see something like the below.

This can be used to inspect elements and view outputs from the console.

Now lets jump into the code. You can see the full github repo here.

Layout

The layout of this screen is built using Lynx’s intuitive web-like component model, which mirrors familiar HTML semantics but compiles down to high-performance native views. The structure relies heavily on <view>, <image>, and <text> components—core primitives in Lynx that map cleanly to native UI elements while maintaining a declarative, readable format. The layout is composed of three main sections: the Header (housing the logo and title), the Content (which contains a descriptive paragraph and call-to-action), and the full-page Container that vertically stacks and centers the child views using flexbox-style styling. CSS is applied via class names (Container, Header, Logo, etc.), with styles defined in a traditional stylesheet, allowing developers to leverage standard CSS features like padding, font sizes, colors, and responsive layout patterns. This design approach is particularly powerful in Lynx, as it allows for web-native development practices while rendering fluidly on mobile with near-native performance—without the styling limitations or platform-specific quirks found in React Native or Flutter.

import { useCallback } from "@lynx-js/react";
import triniBotLogo from "../assets/bot-logo.png";
import { useNavigate } from "react-router";

const Home = () => {
  const nav = useNavigate();
  return (
    <view className="Container">
      <view className="Header">
        <image src={triniBotLogo} className="Logo" />
        <text className="Title">Welcome to TriniBot</text>
      </view>
      <view className="Content">
        <text className="Description">
          TriniBot is your personal assistant for exploring the vibrant culture
          and events of Trinidad and Tobago. Stay updated with the latest
          happenings and discover new experiences.
        </text>
        <view className="LoginButton" bindtap={() => nav("/login")}>
          <text className="LoginButtonText">Get Started</text>
        </view>
      </view>
    </view>
  );
};

export default Home;

Routing

Lynx supports client-side routing through a familiar React-style API using react-router, making it easy to navigate between screens while keeping the app performant and declarative. In this TriniBot app, navigation is handled with <MemoryRouter> and <Routes>, which define all available pages and their paths. Each <Route> maps a URL path ("/", "/login", "/signup", "/chat") to a specific component, such as <Home /> or <Chat />, allowing for clean, modular screen management. MemoryRouter is particularly useful in mobile-first Lynx apps where you don’t rely on the browser’s history stack but still need predictable navigation behavior. Transitions between routes are triggered using the useNavigate() hook from react-router, which works seamlessly within Lynx’s component structure. This approach blends the best of single-page app navigation with native-level UI rendering, giving developers precise control over the app flow without sacrificing speed or structure. To get started with routing in Lynx run npm install react-router in your terminal.

import "./App.css";
import { MemoryRouter, Routes, Route } from "react-router";
import Home from "./pages/Home.jsx";
import Login from "./pages/Login.jsx";
import Signup from "./pages/Signup.jsx";
import Chat from "./pages/Chat.jsx";

export function App() {
  return (
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/chat" element={<Chat />} />
      </Routes>
    </MemoryRouter>
  );
}

Data Fetching

Data fetching in Lynx is straightforward and flexible, especially for developers already familiar with React-style patterns. In the TriniBot app, we handle all API communication through clean service classes like UserService, which abstract away the details of network requests. These services use the standard fetch() API under the hood to send requests to a Flask backend we built specifically for the app. The backend handles user authentication, JWT-based authorization, and chatbot messaging via the OpenAI API. See backend code here.

import { apiUrl } from "../utils/apiRoute.js";

export class UserService {
  static async signupUser(user: {
    name: string;
    email: string;
    password: string;
  }) {
    const res = await fetch(`${apiUrl}/signup`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(user),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || "Signup failed");
    }

    return res.json(); // Expected to return: { token: string }
  }

  static async loginUser(user: { email: string; password: string }) {
    const res = await fetch(`${apiUrl}/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(user),
    });

    if (!res.ok) {
      const err = await res.json();
      throw new Error(err.error || "Login failed");
    }

    return res.json(); // Expected to return: { token: string }
  }
}

Building TriniBot with Lynx has been a refreshing experience that combines the simplicity of web development with the performance of native mobile apps. By leveraging familiar tools like React-style components, CSS-based styling, and a Flask API on the backend, we were able to quickly prototype, authenticate users, and integrate a conversational AI—all with clean, maintainable code. Lynx’s flexible architecture allowed us to move fast without sacrificing responsiveness or native feel. Whether you’re a web developer exploring mobile or a seasoned engineer looking for a new stack, Lynx offers a powerful and intuitive path forward.

Check out the video below to see TriniBot in action 👇