Group

This node acts as a container for other visual elements.

The Group node is the primary building block for layout, grouping, and organizing UI components.

The Group node is a flexible container that uses Flexbox for layout. It can arrange its children vertically (Column) or horizontally (Row). It supports scrolling, styling (background, border, shadow), and interaction events.

Inputs

Layout

Data	Description
Layout	"Vertical" (Column), "Horizontal" (Row), or "None" (Absolute/Manual). Default: "Vertical".
Multi Line Wrap	"Off" (single line), "On" (wrap to next line), "On Reverse".
Align Items	Alignment on the cross axis (e.g., horizontal alignment in a vertical column).
Justify Content	Alignment on the main axis (e.g., vertical distribution in a vertical column).
Vertical Gap	Space between items vertically.
Horizontal Gap	Space between items horizontally.

Scroll

Data	Description
Enable Scroll	Boolean. If true, the container will scroll if content overflows.
Show Scrollbar	Boolean. Toggle scrollbar visibility.
Snap	Enable scroll snapping.

Style

Data	Description
Background Color	The background color of the group.
Blur Effect	Enable background blur (glassmorphism).
Blur Amount	Strength of the blur.

Actions

Signal	Description
Scroll To Index - Do	Scrolls to a specific child index.
Scroll To Element - Do	Scrolls to a specific child element (referenced by object).
Focus	Sets focus to this group.
Blur	Removes focus.

Outputs

General

Data	Description
Node Reference	A reference to this DOM element. Useful for animations or scrolling.

Events

Signal	Description
Click	Triggered when the group is clicked.
Scroll Start	Triggered when scrolling begins.
Scroll End	Triggered when scrolling stops.

Usage

Creating a Card

1. Add a Group.
2. Set Background Color to White, Border Radius to 8px, Shadow enabled.
3. Set Layout to Vertical.
4. Add an Image and Text inside the group.

Creating a Scrollable List

1. Add a Group.
2. Set a fixed Height (e.g., 400px) or flex: 1.
3. Enable Enable Scroll.
4. Add content that exceeds the height.

Detailed Behavior

• Flexbox: Under the hood, this is a div with display: flex.
• Clipping: Use the Clip Content property to hide overflowing children (overflow: hidden).

Troubleshooting

• Not Scrolling: Ensure the group has a constrained height (not "Content Height") so that overflow can occur.