[HN Gopher] Show HN: SheetUI - Turn Google Sheets into Web Pages
___________________________________________________________________
Show HN: SheetUI - Turn Google Sheets into Web Pages
Author : tjchear
Score : 286 points
Date : 2020-07-07 16:30 UTC (6 hours ago)
(HTM) web link (sheetui.com)
(TXT) w3m dump (sheetui.com)
| dvt wrote:
| This is great, congrats on the launch! I've noticed a lot of
| products recently that attempt to solve this.
| tjchear wrote:
| Got any examples of such products? I'd love to learn from them,
| and hopefully find my own niche :)
| dvt wrote:
| 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=19902856
|
| - https://news.ycombinator.com/item?id=21004039
| tjchear wrote:
| 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.
| paul_milovanov wrote:
| Well, sheeeet.
|
| (might want to rethink naming)
| tjchear wrote:
| It's definitely crossed my mind (and others as well). But as
| long as it conveys the idea, I'm fine with it :)
| rnotaro wrote:
| Anyone have a end-result demo page that I can look at?
|
| I would like to see what it looks like.
| tjchear wrote:
| 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...
|
| Pokemons: https://sheetui.com/view/responsive-grid/media-
| card-2/1F92PX...
|
| Team roster: https://sheetui.com/view/responsive-grid/media-
| card-2/1F92PX...
| CitrusFruits wrote:
| 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 wrote:
| Ooh, yes. I can see how this could be something that is sorely
| needed. Added to my list of feature exploration!
| rcshubhadeep wrote:
| really cool. Love the idea.
| [deleted]
| julienb_sea wrote:
| 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 wrote:
| That is the perfect use case! Sheets already got a lot of
| features baked into it, no point re-inventing.
| hogFeast wrote:
| Does this only work with public sheets?
| tjchear wrote:
| For now, yes. I'm hard at work building Google Sheets API
| integration so you won't have to make your sheet public.
| hogFeast wrote:
| But presumably, that is going to cost you $15k or whatever it
| is now to be an approved user of Google API?
| tjchear wrote:
| 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 wrote:
| 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 wrote:
| 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
| hogFeast wrote:
| 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.
| detaro wrote:
| You might be mixing up access to _GMail_ APIs with
| general access to Google APIs? Reading people 's emails
| comes with tons of red tape, other things not so much.
| hogFeast wrote:
| I am not -
| https://support.google.com/cloud/answer/9110914?hl=en -
| after Facebook, everyone is tightening up these
| permissions.
| detaro wrote:
| Okay, it's wider than just GMail, I had missed the
| addition of Drive, but according to that link an audit is
| just required for
|
| > _Drive - Any Drive API scope that permits an
| application to read, modify, or manage the content or
| metadata of a user's Drive files, without the user
| individually granting file-by-file access._
|
| I could be wrong, but to me this suggests you can use the
| Sheets API against _a user-specified document_ without
| it. It has it 's own namespace of scopes that's not under
| _drive.X_
| [deleted]
| davide_v wrote:
| If I update the sheet, the website updates too?
| tjchear wrote:
| The sheet is retrieved client-side, so yes, you should see the
| new updates when you refresh the webpage.
| vosper wrote:
| You've done a wonderful job with explaining what it does, how,
| and why, all on the landing page.
| tjchear wrote:
| Thank you! I was never good at doing landing pages so this
| comment means a lot to me.
| travbrack wrote:
| 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 wrote:
| This is the sort of thing that makes perfect sense in
| retrospect but I never thought about. Thanks for the tip!
| notJim wrote:
| How does this compare to sheet 2 site? Just wondering.
| tjchear wrote:
| Commented here: https://news.ycombinator.com/item?id=23761645
| three_seagrass wrote:
| Ha, does this qualify as a headless cms?
| tjchear wrote:
| 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.
| adamfeldman wrote:
| 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...
| tjchear wrote:
| I can see a need for this. I'll look into it!
| zenojevski wrote:
| Not quite the same, but...
|
| Turn your Google Sheets into a beautiful Gopherhole :)
|
| https://github.com/zenoamaro/gophersheet
|
| A much closer transformation.
| tjchear wrote:
| Ooh. Can you explain what a Gopherhole is?
| 867-5309 wrote:
| > Ooh
|
| matron
| czzarr wrote:
| So why not use Awesome Table? one of the very top G Suite
| Marketplace apps:
| https://gsuite.google.com/marketplace/app/awesome_table/5608...
| tjchear wrote:
| Never heard of it, but it looks really well done! It also
| mirrors Google Sheet's UI closely for easier onboarding. I
| guess at this point you can say SheetUI is a pale copy of it
| and I'd have nothing to counter. That said, their margin is my
| opportunity, and I can definitely find opportunities amongst
| users whom AwesomeTable has not fully satisfied. Thanks for
| bringing this to my attention - I'll learn from them and
| improve my craft.
| alpb wrote:
| I also recently built a URL shortener on top of Sheets API
| (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 wrote:
| 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.
| anderspitman wrote:
| 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.
| vertex-four wrote:
| Hahaha oh wow, I had a design document for this last year, down
| to the details. OAuth2 doesn't quite fit the bill without a
| little modification, unfortunately.
| anderspitman wrote:
| Would love to discuss it. I think this could be a solid
| business. I have little interest in building it myself, but
| may have to in order to make my other projects easier to
| self-host. I keep bringing it up hoping to find out it
| already exists.
|
| What issues did you run into with OAuth2? Are you open to
| sharing your design doc?
| swyx wrote:
| same, i think this is a great idea and dont want to build
| it myself. hope you guys figure it out!
| vertex-four wrote:
| If you want to contact me, I'm shell@alterednarrative.net
| on email and XMPP. I'll try and find whether I still have
| the design notes, but doubt it; I've been through a couple
| of laptops since and lost a lot.
|
| One of my goals was that the flow could start from a
| service provider - you type in the domain name you want the
| service to be bound to on the service provider's website,
| and it goes from there. If you were to use OAuth2 at this
| point, there's no existing client ID/password, and allowing
| public dynamic client registration leads to DoS potential
| as someone could easily register a practically infinite
| amount of clients and fill up disk space. So you want a
| custom flow which winds up, at the end, with the consent of
| the domain owner, returning OAuth2 credentials to the
| service provider. This flow is fairly complex to spec out
| in a way that doesn't have subtle security issues (e.g.
| this initial flow can't trust much info from the service
| provider which could be something akin to a phishing scam,
| returning to the service provider on error has to be done
| carefully because of risk of being used in an open redirect
| chain, etc).
|
| After that it's mostly a case of supplying auth keys for
| RFC2136 so the service can manage its delegated domain,
| handling credential rotation, and properly handling edge
| cases like either the service provider or the domain
| management system losing track of state, or the domain
| being lost/transferred to another entity.
|
| Honestly I'd like to build something like this for my own
| projects, and might do so as a weekend project soon, esp
| since it's just been validated as something useful. :D
| anderspitman wrote:
| I'll shoot you an email, and we can talk more if you do
| end up working on this.
|
| I'm not a big fan of pre-registered clients in the first
| place. Ideally any client should be able to talk to any
| OAuth2 server that speaks the same profile, ie endpoints
| and scopes. Aaron Parecki describes a way to allow
| "anonymous" clients here[0]. As I understand that's how
| IndieAuth is implemented. But I'm still relatively new to
| OAuth, and I don't doubt there could be subtle security
| issues. Do you have any thoughts on that?
|
| [0]: https://aaronparecki.com/2018/07/07/7/oauth-for-the-
| open-web
| tjchear wrote:
| 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?
| hanniabu wrote:
| Personally I would love the ability to show data on my
| website using a Google sheet where others less technical can
| contribute to (open source projects) as opposed to editing
| json files. It would only make sense for me to do it if it's
| still hosted under my domain though.
| anderspitman wrote:
| 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.
| kpennell wrote:
| How to use google sheets + react together:
| https://www.developintelligence.com/blog/2018/08/the-simple-...
| akdarrah wrote:
| 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/
|
| Let me know if you're interested. Otherwise, best of luck with
| your product!
| tjchear wrote:
| 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 wrote:
| 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 wrote:
| Got it akdarrah! Thanks for letting me know about Liquid
| and your wonderful product!
| kovek wrote:
| Is there a tool that does the reverse? It would also be very
| interesting. Turn any webpage into a spreadsheet.
| jeffbee wrote:
| 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.
| tjchear wrote:
| There was one other comment that mentioned the same thing. I'll
| look into this. How can I chat with you further about this? My
| email's tjchear at gmail if you want to reach out.
| londons_explore wrote:
| 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 wrote:
| 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 wrote:
| 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.
| tjchear wrote:
| What you just described is essentially a scraper/crawler right?
| Would scraping them into a sheet you own be sufficient for your
| use case?
| londons_explore wrote:
| Yes, but currently the process of writing a scraper for a
| given page is usually half an hour with beautiful soup... Or
| more if you have to handle multiple pages, Auth cookies that
| expire, and rate limits.
|
| Example usecase:. eBay search results, I want to sort by
| "Price plus $0.50 per mile from me", since I'm going to have
| to drive my van to pick up the item.
|
| That would be super easy with a spreadsheet of the search
| results, and I could probably have the data sorted in under
| 60 seconds on a column of "=B5+C5*0.5"
| tjchear wrote:
| It's the complete opposite of what SheetUI hopes to
| achieve, but this is such an interesting use case I'll
| think more about it :) I can see how there might be a
| legitimately strong demand for it. Feel free to connect
| with me (tjchear on twitter/linkedin/gmail) to discuss this
| further.
| abhisheksamanta wrote:
| This is awesome. Congratulations, and best of luck. I played
| around with the product little bit and it looks really nice.
| tjchear wrote:
| Thank you! I hope all is well with you and your project!
| tjchear wrote:
| 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 wrote:
| thanks - emailing you about my project!
| Giorgi wrote:
| Might I ask what soft was used to record demo?
| tjchear wrote:
| 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.
| fortylove wrote:
| 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 wrote:
| 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!
| tjchear wrote:
| 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!
| johnx123-up wrote:
| Any comparison with Glide?
| tjchear wrote:
| Ah yes. SheetUI turns a spreadsheet into a simple but
| pleasing web page, while Glide turns them into an app. That
| said, adding interactivity, crud capabilities, and just
| generally making a web app out of it is definitely part of my
| feature roadmap.
| dmlittle wrote:
| Not sure if you've heard of Sheet2Site[1] which I believe
| is a direct competitor.
|
| [1] https://sheet2site.com/
| tjchear wrote:
| Yeah definitely! They generate an entire site complete
| with beautiful template and search functionalities.
| Really amazing work. My niche is smaller in comparison -
| SheetUI generates a single webpage for each sheet. That
| said, generating a complete website/webapp is definitely
| part of my feature roadmap.
| platetone wrote:
| very nice... curious if you could embed it easily into another
| site or even wordpress page? I have had an HOA membership page
| that is backed by a Google Spreadsheet with some crap Sheets
| plugin that's always having trouble.
| tjchear wrote:
| That is definitely possible. I can make some changes to
| generate an iframe embed code. Email or DM me on Twitter
| (@tjchear) if you want something customized :)
| eyelidlessness wrote:
| This looks really cool. I have a potential use case I'd
| consider using this for, but I don't want to make the sheet (or
| resulting page) public. Have you considered support for OAuth
| to retrieve private sheets?
| czzarr wrote:
| Try Awesome Table, it's been here for years for exactly that
| purpose and is one of the very top G Suite Marketplace apps:
| https://gsuite.google.com/marketplace/app/awesome_table/5608.
| ..
| tjchear wrote:
| Yes, definitely. I'm hard at work building Google Sheets API
| integration, so you wouldn't have to make your sheet public.
| DM me (@tjchear on Twitter) or email me to discuss your use
| case.
| franciscop wrote:
| This looks great! I made a while back a library[1] to do this,
| but of course you still have to code on top of it (which is
| what I wanted). Your project makes it very easy for everyone to
| get started and not only those who know how to code, props on
| launching it.
|
| Are you using Node.js? Would love some feedback on my lib since
| it seems we are doing the same thing for different user types!
|
| [1] https://github.com/franciscop/drive-db
| joelrunyon wrote:
| Do you have demos of current sites using this?
| vijaybritto wrote:
| Massive kudos to the effort. The Gsheets API is notoriously
| hard to understand and work with. I see that you have put it to
| good use! Great work!
| tjchear wrote:
| Thank you! I have yet to use the Cloud GSheets API; there's a
| much simpler approach, but it requires the user to publish
| their sheet on the web. I'm definitely working on GSheets API
| integration so users would not have to publish their sheet
| though.
| wiremine wrote:
| Great idea! The video on the homepage is very useful; have you
| thought about linking to some examples?
| tjchear wrote:
| Oh this is a good idea! Let me do that.
| [deleted]
| tjchear wrote:
| I added one so far (Product Catalog), you can click on it in
| the use case section. More to come :)
| wiremine wrote:
| Nice! I would recommend making the link clearer: unless I
| knew it was there, I would have missed it.
| tjchear wrote:
| Got it! I bolded the text. Also added one for Article
| Curation. Thank you for your advice and suggestion!
| gabagool wrote:
| I missed it even after your changes until I read this
| thread. Maybe modifying the CSS is too much of an ask,
| but I personally think the link color should be a bit
| differentiated, the link should be underlined, or the
| link should be moved since I didn't expect a link there.
| bawana wrote:
| I guess I could put blog entries into a google sheet and publish
| them with this.
| tjchear wrote:
| 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.
| greatNespresso wrote:
| Love the execution of your idea. Having played with google sheet
| too (using it as my storage for 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 wrote:
| 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.
| [deleted]
| uptown wrote:
| 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 wrote:
| That's a good point. I should cache the generated sites or the
| sheet's data in case the sheet server goes down.
| alin23 wrote:
| 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
| tjchear wrote:
| 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 wrote:
| 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!
___________________________________________________________________
(page generated 2020-07-07 23:00 UTC)