Skip to Content
Technical Articles
Author's profile photo Wouter Lemaire

UI5con 2023 – Consume UI5 Controls based on UI5 Web Components inside a UI5 app


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:



Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.