Render Tree

Created on September 03, 2019, Last modified on May 19, 2022

The Lightning render tree has very conceptual similarities with the HTML DOM render tree. It is also used to define the elements that are shown and how they are positioned and rendered. Furthermore, the elements have properties that can be set to change the way that they appear. Still, Lightning's render tree is completely different than the HTML DOM. It is completely written in javascript and has a completely different (more basic) API. Later we'll learn how the render tree is defined via templates, and changed over time.


Lightning's render tree is composed out of elements. Elements are render primitives of the lng.Element type that can be set up to show a texture or not. This texture can be anything; from a solid color to a gradient, a piece of text or an image. Properties can be used to set their position and appearance:

  • The positioning of an element is relative to its parent and can be defined using the x and y properties.
  • An element can be scaled or rotated using transform properties.
  • An element will only show something when a texture is attached to it.
  • Rendering properties define if and how the element is being rendered.

Give feedback

Rating - 4.2 / 5. . Reviews - 5

No votes so far! Be the first to rate this post.

Go To Top