Carbon Design System Web Components Builder

Carbon Design System

Open-source design system and library created by IBM, which implements the IBM Design Language.
Visit https://carbondesignsystem.com/ for more details.

WCB Builder

WCB builder helps to generate Carbon Design System Web Components - Open-source design system and library created by IBM, which implements the IBM Design Language.

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

  1. create responsive content,
  2. add / clone customize the components, build once and reuse it by saving the design,
  3. use from pre-saved forms, widgets, custom components,
  4. test with the preview mode, and
  5. adjust the properties.

Sample Layouts / Pages

Sample Registration Form generated using WCB Builder

Sample Ticket Form generated using WCB Builder

WCB Builder Application Flow

  1. Login / Signup
  2. Choose the framework
  3. Use Existing template / Edit saved design / Create New Design,
  4. Edit the content / properties of the elements / components
  5. Preview / Save / Download.

WCB Builder currently supported the List of web component frameworks / libraries

  1. Adobe Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
  2. SAP UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
  3. Carbon Web Components - Carbon Design System variant on top of Web Components.
  4. Ionic Web Components - Using Web Components in Ionic.
  5. Crayons Web Components - Collection of web components that adheres to the Freshworks Design System.
  6. More to come...