Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

gDoc.js v2.0.1

Use Google Spreadsheets as your CMS & to save your inputs!

Demo Page

Getting Started

Create a Google Spreadsheet containing all the information you will need for your site. After, choose 'Publish to the web...' in the 'File' menu. Then grab the id in the link.

Inside of your HTML document include these two files.

<script src="tabletop.js"></script>
<script src="gDoc.js"></script>

Or just this file

<script src="gDoc.min.js"></script>

Now at the footer of your html page initiate the connection!

By default the sheetName is 'Sheet1'

    gDoc(yourPublicId, sheetName);

Example connection

    // initiating connection
    gDoc('1cfW7dwJkwJq7rqTsftNy3wjCJR3-yDylc5MRmsc0Yw8', 'layout');

All that's left now is to add gDoc attributes to your html!

Example spreadsheet

title header subheader
My website Welcome, This is my website!

How to insert from example spreadsheet above.

        <title gDoc="title"></title>
        <script src="tabletop.js"></script>
        <script src="gDoc.js"></script>
        <h1 gDoc="header"></h1>
        <h2 gDoc="subheader"></h2>
            gDoc(yourPublicId, sheetName);

And it's that easy!

Setting Parameters

You might want to use gDoc to set link hrefs, img srcs, and set styles.

Here's a quick example of how you would make a red link

my-link my-link:href my-link:style
Example color: red
<a gDoc="my-link"></a>

Advanced Blocks (Store & Blog)

To iterate over a block of html simply just pass gDoc an object {}.

Let's say you want to export your 4 most recent blog posts

    public: yourPublicId,
    sheet: 'blog',
    gDoc: 'blog-section',
    columns: ['title', 'body', 'link'],
    loop: 4,
    html: function() {
        var html = '<a href="{{link}}">';
        html += '<h1>{{title}}</h1>';
        html += '<p>{{body}}</p>';
        html += '</a>';
        return html;

The loop key can be set to false to iterate over all items in the document. Make sure you instantiate all your variables in the 'columns' array, otherwise they won't show up in the mustache syntax.

Sending Data To Spreadsheet

The "connect" functionality uses AJAX, make sure jQuery is installed!

Create a Google Form by visiting and then press share to get the id.

Create a blank form that will hold your inputs.

<form id="example-form"></form>

In the footer, pass gDoc.js an object with these parameters.

    connect: true,
    id: yourFormId,
    appendTo: 'example-form'

That's it, all of your inputs are automatically inserted!

When submitted, the responses will be sent to the form, and your can export to spreadsheet from there.

Additionally you can add some optional parameters -

    connect: true,
    id: yourFormId,
    appendTo: 'example-form',
    submitValue: 'Submit Form', // submit button text
    successMsg: 'It worked!', // success message after submit
    preloader: 'loading.gif' // img to show while form is loading

As of right now, gDoc will only insert "text" inputs.

Custom Form CSS

Here is an example of how we would modify the above form's CSS.

    form#my-form input {
        display: block;
        margin: 5px auto;
        padding: 5px;
        border-radius: 3px;
        border: #ddd solid thin;
    form#my-form input[type="submit"] {
        background-color: dodgerblue;
        color: #fff;
        border: none;
        border-radius: 3px;



Use Google Spreadsheets as your CMS & to save your inputs!








No releases published


No packages published