How to Create an Interactive Design Tool connected with Google Sheets via Javascript/ HTML?

DigNo Ape
7 min readJan 4, 2023

One of my interior designer friends asked me how to combine a simple database or data sheet with her floor plan design so she can easily and quickly present it to her clients with both of graphic designs and furniture lists (or other structured information) in a single web page or a summary slide.

“SVG”, “JavaScript”, “iframe” and “Google Sheet” these keywords come to my mind when I start my thinking process. Anyway, let’s try to materialize it by putting these terms together!

I asked my friend for her floor plan design sample and few examples of furniture list. The good thing is that we can break the floor plan picture down into few SVG components and leverage one of the SVG beauty parts, ID assignment. As a result, we can control the on/off of presence of data sheet via JavaScript.

--

--