Web Components UI Builder Tool

Please checkout the Web Components UI builder tool in https://diybuilder.in

WCB
Recently we developed WCB tool, WCB stands for Web Components Builder. 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

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.

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.

Freshwork Crayons Web Components

• Collection of web components that adheres to the Freshworks Design System.

Please checkout the Web Components builder in https://diybuilder.in

Sample carbon design system ticket form created using WCB Builder Editor

Sample adobe spectrum web components registration form created using WCB Builder Editor

Please checkout the Web Components builder in https://diybuilder.in