Content Management Systems and Templating
In the past, I have worked with various Content Management Systems, including Drupal, which utilized the Twig templating engine to generate the HTML for web pages. Twig shares many features with HTL, the templating language used in Adobe Experience Manager (AEM). While working with Twig templates in conjunction with the Pattern Lab design system tool, I appreciated the ability to see changes, mock different authored properties, and thoroughly test templates before integrating them into the CMS. We tested component functionality, visual design, responsiveness, performance, usability, accessibility, and ADA, HIPAA, and SOC2 compliance. We knew that if the Twig template passed these tests outside of Drupal, the template would work flawlessly inside of the CMS. I longed for a similar tool I could use to test HTL templates outside of AEM.
The Perfect Tool for Testing HTL Templates
Although this package was a suitable match, I faced difficulties making it work and encountered Webpack errors. Considering the code hadn’t been updated in two years, compatibility with the latest Webpack version was a concern.
HTL Template Loader
Seeking alternatives, I discovered the NPM package “HTL Template Loader” created by Jan Nicklas, which successfully rendered a simple HTL template when I started the Webpack server.
Testing an HTL Template Outside of AEM
Once further testing has been completed, there are exciting possibilities for future development, such as creating an HTL plugin for Pattern Lab or updating the existing Storybook App to use the latest HTL Engine. The sky is the limit. Ultimately, developers need a reliable way to test HTL templates outside of AEM without requiring an AEM license.
Take a further look at this example HTL project, where you can choose code and download zip.