editable-ui
Editable UI (Creator Hub UI Designer)
The Creator Hub UI editor has no saved format of its own: the scene's real @dcl/react-ecs .tsx files under src/ui/ are the document. The editor parses them into a node tree, renders that on a canvas, and writes visual edits back as minimal text splices. A 1s disk watcher reflects external edits back onto the canvas.
Consequence: "editable in the editor" is a checkable property of the code, not a style preference. Code the parser cannot statically understand degrades in one of two ways:
| Degradation | Trigger | Effect |
|---|---|---|
Frozen node (dynamicProps) |
any uiTransform / uiBackground value, or any Label/Input/Dropdown prop, that is neither a literal nor a bare reference |
node still renders on the canvas, but the panel refuses every edit on it |
| Opaque node | unknown element name, spread props, conditional/logical/.map() children, JSX comments |
grey read-only block; its children are not walked, so the whole subtree disappears from the canvas |
Both are silent. Write to the contract below and neither happens.
Prerequisite knowledge: the build-ui skill (React-ECS elements, uiTransform/uiBackground, flex layout). This skill only covers what makes that code editor-editable.
[EXPERIMENTAL] The UI editor is opt-in: the user enables Settings > Experimental > UI Editor in the Creator Hub, and the scene must be on @dcl/sdk 7.26.0+ (the version that ships ScreenInsetArea / InteractableArea and the per-device default virtual screen). The 2D/3D mode switch is hidden otherwise. Code written to this contract is ordinary React-ECS and runs anywhere regardless.