---
# System prepended metadata

title: 'Shape Up: UI Builder'

---

# Shape Up: UI Builder

## Problems Solved

### User is able to vet production components and themes work correctly together

We need a way to rapidly validate that our components can be used together successfully.  This is mostly about layout and styling of the components in a given theme.

**How? (features)**

### Requirements to merge to master

- [x] Merge latest mater. Port work to renamed repo/packages, might not have conflicts?
- [x] Add tests ... :(
- [ ] You can drag and drop components into an interface.
    - children only for MVP
    - before/after/inside can be follow up work
- [ ] You can remove components from the UI you've built.
- [ ] You can select components and show the props panel.
    - At time of writing, works by hotkey from outside frame only
    - Should have a toolbar button like chrome dev tools
    - Should work when focus is inside frame (see arch issues)
- [ ] Local storage is saving/loading work.
    - See `Button` as problem example - serialization broken because of `<CallIcon />`
- [ ] You should have an appropriate form control for editing a prop of a given type.
    - Input for strings, etc. Reuse playground controls if possible.
    - Object and array props should no be editable in the MVP.

### Follow up work

- Integrate v7 components.

- Make CodeSnippet into a full editor.  All that is required is to capture React element tree and translate to JSON tree.  See config `renderJSONTreeToJSXElement` which does this in reverse.  See our existing doc site editor for compiling strings to React elment tree.

- Add a tree view for easily selecting components and their children.  See simliar works left rails.

- Make useful for "bluelines"
    - Generate visual pointers to components with display names, [example](https://staceyeddy.files.wordpress.com/2016/01/redlines_1-e1456107656560.png?w=600&h=572).

- Sharable link
    - Could use lz-string compression and make shareable URL that encodes entire JSON tree in URL.  Refer to [babel repl](https://babeljs.io/repl) and [prettier playground](https://prettier.io/playground) for examples of sharable links that include lots of text information.

- Form controls for editing object and array props.  Should never expose object or array syntax, since user could be designer.  Instead, iterate keys of objects and use existing prop controls and map arrays into sub forms.

### Future work

- The ingredients necessary for using the builder are an object containing components, their info files, and a JSON tree.  The components and info files could be fetched from unpkg dynamically if libraries ship info files with their components.

### Architecture issues

#### Event listeners need to be added/removed in synchrony inside/outisde iframe boundary

Example, pressing the hotkey for starting selection of components needs to work when the focus is inside AND outside the iframe.  This requires listeners both inside and outside.  At time of writing, there is only a listener outside.  So, you cannot "start" selecting when focus is inside the frame.

Would be ideal to get away from relying on referential mutations to the json tree.  Instead, replacing elements or the entire tree might be more manageable.

The list of components in the left rail need to come from the user/client.  At time of writing, <List /> is hard coded against `componentInfoContext` in v0 docs.  The builder should remain powered by info files, but via config or props etc.  Allow supporting HTML elements.


### Bugs

- You cannot drop onto the root div because the selector doesn't recognize it.
- Changing a `design` prop slider in the knobs panel throws.  It is wired to update the `design` prop of the selected json tree element and should be working.

### Similar works

https://blocks-ui.com
https://openchakra.app
https://tailwind.build
https://create.fast.design