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.

UI Scaling

Scale a fixed-size design to fit any screen. Design at one resolution — say 1920×1080 — and the group scales all of its children together, like a game canvas. Positions, offsets and font sizes keep their proportions on every screen.

Data	Description
Scale Mode	Off (default) — no scaling. Fit — fills the screen and grows the canvas. Fill — covers the screen, cropping the edges. Letterbox — keeps the exact aspect ratio, with bars where the screen does not match. Match width / Match height — scale by one axis only.
Design Width	The width you design at, in pixels. Default 1920. Children are positioned in these units.
Design Height	The height you design at, in pixels. Default 1080.

The responsive design guide shows the three main modes side by side.

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.

Scaling a game UI to any screen

1. Put the whole screen inside one Group — usually the root.
2. Set Scale Mode to Letterbox (or Fit / Fill).
3. Set Design Width and Design Height to the resolution you design at.
4. Position and size children in those design pixels. The group scales everything as one unit.

Two rules, both enforced with a console warning:

• Only the outermost group should scale. A scaled group inside another scaled group compounds — the content is scaled twice and ends up smaller than either setting implies.
• Design Width/Height do nothing while Scale Mode is Off. Turn the mode on for them to take effect.

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.