Magic Components: Semantic and Beautiful Web UI
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.

Magic Components: Semantic and Beautiful Web UI

What is a magic component?

A magic component is an web component with minimal dom

<div class="component-type" gid="google-spreadsheet-id"></div>

It will load data from google spreadsheet via google-spreadsheet-id.

Then render a beautiful UI

The idea behind magic component are "The Next Web" proposed by Tim Berners-Lee and



Recently, I developed some web components, which is load data from google spreadsheet.

It has some advantages

Simple and Secure

With google spreadsheet, It allow me get rid of database and CRUD. I simply edit data via google docs UI and then publish it to the world, such as

I write simple script to load data from spreadsheet via docs api

function getJSONFromGoogleSpreadsheet(spreadsheetID, callback){
  // author: Brother Rain
  // date  : Sep 2015
  // get json from Google Spreadsheet

  // dependencies: jquery
  // dependencies: underscore

  function convertItem(item){
      var result = {};
      var keys = _.keys(item);
      _.each(keys, function(key){
        if(_.contains(key, "$")){
           var realKey = key.split("$")[1];
           result[realKey] = item[key]["$t"];
    return result;  
  var spreadsheetURL = "" + spreadsheetID + "/od6/public/values?alt=json";    
  $.getJSON(spreadsheetURL, function(data){ 
      var items = data.feed.entry;
      var items =, convertItem);

Sematic & Open

Each component has component-type, so if a crawler crawl this site, It will read component-type and get data from spreadsheet. I kind of sematic web, right? Correct me if I am wrong?

This is still in progress and please don't hesitate to give me your opinion.

Components List


Video Component Example (fork me)

Book Component Example (fork me)

Course Component (fork me)

Paper Component (fork me)

Benchmark Component (fork me)