Understanding Lynx Core Elements

#webdev #lynx #programming #beginners

In this article, we will explore the core elements in Lynx. When we use React to create web user interfaces, we often utilize HTML tags such as <div>, <span>, and <p>.

Here is an example React component:

function example() {
    return (
        <div>
            <p>Hello World</p>
        </div>
    );
}

It is important to note that the elements we write for the web are specific to the browser's understanding of HTML. When working with Lynx, these elements will not work because Lynx does not incorporate the concept of the DOM (Document Object Model).

Element tags

Lynx uses element tags that are similar to HTML elements. However, Lynx employs some unique element tags such as <view>, <text>, and <image> to display different types of content. Here is an example of how to display "Hello World" text:

<text>Hello World</text>

Just like HTML elements, Lynx element tags also support attributes. These attributes can be used by adding attribute names and values within the element tag.
In this example, style is the attribute name, and background:green is the attribute value.

<text style="background:green;">Hello World</text>

Learn more about attributes, refer to the API Reference.

Built-in Elements

The Lynx Engine includes built-in elements by default.

View

The view is fundamental building block for user interfaces in Android and iOS development.
A <view> is a small rectangular element on the screen that can display text, images, or user input.

<view style="background:red;">
  <text>Hello World!</text>
</view>

Image

The <image> element is used to display images.

<image auto-size style="width:100px;" src="./assets/example.png" />

Check out more built-in Lynx elements by referring to the Built-in Elements Documentation.

Native Rendering of Elements

At runtime, Lynx generates the corresponding iOS and Android component, or HTML elements on the Web.
Here is a diagram from the official docs: