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.
The UI editor is stable and always on in the Creator Hub (0.50.0+, creator-hub 66758e1c). There is no longer a Settings > Experimental toggle and no settings.guiEditor key — do not tell users to enable it. The only remaining gate is the SDK version: the scene must be on @dcl/sdk 7.26.0+ (the version that ships ScreenInsetArea / InteractableArea and the per-device default virtual screen). Below that, entering 2D mode shows an SDK-upgrade notice with an Update SDK button instead of the canvas. Code written to this contract is ordinary React-ECS and runs anywhere regardless.