css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Working on a site for a restaurant where the owner needed a 'CMS' to edit the specials menu on a daily basis. Rather than use a bloated CMS like wordpress/drupal/joomal etc, I thought it would be slick if they could just use a simple google sheet... This allows the site to remain flat from a static site generator and is SUPER easy to edit. There are some usage restrictions from the Google Sheets API, but the cap is so high it will work just fine for a small project like a local restaurant.


  1. It's great, thanks. I never thought that something like this would be so practical. You have some document that explains the process I would like to implement this content process in the future.

  2. awesome solution.

  3. Fantastic example, I have a doubt, taking into account that access is not available to the public, how so? Creating an administrator login and own layout with a sheet editing functionality? What is your opinion?

  4. Hey @melquize, thanks for checking out my little pen. Not sure what the question is completely, but this sheet should be open to the public for editing and viewing... it also shouldn't require any google log-in. However, if you wanted to you could easily lock down a sheet or only grant certain individuals permission to access and edit while still giving public read permissions to allow your web app to properly get the data through an API call.

  5. I love this! Super cool idea...and pretty fun seeing all the other active users (there were 13 of us when I was testing this out) on the google doc. Nice work Adam.

  6. @creativeocean Thank you! It's fun to pop in there and see what tom-foolery people are up to:)

  7. This is genuinely fantastic, really great work! In the distant past, I've tried linking input from Google Forms/Sheets API into a "statically generated" site to have a live-updating online auction where I could get rid of my junk. This implementation is much smoother and even more approachable for the end user (i.e., the restaurant owner) to manage by themselves.

    Do you happen to have any other project that utilizes Sheets API in such clever ways?

  8. This is a great solution and I see how this could be used in a number of ways for people who might need a small solution for content. Great job!

  9. @rdhar Thank you for the kind words! I have not used sheets for any other projects but depending on the use case, I may use the method again!

  10. Sharing the link to edit the original spreadsheet... bold move. I like your style!

  11. @mdixondesigns I was a smidge worried at what the internets would do but this community is awesome and didn't have to moderate at all really! Thanks for checking out my work:)

  12. @quinlo Great solution for small restaurants. Gets me wondering what other kind of projects this would be ideal for.

  13. Hey @quinlo, Adam O' Ceallaigh here. Neat API request work here. I'm actually trying to implement the same functionality into my own client's website too. I have set it up exactly the same way as here and have got the api key and api request looks perfect but there must be something wrong as it's stopping my request with a 403 error which means there must be some security issue. Just wondering how did you set up the project on Google Cloud Platformn and what credentials you used because i've a feeling that's where the issue could have arisen. I would really appreciate you getting back to me as soon as possible as i'm sure you know i'm trying to get this done as quick as possible for the client. Also seperate from that entirely you have included a menu item and price and description if i was to include a path to a photo and upload the photos on to the server and then output the data variable result into the src attribute of an image that should work and would change the images too yeah ??. Thanks again for taking your time to read this, looking forward to a repsonse. Adam (@Adamoc)

  14. @Adamoc without seeing your code my guess is that you need to make your sheet at least viewable to those who have the proper link. In the sheet go to file > share and you should be able to set that. Otherwise it may be how it is configured in the google cloud console but I doubt it, as long as you get you add the sheets api to a project and grab the key it should be fine. Happy to help more if it comes to it . Let me know if sharing the sheet fixes the issue.

  15. @quinlo , Adam Here. Just a quick update I got it working now it was a http referrer issue from my configurations in the google cloud console i had set it so my live server could be the only one that can access it but i forgot this and was trying to use it from my development local server and that's why I got the 403 status code, thanks anyway for taking your time to help me appreciate it man !!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.