
Show HN: SheetUI – Turn Google Sheets into Web Pages - tjchear
https://sheetui.com
======
tjchear
So from talking to people I see a need to quickly turn a spreadsheet of
information into something visually pleasing. SheetUI is my response to that
need. You give it a Google Sheet URL, pick a template, and tap in the columns
where you want them to show up. In return you get a visually pleasing and
responsive web page that you can embed on your site, or link to in your
newsletter or chat with a client.

Created with React and Material-UI, plus some spreadsheet fetching and parsing
code.

Glad to answer any questions!

~~~
andrei_says_
Why is React needed to display static HTML?

~~~
mikeryan
It's not?

But that being said I'm not sure this is static HTML either. You're going to
need someway to parse and display that sheet data. Even if its server rendered
as static HTML React isn't a bad way to go.

------
anderspitman
Services like this need an easy way to allow people to use their own domain
names, and we need to lower the barrier of entry to individuals registering
domains and setting up HTTPS.

Imagine a SaaS that sells domains, then provides and easy (and open) API for
delegating control over subdomains using OAuth2.

So I sign up for sheetui, and during the registration process they redirect me
to a namecheap.com (where anderspitman.net is registered) OAuth2 server, I
grant them control over sheetui.anderspitman.net, and they can now host there
on my behalf.

sheetui.com also shouldn't have to deal with TLS certs. Why doesn't
namecheap.com handle that for me?

HTTP requests can be proxied through something like ngrok which again uses
OAuth2 tokens for auth. Now we have a stack where people can securely host
websites from there phone.

~~~
tjchear
This is an interesting use case (the delegation of subdomain). Sounds like
something that can be built atop Amazon Route 53. Have you seen this need come
up a lot?

~~~
anderspitman
I think it would be helpful for decentralizing things, ie less necessary for
the web we have than the web I want.

For example I'm working on a project right now that's ideal for self-hosting,
but I really want to encourage people to use their own domain names, and
registering them and handling HTTPS is a rather large barrier.

------
akdarrah
This looks really cool! I love your quick video that shows how to use the
product and build a great looking UI so quickly.

I'm guessing you guys use Liquid based on the curly braces? It looks like you
have a pretty nice UI for manipulating the dynamic data, but if you're
interested, my product helps people write Liquid:
[https://www.dropkiq.com/](https://www.dropkiq.com/)

Let me know if you're interested. Otherwise, best of luck with your product!

~~~
tjchear
I implemented the parsing part! This is the first I've heard of Liquid though.
When SheetUI has gained sufficient traction that people need advanced Liquid
support, I'll look to your product for that :) There is no price quoted on
your page though; do you mind telling us here a ballpark figure?

~~~
akdarrah
Awesome! Yea, Liquid is a pretty robust language built by Shopify that is
implemented in most languages to help with this exact problem. It might come
in handy some day as you scale your app. :)

For Dropkiq, your app looks simple enough (for the Liquid part) that you could
likely use our free version. For apps that have complex Liquid, we have our
Pro version, which I'm currently offering beta pricing at around 1K per year.

Keep us in mind as you grow! :D

~~~
tjchear
Got it akdarrah! Thanks for letting me know about Liquid and your wonderful
product!

------
vosper
You've done a wonderful job with explaining what it does, how, and why, all on
the landing page.

~~~
travbrack
The demo video is great. The only thing that could make it better is if you
put the finished product in the beginning, then show how it's done.

~~~
tjchear
This is the sort of thing that makes perfect sense in retrospect but I never
thought about. Thanks for the tip!

------
alpb
I also recently built a URL shortener on top of Sheets API
([https://github.com/ahmetb/sheets-url-
shortener](https://github.com/ahmetb/sheets-url-shortener)) and I don't have
to worry about setting up a database or other form of storage. All I needed to
do was set up credentials, and it's good to go.

A lot of folks don't realize Google Sheets is like a free small database with
a decent API. :)

~~~
tjchear
Precisely! A lot of folks have already built their businesses and processes
atop Google Sheets, so it seems a no-brainer to me that any SaaS dealing with
data should have a way to bootstrap from that.

------
alin23
Great idea and execution! I've been using Liftoff[1] with Airtable as a DIY
solution for this and while it's been easy to set it up and deploy it on
Netlify, I still had to resort to writing a custom watch for changes daemon
and forking the repo for adjusting the components layout.

I like that SheetUI has the things above built-in and more functionalities
like adding buttons and a customisation UI.

Is a custom-CSS feature going to be available anytime soon? It would be great
to be able to add some original styling to a website.

[1]
[https://github.com/postlight/liftoff](https://github.com/postlight/liftoff)

~~~
tjchear
SheetUI is built using Material UI, which I'm still getting the hang of. It
certainly has support for parameterized themes. As for custom CSS, I'm going
to have to look into how to do that technically while making sure there's no
security implications.

Thanks for showing me Liftoff! The generated websites look great. I'll see
what I can learn from it.

~~~
alin23
I think just allowing a CSS textarea input that can be injected inside a
<style> HTML tag is enough. If the input is HTML escaped (replace <, > and
other dangerous characters) then nothing should escape out of that tag.

Thank you for considering this!

------
julienb_sea
In college I would make primitive webpages for my college newspaper to use for
live feeds and such content publishing. I built something like this (although
vastly less polished) - the writers could just fill in details in a sheet &
add image URLs, and my static page could retrieve the spreadsheet contents via
API and essentially have a super cheap data backend with a super fancy
collaborative editor. Fun times.

~~~
tjchear
That is the perfect use case! Sheets already got a lot of features baked into
it, no point re-inventing.

------
uptown
I used to drive a restaurant website's menu using a shared Google sheet. It
was an easy way for multiple people to have access to update the content. I'd
cached the recent versions in-case anyone made a breaking formatting change or
Google was unavailable. Worked very well for our use-case.

~~~
tjchear
That's a good point. I should cache the generated sites or the sheet's data in
case the sheet server goes down.

------
bawana
I guess I could put blog entries into a google sheet and publish them with
this.

~~~
tjchear
Yes, that is a great use case! Let me know how it works for you. Feel free to
reach out to me at tjchear over twitter/linkedin/gmail.

------
abhayhegde
Wonderful product! I was looking to build a page on a team that I am working
with, but wanted a simple integration like this. Kudos!

I would like to know if you are going to add more features later. For example,
informal 'About us' pages would have links to social media in their bios. So
can we have more than primary and secondary buttons?

Also, it would be lovely to have profile photo frame customizable. It looks
stylish to have the photo embedded in a circular frame for example.

~~~
tjchear
Hi abhayhegde, I just added more social media icon links to all of the UI
components, so you can add links to social media.

Circular frame coming soon!

~~~
abhayhegde
Thanks much! I just checked this out, it looks amazing and simple.

------
edusig
I think the greatest challenge will be creating enough elements/visualizations
and customization to please most customers.

Our team at Sheet.Best ([https://sheet.best](https://sheet.best)) was just
talking about reducing the entry barrier for our services and one of the ideas
was something like this.

Nice to see more competition on the "no code" approach to use spreadsheets as
databases :).

------
fortylove
Very cool! I can see this being especially useful for communicating status of
some process status, like for example, # of tests run today, outcome, etc.

~~~
tjchear
I never thought about this use case! I'll note this down and include it as
part of the use case section :) Thanks for the idea!

------
fermienrico
Crazy I know: why not just link them to the sheet? If the goal is for one
person to convey information to another, why do we need to “decorate” it?

I kind of like some of the Brutalism takes on web design. Just throw away all
decoration and live with the ugly world, “ugly” being subjective. I think
excel sheets are actually quite beautiful.

Challenge the status quo :-) at the expense of coolness, dignity and comfort.

~~~
priomsrb
Ugliness aside, there are some things that don't work very well in a plain
spreadsheet vs a UI. For example large paragraphs and images.

Part of conveying information should be about making the information easy to
digest. Sometimes a spreadsheet fits that bill. Other times a crafted UI works
better.

~~~
fermienrico
It does if you create large cells and stick paragraphs in. Make sure the width
of the cell is enough for 12-15 words. Images also work just fine. It truly
boils down to "uglyness" and not functionality. "Easy to digest" is a
subjective term.

Excel sheets are essentially rectangular grid with borders. Grids have been
used since the 60's in graphic design, primarily championed by the Swiss Grid
System (Josef-muller brockmann, et. al).

So if you say that excel sheets are not a good instrument to convey
information, you're saying that a grid like structure is not good at laying
out information in a logical, understandable fashion. Which is provably false
- everything from Tax forms to road signs, every bit of graphic design
professionally conducted uses the grid system.

Think a bit deeper than just aesthetics and ask yourself, what _exactly_ is an
excel sheet? It is a bunch of boxes. Whether those are div elements or excel
cells, what's the difference? Padding and margins?

~~~
tjchear
I agree with this to some extent. The aesthetics, even if it does almost
nothing for functionality, unfortunately does influence people's impression
and opinion, and ultimately, their decision to open their wallet. When the
SaaS world is filled with players who each bring something to the table,
aesthetics sometimes becomes a tie-breaker, so to speak.

------
adamfeldman
It'd be interesting to use this alongside the Google Sheets connector [1] for
BigQuery

[1]: [https://cloud.google.com/blog/products/g-suite/connecting-
bi...](https://cloud.google.com/blog/products/g-suite/connecting-bigquery-and-
google-sheets-to-help-with-hefty-data-analysis)

~~~
tjchear
I can see a need for this. I'll look into it!

------
Giorgi
Might I ask what soft was used to record demo?

~~~
tjchear
It's a Chrome extension called Screen Recorder. Very nifty! I've used it for
my other projects and I'm happy with it. Only downside is it generates webm
only - I had to put it through an encoder.

------
abhisheksamanta
This is awesome. Congratulations, and best of luck. I played around with the
product little bit and it looks really nice.

~~~
tjchear
Thank you! I hope all is well with you and your project!

------
tjchear
FYI to folks who are trying it out now - on step 3, you'll have to click on an
element on the preview UI so you could customize it. You can customize it to
show a particular column by clicking the + button. Without customization, the
resulting page will not show anything.

I'll fix this in the next iteration by providing defaults.

~~~
Shermanium
thanks - emailing you about my project!

------
greatNespresso
Love the execution of your idea. Having played with google sheet too (using it
as my storage for [https://nooze.world](https://nooze.world) actually) and
having followed sheet2site story, I am left wondering if there is still money
to make for services like this in 2020.

~~~
tjchear
There is always room for improvement! For now, SheetUI doesn't do the same
thing as Sheet2Site (they generate an entire website, whereas SheetUI
generates only single web page per sheet).

Considering how many people across so many industries use Google Sheets as
part of their processes, I'm convinced there is some money to be made.

------
kpennell
How to use google sheets + react together:
[https://www.developintelligence.com/blog/2018/08/the-
simple-...](https://www.developintelligence.com/blog/2018/08/the-simple-stack-
a-primer-on-using-react-google-sheets-api/)

------
dvt
This is great, congrats on the launch! I've noticed a lot of products recently
that attempt to solve this.

~~~
tjchear
Got any examples of such products? I'd love to learn from them, and hopefully
find my own niche :)

~~~
dvt
Just a few that came up on my Google search (basically, most are turning
various sheets into something else!):

\-
[https://news.ycombinator.com/item?id=16636935](https://news.ycombinator.com/item?id=16636935)

\-
[https://news.ycombinator.com/item?id=16636935](https://news.ycombinator.com/item?id=16636935)

\-
[https://news.ycombinator.com/item?id=19902856](https://news.ycombinator.com/item?id=19902856)

\-
[https://news.ycombinator.com/item?id=21004039](https://news.ycombinator.com/item?id=21004039)

~~~
tjchear
Thanks! These products are great (I can see myself using a couple of them). I
think when we look across all industries that use spreadsheets, we'll find a
market that's so big that any player can find their own profitable niche. I
hope to find mine.

------
czzarr
So why not use Awesome Table? one of the very top G Suite Marketplace apps:
[https://gsuite.google.com/marketplace/app/awesome_table/5608...](https://gsuite.google.com/marketplace/app/awesome_table/56088344336)

~~~
achow
Copy/Pasting my reply to the exact same comment posted elsewhere.

\------------------------------------------------------

From reviews:

"..you have to pay £5,400 per year!"

"Even with the nonprofit pricing it would cost $900 per year."

"Pricing for singe user with one "app" is $60 per month. The "free" version
only allows 100 "views" per month. Everytime you go to the page with the app
and interface with the tools it counts as a "view". Everytime you refresh the
page it is another "view"."

\------------------------------------------------------

------
londons_explore
This product is great... But it makes me feel sad to think about all the
webpages that hide a small amount of tabular data in an oversized web UI.

I want the reverse of this service - I just want the raw data from any web
page in a spreadsheet ready to filter and sort and define new columns as I
please...

~~~
contravariant
This is one of the reasons I really like that some webpages have taken to
using JSON REST endpoints to provide the data for their (usually React-based)
webpage. It makes it fantastically easy to circumvent all the complicated
stuff and just directly access the data.

It's somewhat of a shame that HTML never quite managed to split data from
representation. It managed to separate content and styling, but the content is
still treated as some kind of text document, not a textual representation of
some data.

~~~
tjchear
Like it or not, it's the reality we're in. It's not going away anytime soon,
but we can always achieve incremental improvements towards that ideal through
HTML standardizations. React and GraphQL (both great products from fb) really
make that possible.

------
CitrusFruits
Awesome work!

I can see another variation of this being useful as well. Instead of loading
live data all the time, it loads the data at time of publishing and creates a
static html page with an option to auto-publish to github pages or netlify or
something like that.

~~~
tjchear
Ooh, yes. I can see how this could be something that is sorely needed. Added
to my list of feature exploration!

------
zenojevski
Not quite the same, but...

Turn your Google Sheets into a beautiful Gopherhole :)

[https://github.com/zenoamaro/gophersheet](https://github.com/zenoamaro/gophersheet)

A much closer transformation.

~~~
tjchear
Ooh. Can you explain what a Gopherhole is?

~~~
TJSomething
I think a Gopherhole is to the Gopher protocol as a website is to HTTP.

------
klener
Interesting approach. You know them openasapp? They also try to sit on top of
a sheet to create apps

[https://www.openasapp.com/](https://www.openasapp.com/)

------
davide_v
If I update the sheet, the website updates too?

~~~
tjchear
The sheet is retrieved client-side, so yes, you should see the new updates
when you refresh the webpage.

------
siquick
Cool idea. What's the thinking behind the 'per day' billing? I've never seen
this before.

~~~
tjchear
Whoops. That was a mistake I made from copying that section from another
project. Corrected it to per month now.

------
kovek
Is there a tool that does the reverse? It would also be very interesting. Turn
any webpage into a spreadsheet.

~~~
jeffbee
Sheets itself does a remarkable job of pasting HTML into a sheet. I just tried
it with English Wikipedia's list of the world's largest cities and it worked
perfectly, except the column of photographs is blank instead, which is a
reasonable choice.

------
raybb
Wow this is just what I need for a little project I've been working on! Look
forward to using it :)

~~~
niutech
You can also use Sheetsu [https://sheetsu.com](https://sheetsu.com), Glide
[https://www.glideapps.com/](https://www.glideapps.com/) or Stein Expedite
[https://steinhq.com](https://steinhq.com)

------
three_seagrass
Ha, does this qualify as a headless cms?

~~~
tjchear
Far from it! The backend is provided by Google Sheets. Much of what I do with
SheetUI is to provide an easy-to-use editor and a beautiful front-end to
visualize the data coming from the sheets.

------
rnotaro
Anyone have a end-result demo page that I can look at?

I would like to see what it looks like.

~~~
tjchear
Pardon the long links, this is something I'll address in the next iteration.

Product Catalog: [https://sheetui.com/view/grid/image-tile/1F92PXwyE5CTjkT-
Sin...](https://sheetui.com/view/grid/image-tile/1F92PXwyE5CTjkT-
Sin3fZcKaZsiA_px22X7L6j_YV6I/2/render?pageTitle=Product%20Catalog&imgSrc=%7B%7BProduct%20Image%7D%7D&title=%7B%7BProduct%20Name%7D%7D&subtitle=%7B%7BPrice%7D%7D)

Pokemons: [https://sheetui.com/view/responsive-grid/media-
card-2/1F92PX...](https://sheetui.com/view/responsive-grid/media-
card-2/1F92PXwyE5CTjkT-
Sin3fZcKaZsiA_px22X7L6j_YV6I/4/render?pageTitle=Pokemon&pageDesc=Collection%20of%20pokemons%20that%20I%20own!&imgSrc=%7B%7BImage%7D%7D&title=%7B%7BName%7D%7D&subtitle=%7B%7BType%7D%7D&description=%7B%7BAbilities%7D%7D&btnPrimaryCaption=More%20Info&btnPrimaryLink=%7B%7BLink%7D%7D)

Team roster: [https://sheetui.com/view/responsive-grid/media-
card-2/1F92PX...](https://sheetui.com/view/responsive-grid/media-
card-2/1F92PXwyE5CTjkT-
Sin3fZcKaZsiA_px22X7L6j_YV6I/1/render?pageTitle=Our%20Team&pageDesc=Our%20lovely%20teammates%20from%20all%20over%20the%20country%20%E2%9D%A4%EF%B8%8F&imgSrc=%7B%7BProfile%20Image%7D%7D&title=%7B%7BFirst%20Name%7D%7D%20%7B%7BLast%20Name%7D%7D&subtitle=%7B%7BOccupation%7D%7D&description=%7B%7BDescription%7D%7D&btnPrimaryCaption=Email%20Me&btnPrimaryLink=mailto%3A%7B%7BEmail%7D%7D)

------
notJim
How does this compare to sheet 2 site? Just wondering.

~~~
tjchear
Commented here:
[https://news.ycombinator.com/item?id=23761645](https://news.ycombinator.com/item?id=23761645)

------
hogFeast
Does this only work with public sheets?

~~~
tjchear
For now, yes. I'm hard at work building Google Sheets API integration so you
won't have to make your sheet public.

~~~
hogFeast
But presumably, that is going to cost you $15k or whatever it is now to be an
approved user of Google API?

~~~
tjchear
I don't think so. I just need to procure an API key and some credentials from
Cloud Console to begin using Sheet API. The rest is just a lot more backend
development for me.

~~~
hogFeast
Right, but won't you need permissions to access data in user accounts? You can
only get permissions with a Google audit (which you have to pay for).

~~~
thesandlord
No, the easiest way is to use a service account and share the sheet with the
service account. No need for user OAuth at all.

[https://github.com/juampynr/google-spreadsheet-
reader](https://github.com/juampynr/google-spreadsheet-reader)

~~~
hogFeast
Would you build a livelihood on that? I have heard of that but it sounds like
the kind of loophole that got the industry into a situation where you needed
to pay tens of thousands to use an API.

~~~
thesandlord
> Would you build a livelihood on that?

Yes? Google is notorious for deprecating and changing things, so I would have
a backup plan but companies like Streak have built large businesses on much
more restricted APIs like Gmail.

> kind of loophole

This is not a loophole, this is 2-legged Oauth. This is much safer than the
typical 3-legged Oauth where the user gives blanket permission to read and
write from their Google Drive. The user has to explicitly share the sheet with
this service account email. Google is trying to protect people from clicking a
phishing link and getting all their email and drive content stolen or
hijacked.

Yes, Google can shut this down tomorrow or demand thousands of dollars to use
it. It's a inherent risk building on top of someone's platform, the trade off
being you get the scaffolding and user base the platform already has.

------
rcshubhadeep
really cool. Love the idea.

------
paul_milovanov
Well, sheeeet.

(might want to rethink naming)

~~~
tjchear
It's definitely crossed my mind (and others as well). But as long as it
conveys the idea, I'm fine with it :)

