Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor


In this blog post series, I’ll show how to create a Web Component and consume it in UI5! This is based on my UI5con session of 2023 together with peter.muessig .

- Vanilla Web Component:
- UI5 Web Component:
- Generate UI5 Library & Controls for UI5 Web Components:
- Consume UI5 Controls based on UI5 Web Components inside a UI5 app (this one):

Final test in this blog post series, use the UI5 Controls based on UI5 Web Components through a UI5 library in a UI5 app.

Run the demo app

  • Clone the demo app to test the control

git clone

  • Navigate to the project

cd ui5-space-webcomponent-app

  • Install dependencies

npm i

  • Run the app

npm start


And we have a UI5 app running that consumes UI5 Controls from a UI5 Library that uses UI5 Web Components underneath:

How it is connected:

Load the library

The library is loaded by defining this in the manifest.json as a dependency:

Use the control

The control can be used in the a view as any normal UI5 control and benefit of all the UI5 functionalities:

  • Define the namespace at the top:

  • Use the namespace with the name of the control inside the view:

Connect the library

With the new UI5 Tooling we can simply connect to the library by defining it as an npm dependency:

The full sample project is available on GitHub:


Labels in this area