What is BaseUI?

BaseUI is the Editor’s Design system.This system is built in way that everyone in and outside of the Editor company can use it.It’s main product is “reusable lego blocks” that are used in Editor Panels, App Settings panels, Popups and Modals.

Generic & Reusable

The core principle of BaseUI is being as generic as possible, each element and ability we create shouldn’t be thought of as a specific element for a specific product.We're trying to think wider - where can we use it in the future? / can we use it in other products?

Who our library serving today

Classic Editor
BaseUI is used in editor settings panel & popups but also exists as primitives in other areas like top bar menus, context menus, site tree, crop bar and more.
Unfortunately not everything in the editor is new BaseUI, because of historical reasons many of the panels and sections in the editor are using parts that looks like baseui but are local editor or implementation AKA old baseui.

Editor X (via skin)
Editor X is using baseui with a skin on top of it to change the look and feel, it has their own color system. grid, and text styles.
New panels are using only baseui as well as the inspector and other panels and sections in the editor.
Imported panels from the classic editor are exactly as in the classic editor.
The goal is to replace all panels in classic editor to baseui, so the skin facelift can be applied automatically.

App Builder
App builder

Some Verticals
Some of the verticals app settings are already using BaseUI (Stores, Bookings) but most are still using a copied components library AKA UI Lib.

TPA's
All TPA's app settings are also using UI lib and also some local features they created that are not officially supported in UI Lib.

Roles

UX
Defining & reviewing any new component in the editor and any new component needed in BaseUI.Managing and maintaining the sketch libraries.

Dev
Developing and improving new components/features into the library.Guiding and reviewing PR’s from external devs.