Adobe Spectrum Web Components Builder
Adobe Spectrum
Future-looking project to develop Adobe Spectrum design language based around web components.
Visit https://opensource.adobe.com/spectrum-web-components/ for more details.
WCB Builder
WCB builder helps to generate Adobe Spectrum Web Components - Future-looking project to develop Adobe Spectrum design language based around web components.
Need for the WCB Builder
There are multiple design system which has web component libraries support with the different set of components to build UI designs in their ecosystems.WCB Builder helps to provide features to generate UI designs for all of those web components supported UI design ecosystems.
WCB Builder helps to
- create responsive content,
- add / clone customize the components, build once and reuse it by saving the design,
- use from pre-saved forms, widgets, custom components,
- test with the preview mode, and
- adjust the properties.
Sample Layouts / Pages
Sample Registration Form generated using WCB Builder
Sample Appointment Form generated using WCB Builder
WCB Builder Application Flow
- Login / Signup
- Choose the framework
- Use Existing template / Edit saved design / Create New Design,
- Edit the content / properties of the elements / components
- Preview / Save / Download.
WCB Builder currently supported the List of web component frameworks / libraries
- Adobe Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
- SAP UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
- Carbon Web Components - Carbon Design System variant on top of Web Components.
- Ionic Web Components - Using Web Components in Ionic.
- Crayons Web Components - Collection of web components that adheres to the Freshworks Design System.
- More to come...