DEV Community

loading...
Cover image for How I created in-memory DOM?

How I created in-memory DOM?

Abhishek Raj
Learning something worth sharing....
・1 min read

Virtual DOM
Img Credits

Introduction

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.

Code

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.

Demo

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

Edit 1.
Changed the title from VDOM to in-memory DOM, as I mistook it for a VDOM.
Thanks @lukeshiru for the suggestion.

Img Credits

  1. Crello
  2. Morioh

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU • Edited

A Virtual DOM is a lightweight representation of the DOM, not an actual DOM in memory. This isn't a Virtual DOM. Also, you can simplify the implementation drastically by just using a template element with some slots for your html, css and JS. Ideally you should render the output of that template in an iframe without any access to the parent, to make it safer.

Edit: I went into the editor and quickly found the security concerns I had were founded. If you select Javascript and then write something like this:

while (1) {}
Enter fullscreen mode Exit fullscreen mode

The app freezes completely. Adding to that, because the code is saved to localStorage, then I can't use the app again until I clear that, because every time I open the URL the code runs again and blocks the main thread.

I shouldn't be able to access globalThis from the generated code, because you can even do stuff like this:

localStorage.clear();
Enter fullscreen mode Exit fullscreen mode

And basically loose all your progress.

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Thanks for pointing out the bug. Will sort it out soon.

Collapse
abhishekraj272 profile image
Abhishek Raj Author

Please do read this article.
reactkungfu.com/2015/10/the-differ...

Collapse
lukeshiru profile image
LUKESHIRU • Edited

I already know the difference between a DOM and a virtual DOM. This is not a VDOM:

const create = tag => props => Object.assign(document.createElement(tag, props));
const createDiv = create("div");

createDiv({ textContent: "Nope" }).outerHTML; // <div>Nope</div>
Enter fullscreen mode Exit fullscreen mode

Is just DOM in memory. The idea with a VDOM is that it is a lightweight representation of the DOM, not the DOM itself. So the example above should look more like this:

const create = tag => props => { tag, props };
const createDiv = create("div");

createDiv({ textContent: "Yup" }); // { tag: "div", props: { textContent: "Yup" } }
Enter fullscreen mode Exit fullscreen mode

I know putting "Virtual DOM" in the title makes the article more attractive, but this isn't a VDOM implementation.

Thread Thread
abhishekraj272 profile image
Abhishek Raj Author

Got it, will change the title.
Thanks for sharing.