Skip to main content

For Developers

Learn how to implement the UI Framework in your product, use the Design System documentation, and contribute your own code.

What is the SAP Engagement Cloud Design System?​

The SAP Engagement Cloud Design System is a collection of tools and resources that helps product teams create high-quality UI for the SAP Engagement Cloud Platform. It consists of the UI Framework, code examples, documentation, guidelines, and tools for designers.

Benefits​

  • Save time on implementation: our UI Framework comes with ready-made components (CSS classes and Web Components), so product teams don't have to build from scratch.
  • Save time on maintenance: using Design System components makes it possible to push bug fixes and enhancements to the implemented UI automatically.
  • Framework-agnostic: the UI Framework uses standard CSS, JavaScript, and Web Component technologies — compatible with Vue, Angular, React, or plain HTML.

Using the UI Framework​

Include the UI Framework CSS and JavaScript files in your page to start using all Design System components and utilities right away.

Installation​

Add the following to your HTML <head>:

<link rel="stylesheet" href="https://client-version.cf.emarsys.net/ui/latest/css/app.css">

And before the closing </body> tag:

<script src="https://client-version.cf.emarsys.net/ui/latest/js/app.js"></script>

Note: allow unsafe-inline in the style-src Content Security Policy (CSP) header for the UI Framework to work as intended.

Staging builds​

For development and testing environments, use the staging versions which include the latest commits before they reach production:

<link rel="stylesheet" href="https://client-version-staging.cf.emarsys.com/ui/latest/css/app.css">
<script src="https://client-version-staging.cf.emarsys.com/ui/latest/js/app.js"></script>

Working with Components​

The UI Framework comes with a wide range of ready-made components. Some are simple CSS components (e.g. <div class="e-box">), others are Web Components (e.g. <e-notification>). Browse the Components section for live examples and API documentation.

AI Skills​

Enhance your AI tools such as Claude Code or GitHub Copilot with Design System superpowers. Our UI Framework skill helps developers build faster by guiding implementation with Design System patterns, recommending the right components, and reducing trial-and-error when composing layouts.

GitHub repo: ui-framework-skills

Contributing​

If you want to change, enhance, or fix a component, please get in touch with the Design System team. Read more in the Contribution documentation on GitHub.