Need help with Jasonette-Web?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

218 Stars 63 Forks 6 Commits 9 Opened issues


Web implementation of JASON protocol

Services available


Need anything else?

Contributors list

# 31,757
6 commits


Jasonette-Web is an implementation of JASON protocol, whose aim is to unbundle applications from devices by expressing everything in JSON, which then can be stored anywhere, transformed with any language, and transmitted anywhere, using any transport protocol.


You can build native iOS and Android apps using the JASON markup, and Jasonette-Web aims to replicate that experience on the web.

You can learn more about the iOS and Android versions at:


Just to demonstrate what's possible, here are some demos you can try right now:


JASON has a lot of things going on, and we can't support everything from the beginning.

What Jasonette-Web supports

In terms of MVC (Model View Controller paradigm), the first version of Jasonette-Web implements MV (Model and View). This means it includes:

  1. Rendering of all the view components
  2. Dynamic rendering of inline data (under
    ) using templates (under
  3. Mixins

What Jasonette-Web doesn't support (yet)

It doesn't yet implement the "Controller" part, which means it doesn't yet implement:

  1. Actions: This means you can't do things like
    . However you CAN use mixins to fetch remote JSON instead, which is better.


  • 2 Dependencies:
  • Core:



1. Initialize

var app = Jason([Custom DOM attributes], [JASON markup])
  • Custom DOM attributes: Pass in HTML node attributes to customize the root node. All HTML attributes can be specified to customize your own
  • JASON markup: Any JASON markup you wish to instantiate the component with. You can also dynamically fetch content and fill it in later instead of passing this parameter.

2. Refresh

Once initialized, you can refresh the component's content by:

  1. Selecting the element
  2. Calling
    _update([JASON markup])
    on it


var app = Jason({id: "jason", $cell: true})
  $jason: {
    head: {
      title: "hello"
    "body": {
      "sections": [{ ... }]

Warning: Note that you MUST assign the

result to a global variable to make sure it renders.


You can create a Jason View using the following method:

1. Basic

See it in action at demo/basic

var app = Jason({
  $cell: true,
  style: {
    width: "400px",
    margin: "0 auto"
}, {
  "$jason": {
    "head": {
      "title": "Basic"
    "body": {
      "header": {
        "title": "Basic Example"
      "sections": [{
        "items": [{
          "type": "label",
          "style": {
            "padding": "10"
          "text": "Item 1"

2. Custom

Customize the attributes of the root Jason node by passing HTML attributes:

var app = Jason({$cell: true, id: "some_id", class: "col-6"})

Any HTML attribute can be specified to customize your own

3. Advanced


$cell: true
comes from cell.js and it turns a JSON object into an HTML node. You must pass
to render the markup into the DOM.

However sometimes you may want to just generate a JASON markup WITHOUT turning it into a node. This may be the case when you want to compose the component into a larger app, or could be that you want to dynamically plug it in instead of immediately loading the component.

In this case you just don't pass the

$cell: true
and store the variable. Then later you can use it.
var component1 = Jason();
var component2 = Jason();
var app = {
  $cell: true,
  $components: [component1, component2]

You can see more on this in the "multiple" demo code

What you can do with Jasonette-Web

Even without actions you can do a lot of things.

1. Editor

You can use this as a realtime Jasonette editor.


Try the demo at demo/ipfs

2. Plugin

Jasonette-Web is built on top of cell.js, which lets you describe an entire web app purely in JavaScript objects, with no HTML tags or no weird build tools and processes.

Therefore the Jasonette-Web component is instantly pluggable into any environment with ZERO hassle (No build steps. Literally just need to include 1 JS and 1 CSS file)

Here's an example where a single page has 4 Jason components. Since each component is completely containerized thanks to cell.js, you can even drag and drop them anywhere simply using a drag and drop API.

Try the demo at demo/multiple


3. Mixins

The mixins feature is very powerful because you can load remote JSON in realtime. Used with inline data rendering, you don't need to do

to render external content. Here's an example:
  "$jason": {
    "head": {
      "title": "Example",
      "data": {
        "remote_items": {
          "@": ""
      "templates": {
        "body": {
          "sections": [{
            "items": {
              "{{#each remote_items}}": {

The mixin will automatically fetch the remote JSON url and it will be immediately accessible under the variable

throughout the template parsing process.

To learn more about mixins, see:


Anyone is welcome to contribute to the project. Here's how the project is structured:

Repository Structure

  1. src
    folder is all you need to look at. That's what contains all the files.
  2. dist
    folder is simply just a conatentation of JS files in the
    folder so that it's easier to use (include one JS instead of multiple)
  3. The
    folder is generated by running
    . You will see in
    that all it does is generate a concatenated JS and copy the JS and CSS into dist.

How the code works

2 main dependencies

Jasonette-Web is built on top of two main libraries:

  1. Cell.js:
  2. ST.js:


To understand how the code works, you first need to understand how cell.js works.

But don't worry, cell.js is a framework built to be intentionally simple and there are only 3 rules to remember, so it should take about 5 to 10 minutes to get started.


ST.js is the main template engine that powers both Jasonette-iOS and Jasonette-Android, and now Jasonette-Web.

This library plays a great role in Jasonette since this is how most of the JSON transformation is carried out in Jasonette ecosystem.

Check out the documentation at

Project Structure

Now that we've gotten the basics out of the way, here's how the project is structured:

Level 1: App

app.js: This is the starting point of the app. It creates the root node that contains everything else.

Level 2: Top level view elements

Top top level view elements of Jasonette are:

1. Header


Implementation: header.js

2. Sections


Implementation: sections.js

3. Layers


Implementation: layers.js

4. Footer


Implementation: footer.js

Level 3. Items, Layouts and Components


Each section can contain:

  • 1
  • Multiple

Both a header and an item can be either

  • a layout
  • a component

A layout can contain

  • multiple layouts
  • multiple components
  • mix of multiple layouts and multiple components


  • Header Implementation: section.js at
  • Items Implementation: section.js at

  • Layout Implementation: item.js at
  • Components Implementation: item.js at

  • Each custom components implementation (such as label, image, button, etc): components.js

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.