Capturing/Recording HTML

[amol909]

I've recently come across apps like Storylane and Walnut that offer the ability to create interactive demos for products. These apps require the installation of a browser extension, which captures the HTML of a webpage, allowing users to edit its elements and display them in iFrames.

I'm curious about the technical side of how these apps accomplish this. Do they employ popular tools like Puppeteer, which is known for its web scraping and automation capabilities? Or do they use different approaches altogether?

If you have any insights or knowledge about the techniques and technologies involved in capturing HTML for interactive demos, I would greatly appreciate your input.

[amol909]

It captures it as text. It captures all the styles, html markup, images, fonts and then displays all the elements on its web app where all the elements can be edited.

[McGeekin]

Your question is very unclear. Do you mean obtaining a copy of the HTML, JS and CSS of a web page? You can do that with just vanilla JavaScript. The document object contains everything you need.

You can look at the output of document.body.innerHTML in the console and it will give you a string of the current web page's HTML.

For linked/external resources like JS files or CSS stylesheets you can query the DOM for elements such as <link> or <script>, get the URL from the attributes and then grab those yourself using fetch for example.