How to publish a spreadsheet on a website

And now something really cool: meet our upcoming sheet widget. This widget automatically turns a Google Spreadsheet into a dynamic HTML component. The way it works is pretty simple: you build a Google Spreadsheet with data, formulas, and formatting, then click on a menu item to generate one line of HTML. Then, you stick that one liner onto any web page, and an interactive copy of your spreadsheet is automatically added.

For example, here is what the original spreadsheet looks like:

And here is the resulting HTML page:

For a live example, go to our prize calculator at poetry.io.

The benefit of this approach compared to just publishing an entire sheet is that only certain cells are editable (in the example above, the Top Prize Amount), and the resulting HTML can be styled any way you want (here we’re using Twitter Bootstrap).

The way it’s implemented is pretty straightforward: when you want to turn your sheet into a widget, a bit of Google Apps Script code parses the sheet, looking for editable cells and for formula cells. Then, it generates a chunk of AngularJS code that is stored on a publicly-available file in Google Drive. It also generates one line of HTML that will fetch the content of this file whenever the page where it’s included is loaded by a client.

Of course, the approach has a few limitations. For example, not all Google spreadsheets functions are supported at this point, and some might not be implementable at all. But for most of them, we should be able to create JavaScript equivalents fairly easily.

This feature is still being developed at STOIC Labs, which is a secret laboratory staffed by François and myself. We’ll upgrade it to a real feature if we get the green light from the guys upstairs. Otherwise, we’ll put it up for bidding on Kickstarter after we ship our 1.0 release.