How I created in-memory DOM?

In this post, I will show how you can create an in-memory DOM.


Few weeks back, I had a task to create an online code editor for HTML, CSS, JS and show the output on the same screen.

Why I needed in-memory DOM?
I stored different codes in different variables and for showing the output on same screen, I had to create a virtual DOM and merge all the codes (HTML + CSS + JS) together and inject it into an iframe.


The above code takes HTML, CSS and Javascript as string and then combines them together in HTML. It returns the merged code as a string then it is injected into an iframe.

You can see the working of the above code in this app.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store