Efficient drag and drop website builder!

i’m trying to make a drag and drop website builder but I’m unable to come up with an efficient way to generate the HTML code. any suggestions?

server-side: express.js (node 10.x)

Do you have any ideas to start out with? Maybe we can take something that works inefficiently and come up with ways to improve it.

As of now, I thought of making an npm package with different functions for generating button, card, etc. Each function would take in the necessary parameters including basic styling requirements and then generate HTML code for it.
I thought I could have an initiator function where I write the <html> <head> and <body> (opening only) tags to a file. And with each added function I append the code to that file.

A slightly more detailed example:

  • Initiate file: Add <html and <head> tag elements (as of now, I am not giving the user to add custom meta descriptions) to a file.
  • User adds a blue coloured button: Append the code to the body tag of the file.
  • User wants a copy of the file: Close the tags and format the code using another npm package (toris-format). Send the file to the client to download.

Any help is appreciated! Thanks :coffee:

That already sounds pretty efficient. React supposedly builds up its virtual DOM in a way very much like that. And then you’re serializing it to a file a single time, as opposed to doing some kind of diffing and syncing with the real DOM, which should be plenty efficient.

fair enough, thank you!