This is the second post in the Bombie series. The first post introduced what Bombie is: a drag-and-drop builder for Material-UI in React, with a live demo at bombie-three.vercel.app . This one is about how it's actually put together. Bombie's whole design comes from a single decision early on: represent the UI as a JSON tree, and write two renderers against it — one for the builder canvas, one for the live preview. Every other feature is a consequence of that. The data model Every node in a Bombie layout has the same shape: { id : " <uuid> " , info : { tag : " Button " , /* catalog metadata */ }, props : { variant : " contained " , color : " primary " , children : " Save " }, child : [ /* nested nodes, same shape */ ] } Enter fullscreen mode Exit fullscreen mode A whole layout is a tree of these. That's it. id — stable identifier; used by the property editor to target a specific node and by react-dnd to know what's being moved. info — catalog metadata pulled from the element registry.…