Understanding Lynx Core Elements

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 , , and . Here is an example React component: function example() { return ( Hello World ); } 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 , , and to display different types of content. Here is an example of how to display "Hello World" text: Hello World 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. Hello World 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 is a small rectangular element on the screen that can display text, images, or user input. Hello World! Image The element is used to display images. 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: Check out the documentation to learn more about native rendering. In the next article, we will learn about using CSS for styling Lynx pages. Follow for updates!

Mar 9, 2025 - 09:28

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

, , and

Here is an example React component:

function example() {
    return (
        
            Hello World
        
    );
}

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 , , and to display different types of content. Here is an example of how to display "Hello World" text:

Hello World

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.

Hello World

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 is a small rectangular element on the screen that can display text, images, or user input.


  Hello World!

Image

The element is used to display images.

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:

Check out the documentation to learn more about native rendering.

In the next article, we will learn about using CSS for styling Lynx pages.

Follow for updates!