Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

[AEM Gems Webinar] Accelerating Experience Manager as a Cloud Service development with Rapid Development Environments
Adobe Summit 2023 | Complete list of AEM Sessions & Labs

Integrate swagger-ui in AEM6.5?


Level 5

Is there a way to integrate swagger-ui in AEM6.5? I would like to create a AEM component that would read the YAML file and nicely present it using the swagger-ui.

0 Replies


Community Advisor

Technically it would be possible.

But make sure you take care of Authoring experience as well.


Level 5


I created a swagger component in AEM and added a new static clientlib for swagger-ui.


<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="" xmlns:jcr=""
The YAML files for the swagger component is in the AEM DAM in the folder /content/dam/yaml-files.
I am not sure how to access these YAML assets in the template. 
When I do it like this I get the correct url in the template 
{url: '/content/dam/yaml-files/account-information-service-api-v2-of-fi.yaml', name: 'account-information-service-api-v2-of-fi'},
but AEM of course does not interprete is as an Asset ie. yaml file.
<sly data-sly-use.model="xxx.component.content.SwaggerModel"
<sly data-sly-call="${clientlib.all @ categories='xxxi.swagger-ui'}"/>

<sly data-sly-call="${template.placeholder @ isEmpty=!model.defined}"></sly>

<div data-sly-test="${model.defined}">
    <h1 class="t-title">
    <sly data-sly-test="${model.defined}" data-sly-call="${swaggerScript @ path=model.path}"></sly>
    <div id="swagger-ui"></div>
<template data-sly-template.swaggerScript="${ @ path}">
		window.onload = function () {
			//<editor-fold desc="Changeable Configuration Block">

			// the following lines will be replaced by docker/configurator, when it runs in a docker-container
			window.ui = SwaggerUIBundle({
				urls: [
					{url: '${path @ context='html'}', name: 'account-information-service-api-v2-of-fi'},
					{url: '/yaml/consent-flow-api-v2-of-fi.yaml', name: 'consent-flow-api-v2-of-fi'},
					{url: '/yaml/custody-services-api-v1-of-fi.yaml', name: 'custody-services-api-v1-of-fi'},
					{url: '/yaml/payments-submission-service-api-v2-of-fi.yaml', name: 'payments-submission-service-api-v2-of-fi'},
				url: 'http://localhost:8080/test.yaml',
				dom_id: '#swagger-ui',
				deepLinking: true,
				filter: true,
				presets: [
				plugins: [
				layout: 'StandaloneLayout'

Here is the model:
@Model(adaptables = SlingHttpServletRequest.class,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class SwaggerModel extends AbstractComponentModel {

    private String swaggerTitle;

    private String swaggerYamlPath;

    public boolean isDefined() {
        return StringUtils.isNoneBlank(swaggerYamlPath);

    public String getSwaggerYamlPath(){
        return LinkUtil.getExternalLink(resource.getResourceResolver(), swaggerYamlPath);

    public String getTitle() {
        return swaggerTitle;

    public String getPath() { return swaggerYamlPath;}