Storybook API how to render HTML in my AEM component | Community
Skip to main content
kedar0910
kedar0910
Level 2
March 19, 2025
Question

Storybook API how to render HTML in my AEM component

  • March 19, 2025
  • 3 replies
  • 589 views

I am trying to build XF components guide in our AEM similar to AEM Core component Examples, but I need to render the HTML part from story book  for the same component, and show in my core component examples page. right now OOTB has Properties, Mark up and JSON tabs, i will be added one more tab which says HTML or IFRAME. and then show the html i get from storybook. so wanted to represent how this component gets rendered in real time page. 

3 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
March 20, 2025

Hi @kedar0910 

You can use clientlibs to write js to fetch, parse and show the HTML in dialog

 

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/util/htmlparser.html 

Arun Patidar
    kedar0910
    kedar0910Author
    Level 2
    March 21, 2025

    parsing HTML is the second part, how do even get the HTML from story book as my response? 

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    August 20, 2025

    @kedar0910 Just checking in, were you able to resolve your issue? We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it, Your insights could really benefit the community. Thanks again for being part of the conversation!

    Kautuk Sahni
    Vishal_Anand
    Vishal_Anand
    Level 4
    August 20, 2025

    You will not be able to fetch HTML as it is from the frontend module (Storybook) into ui.apps directly. Workaround is to fetch the generated clientlibs and parse it to generate required HTML out of it at UI level.

    Terms & ConditionsAccessibility statement

    Loading footer...