Advanced

2D UI Elements

Create rich user interfaces

Text Labels

Add text annotations to enhance your 3D scene.

Aa

Text Element

Type | Text           | X  | Y   | FontSize | Color
text | Total: $500    | 20 | 30  | 18       | #333333
Parameter Description Example
type Element type text
text Label content "Width: 100mm"
x, y 2D position in pixels 50, 100
fontSize Text size 16
color Text color #333333

Dimension Lines

Display measurements directly on your 3D model.

100mm

Dimension Element

Parameter Description Example
type Element type dimension
start Start point coordinates 0,0,0
end End point coordinates 100,0,0
offset Line offset from model 20

GUI Elements

Create interactive controls for user input.

BUTTON

Buttons

Type   | Label
button | Calculate

Sliders

Type   | Min | Max
slider | 10  | 500
Wood

Dropdowns

Type     | Options
dropdown | A,B,C
250

Input Fields

Type  | Value
input | 250

Info Panels

Display summary information in styled panels.

Summary

Panel Element

Type  | Title   | Content              | X  | Y
panel | Summary | Width: {Width}mm     | 10 | 10

Dynamic Content

Use formulas to create live-updating displays.

= $500

Formula-Driven Text

Type | Text                                        | X  | Y
text | ="Price: $" & Total                        | 20 | 30
text | =IF(InStock,"In Stock","Out of Stock")     | 20 | 60

Positioning

Place elements precisely on screen.

X

X Position

Pixels from left edge

Y

Y Position

Pixels from top edge

50%

Responsive

Use percentages: x: 50%

Styling Options

Customize the appearance of your UI elements.

Property Description Example
backgroundColor Background color #FFFFFF
borderColor Border color #CCCCCC
borderRadius Corner rounding 8
padding Inner spacing 10
opacity Transparency (0-1) 0.9
📐

Group Controls

Place related inputs together

📱

Test Mobile

Check different screen sizes

🎯

Leave Space

Don't crowd the 3D view

Ready to design?

Build intuitive configurator interfaces

Get Started