Tutorial Github Twitter Slack

What is Jasonette?

Jasonette lets you make an app with nothing but a single declarative recipe, loaded from a remote JSON.

JSON browser that builds native components.


Just like how web browsers turn HTML into a web page,
Jasonette turns JSON into iOS native components.
This lets you build native apps by writing a simple JSON recipe.

browsers

Server sends HTML.
Browser turns it into a web page.

jasonette

Server sends JSON.
Jasonette turns it into native components.
<html>
  <head>...</head>
  <body>
    ...
    <div>...</div>
    ..
  </body>
</html>
{
  "$jason": {
    "head": {...},
    "body": {
      "sections": [{
        "items": [
          { "type": "image", "url": "..." },
          { "type": "label", "text": "..." },
          ...
        ]
      }]
    }
  }
}

ALL YOU NEED IS JSON


Jasonette abstracts away all low level programming with a JSON based markup.
All you need to write is a single JSON.

LAYOUT

Construct complex layouts with JSON

Build a card UI with an image, labels, and nested layouts
{
  "type": "horizontal",
  "components": [
    { "type": "image", "url": "https://pbs.twimg.com/profile_images/557061751150112768/eMwi4Xz2.jpeg" },
    { "type": "vertical",
      "components": [
        { "type": "label", "text": "Ethan" },
        { "type": "label", "text" "www.textethan.com" }
      ]
    }
  ]
}

ACTION

Describe actions with JSON

Make a network request and draw the result
{
  "type": "$network.request",
  "options": {
    "url": "http://api.giphy.com/v1/gifs/search",
    "data": { "q": "kitten", "api_key": "dc6zaTOxFJmzC" }
  },
  "success": {
    "type": "$render"
  }
}

STYLE

Style components with JSON

Style a label
{
  "type": "label",
  "text": "Hello World",
  "style": {
    "padding": "10",
    "corner_radius": "5",
    "background": "rgba(0,0,0,0.4)",
    "color": "#ffffff",
    "font": "HelveticaNeue"
  }
}

100% NATIVE


Jasonette lets you directly manipulate native APIs using JSON.
Direct access to UIView, UITableView, UIStackView, UIImage, etc.

background image
message input
camera access
video playback
textfield / textarea
header menu
tabs
slider
alert
banner
picker
date picker
share widget
vertical scroll
horizontal scrol
floating layers
sliding menu
And much more! Including...
1. Direct access to the device such as camera, audio, geolocation, video, network request, etc.
2. Powerful layout engine that directly manipulates native components such as UITableView, UIStackView, UIView, etc.
3. Describe styling and event handling all with JSON

INSTANT, LIKE CUP NOODLES


Jasonette is already a "pre-cooked" app.
Getting started is as easy as:

1. Download
2. Connect your phone
3. Press play

Once you have it running,
simply switch out the url to play your own JSON.


NATIVE APP OVER HTTP


Want to make changes to your LIVE app?

Simply change your JSON content on the server,

and watch the app change in front of your eyes, instantly!


BATTLE TESTED


Jasonette was extracted from several production apps on the App Store, so you know it works.
Below are some actual production apps built with Jasonette:

100% OPEN, FOREVER


100% OPEN SOURCE

Jasonette is licensed under MIT license. Take the code, build and publish your own apps, and do whatever you want with it!


100% PORTABLE

There is no magical backend server you need to learn to use, pay for, or install to use Jasonette. ALL YOU NEED IS JSON. If you have a web server, you ALREADY have a Jasonette server.


100% EXTENSIBLE

Jasonette is essentially just an engine that maps JSON expression to native components and actions. It doesn't force you to drop everything and adopt the technology exclusively. You can extend it or even integrate it with your existing native code seamlessly.