The worlds simplest CMS, using a google doc as a database / backend, and tabletop.js + handlebars.js as a frontend.
JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


cmsish is the most simple CMS in the world. Demo:

Step 1: Create a google spreadsheet and enter some data. Select "File / Publish to the web" and copy the url in the pop-up.


Step 2: Include cmsish.min.js in your project (found in dist/cmsish.min.js).

<script src="cmsish.min.js" type="text/javascript"></script>

Step 3: In your HTML, wrap your content in handlebars script tags. Include a data attribute with the URL to your spreadsheet.

  <script id="entry-template" type="text/x-handlebars-template" data-spreadsheet-url="ADD_YOUR_GOOGLE_SPREADSHEET_URL_HERE">
    <!-- All your HTML goes between these script tags -->

    <!-- Stop your HTML now -->

Step 4: Add content from the spreadsheet to your template with handlebars expressions. Handlebars expressions look like this: {{ title }}

Make your expressions by combining the spreadsheet sheet name and column name, separated by a period: {{sheet-name.column-name}}. Replace spaces with dashes, but leave the case the same as in your spreadsheet.

For example:

  <script id="entry-template" type="text/x-handlebars-template">
    <!-- All your HTML goes between these script tags -->


    <!-- Stop your HTML now -->

Other options:

Initiate cmsish in JS instead of with a data-spreadsheet-url attribute:

<script type="text/javascript">
  var myCms = new cmsish.init('GOOGLE_SPREADSHEET_URL');

Loop through a collection.

To make a collection, create a new sheet, and add multiple rows for each column.


Loop through a collection with the #each helper, using the name of the sheet as the collection name:

{{#each Posts}}
    <p>Post title: {{Title}}</p>
    <p>Post author: {{Author}}</p>
    <p>Post subtitle: {{Subtitle}}</p>
    <p>Post main content: {{Main-Content}}</p>
    <p>Post testimonial: {{Testimonial}}</p>
    <img src="{{{Image}}}" />

Access a single row of a collection by referring to it's index. Posts are zero indexed, so the first one is 0, the second 1, etc

Post title for post #2: {{Posts.1.Title}}