editable-ui

Write one React-ECS component per file under src/ui/ using only UiEntity, Label, Input, Dropdown, and Button elements. Keep every style value a literal or a bare state/props reference, express visibility through useInteraction active layers, and move all clocks and math into a driver file outside src/ui/.

A node freezes when any uiTransform or uiBackground value is computed (arithmetic, calls, ternaries, shared identifiers) instead of a literal or bare reference. It turns opaque when it uses unknown element names, spreads other than a useInteraction constant, conditional rendering, .map(), or JSX comments.

Use the driver pattern: bind the animated value (width, color alpha, position) to a state variable, then mutate that variable each frame from a system in a .ts file outside src/ui/. The editor only sees the bound key and its rest value, so easing and timers cost no editability.

No. The scene must use @dcl/sdk 7.26.0 or later, which ships ScreenInsetArea, InteractableArea, and per-device default virtual screens. The editor is also opt-in via Settings > Experimental > Enable UI Editor; below that SDK version it shows an upgrade notice instead.

Data-driven lists built with .map(), shared theme constants, computed style values, conditional element props, local helper components, children/slot composition, and color or texture-set props are not expressible. Substitutes include unrolled sibling elements, inline color literals, driver-maintained state variables, and separate @ui-component files.

Text intrinsic sizing is engine-dependent: Bevy measures rendered text into layout while Unity gives unset text dimensions roughly zero. Give every Label an explicit uiTransform width and height, and give every container stacking labels an explicit height, so layout matches across both explorers.