---
# System prepended metadata

title: UI Builder - support for 3rd party component libraries
tags: [pitch]

---

---
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
