Element Types
In the UI Editor, an Element represents any visual element of your application’s user interface. For example, if you’re designing a menu, each button, image, or text field is represented by an Element. You can think of Elements as the building blocks of a QSApp.
Each Element type in the UI Editor serves a specific purpose in constructing your interface. These types determine how elements are rendered and interact with one another. Use this guide to choose the right Element for your design needs.
Visit our Elements Demo QSApp to see each Element in action, or read below for further information about each Element.
Container Element
Container Elements are used to group related Elements together and act as the foundation for your layout. They allow you to align, apply transformations, or add filters to all child elements at once, making it easier to manage complex layouts.
Learn more about Container Elements.
Animated Sprite Element
Animated Sprite Elements display animated sequences by cycling through multiple frames. They’re ideal for elements that require smooth, frame-by-frame motion, such as character animations or dynamic visual effects.
Learn more about Animated Sprite Elements.
Bitmap Text Element
Bitmap Text Elements render stylized text with pre-generated textures. They are optimized for performance when displaying dynamic text, and are optimal for changing text contents rapidly without performance loss.
Learn more about Bitmap Text Elements.
Custom Element
Custom Elements offer the flexibility to introduce custom code-driven behavior to your layout. Use of this element is available with the QSApp Enterprise plan.
Learn more about Custom Elements.
Frame Element
Frame Elements are useful for adding a bordered container or an outline around content. They can help visually separate sections or highlight specific elements within your UI.
Learn more about Frame Elements.
Grid Element
Grid Elements automatically manage the positioning of their children, making it easier to create uniform, tabular arrangements.
Learn more about Grid Elements.
IFrame Element
IFrame Elements embed external web content, interactive media, or dynamic pages directly into your layout. This is helpful when you want to integrate dynamic or third-party content seamlessly.
Learn more about IFrame Elements.
Input Element
Input Elements provide interactive data input fields, enabling user interaction with text or numerical data. They are essential for forms, search bars, and any context where user feedback is required. Use of this element is available with the QSApp Enterprise plan.
Learn more about Input Elements.
Layout Reference Element
Layout Reference Elements enable you to reference or reuse an existing layout. This modular approach lets you maintain consistency across your design and saves time by avoiding the need to recreate elements from scratch.
Learn more about Layout Reference Elements.
Linear Gradient Element
Linear Gradient Elements create smooth, linear transitions between colors. They are often used as backgrounds or overlays to add visual depth and enhance the overall aesthetic of your design.
Learn more about Linear Gradient Elements.
Link Element
Link Elements function as hyperlinks or navigation elements within your layout. They allow navigation to external content, making your design more interactive.
Learn more about Link Elements.
Particle Emitter Element
Particle Emitter Elements generate dynamic particle effects (such as fire, smoke, or sparkles) that add visual flair and movement to your UI. They are useful for creating lively, immersive effects that enrich the user experience.
Learn more about Particle Emitter Elements.
Radial Gradient Element
Similar to Linear Gradient Elements, Radial Gradient Elements create color transitions, but from a central point outward. They are used for spotlight effects or as backgrounds that require circular color blends.
Learn more about Radial Gradient Elements.
Render Proxy Element
Render Proxy Elements allow you to render other elements in place of the Render Proxy element. They can be used to alter the rendering order of elements.
Learn more about Render Proxy Elements.
Spine Element
Spine Elements support advanced skeletal animations using Spine animation data. They are designed for fluid, bone-based animations that can bring characters and interactive elements to life.
Learn more about Spine Elements.
Sprite Element
Sprite Elements are used to display static images such as icons and graphics. They form the basic building blocks for image-based elements in your UI, and are versatile enough to be used across various design contexts.
Learn more about Sprite Elements.
Text Element
Text Elements can be used to display one or multiple lines of text, and the style can be set at runtime. Text Elements are not as performant as BitmapText Elements, but provide great control over the style of the text.
Learn more about Text Elements.
Tiling Sprite Element
Tiling Sprite Elements display textures that repeat seamlessly across an area. They are perfect for creating patterned backgrounds or decorative elements that require a continuous, tiled look.