[Question] Save configuration of dynamic blocks into HTML? (Countdown, Slider)

I am trying to save the template data into the database. Currently I have it working successfully. It posts the Assets, Components, Styles, Html, and CSS data (just like how it saves into the browser's localStorage) to a PHP script.

As I found out, the Components part ( editor.getComponents() ) contains the Html structure with all data of dynamic elements which are not static on the page (like Countdown or Slider), so it is reliable for storing the complete template with all dynamic elements. The Html part ( editor.getHtml() ) can only save the static part of the page, it leaves out these dynamic elements.

My problem is that I need a way to store the configuration and initialization code of these dynamic elements (Countdown, Slider) in the Html only. The reason is that after I save all five elements of data (assets, components, styles, html, css) into database, there will be parts of our webpage where I will need to load the HTML and CSS data into an HTML element without relying on GrapesJS (because the template will be shown to end users). The HTML/CSS parts contain the static information, but as of my current knowledge, GrapesJS would need to be initialized to load the Components part.

So maybe one solution would be to load GrapesJS editor and set it up to load the Components part from database and only show the end result (like the preview button) without the ability to edit. But that is not a clean solution, and I would rather avoid initializing GrapesJS just to show the end user the template. I need a better way to do this. Thank you.

Screenshots for explanation: Loading Components and Styles from database to editor: After this, the Countdown counts down as it should, and the Slider's arrows work as expected.

Loading HTML and CSS from database to editor: After this, the Countdown numbers are not showing and the Slider's arrows do not do anything.

I hope you understand the question.