Skip to content
💥 Official guide to Superbooks.
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


An official guide to writing & publishing Superbooks on web. This book was initially written by hand and then later baked with Bookiza Abelone for sanity.

Live render

The book is rendered here: Official Handbook

Hack & host

In your local:

    $ git clone
    $ npm install
    $ bookiza server
    $ bookiza register  # Supply your bubblin's credentials
    $ bookiza publish   # Boom, it goes online! 

Read the Bookiza Documentation for more.


Superbooks are generally supported everywhere i.e. all devices, all desktops and all browsers. However, quirky behavior may appear from time to time and then best recourse is to report the issue on Github immediately with a screeen-grab.

Note: Despite ubiquity, the effort with superbooks points to mostly yielding best reading experience on tablets: i.e. iPads(iOS 7+), Kindle 3 (Silk) and Android 5.0+ phablets. Because, well, even though it's great to support desktops, smartphones, TVs and whatnot, the most ideal situation and surface for reading books is a tablet.

Quick info:

  • Bubblin is a production substrate for Superbooks. Read more.

  • Superbook is a responsive container that holds the story of your book. Read more

How it works

Each page of the book is a virgin iframe (book is a collection of web pages) that holds your HTML, CSS and JavaScript together. All content is rendered instantly -- in realtime -- using a codemirror instance underneath.


Even though the superbook container is responsive, it is likely that the content you're going to put inside it isn't. Use the following style templates and guidelines to convert your content into a responsive scalable object.

Warn: DO NOT USE 'px', 'em', or 'pt' on your book CSS. Even the best CSS frameworks are too old school to get this right. Use viewport units (vw or viewport width) instead and a single break-point @media-query at 871px to handle bifoliums and single-page mode easily.

Interestingly, just 10 lines of CSS is enough to scale content responsively across all devices in the world.

Using CDN

It is possible to add CDN resources to your book. Or you can wrap it within the 'body` tag of your HTML; whatever works!

Tip: You can use rawgit i.e. Github with proper CONTENT-TYPE headers to host your library and assets. Note all includes inside the book from external CDN or source must be served under https -- i.e. secured url

The Project

This project was initially generated using bookiza bash plugin i.e. with command $ bookiza new official-handbook --leafs 30.

Notice: The bash plugin is now deprecated.


List of things to probably do (and would appreciate immediate help on):


  * NSerror on Firefox
  * Detach render of heavy SVGs
  * Include Google @font-faces via single rule


Feel free to contribute, fix or help improve the code of this book.

  1. Fork it ( )
  2. Create your feature branch (git checkout -b my-new-page)
  3. Commit your changes (git commit -am 'Added a page on (/topic)')
  4. Push to the branch (git push origin my-new-page)
  5. Create a new Pull Request
  6. Contact me if I don't respond within 24 hours.


Creative Commons License
All content of this superbook is licensed under a Creative Commons Attribution 3.0 United States License.

The underlying code used to format and display the content is licensed under the MIT license .

You can’t perform that action at this time.