More about WCB Builder


WCB stands for Web Components Bundle. It is a type of digital package that contains various assets and tools used to create custom web components in HTML, JavaScript, and CSS. WCBs were created to enable developers to quickly create the necessary components for their websites / web applications in the most efficient ways possible. In this article, we will explore what WCB Builder are and how they work.

What is WCB Builder

Web components bundle builder is a tool to generate / create web components html for different ecosystems ex: sap-ui5, adobe spectrum.

Web components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

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.

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