---
robots: noindex, nofollow
tags: pitch
---

# UI Builder - support for 3rd party component libraries

### Problem
Last month we have started [UI Builder project](https://hackmd.io/mA-_4BDmTSmKmXNgI19Wrg) whose purpose is to be able 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.
* The UI Builder is still not finished
* It allows to drop (some of) Fluent0 components only. No other component libraries.

### Appetite
We need to move UI Builder closer to be MVP-done. Untangle Builder UI from the components being dropped into the canvas.
Add support for 3rd party libraries. Add support for component variants (compose).

### Solution
- Iterate on unfinished UI Builder tasks
- You can edit props using appropriate form controls.
<!-- - ~~CodeSnippet editor
- Drag & drop editor generates code you can use in real application,
- You can edit the code directly, changes are reflected in the builder.
- Unknows from the previous iteration were hopefully addressed.~~
- Support more Fluent0 components -->
- Add support for components other than Fluent0
- Fluent0 icons
- Fluent7
- Product components
- ~~Material UI~~
- Add option to create/edit component variants (compose).
- Just test (dogfood) with Button and create RFC for workflow
- Adopt existing component info json generator work? [Elizabeth]

### Risks (Rabbit holes)
Props editor requires information about components. We will reuse work done for N* playground but it might still require additional work.

There are multiple stages for 3rd party components support - from manual - we need to change UI builder sources to add another UI library - to fully automated - just specify a name of NPM package and components will be added automagically. Anything more than a basic support will require machine readable components description - see [Component Info JSON Files](https://hackmd.io/gAXEpxxMRnC3XqCr-lGGwA) project.

### Out of scope (No-gos)
- Editing shorthands.
- Limiting what component can be dropped into what component.
- You can break things the same way when writing code directly.
- User can add/edit functions as component props.
- Make useful for "bluelines"
- Generate visual pointers to components with display names