json-live

(demo)

Live-update JSON objects on file change, without destroying application state. This is ideal for animations and rapid UI development.

This comes in the form of a server and browserify transform, but requires no frontend code changes. Example:

var data = require('./model.json')
 
setInterval(function() {
    console.log("My name is", data.name)
}, 1000)

With json-live running, changing the model.json file will update the values of data during runtime.

{
    "name": "mattdesl",
    "color": "blue"
}

Comments/suggestions/PRs/etc welcome. Thanks to @hughsk and glslify-live which set the groundwork for most of the code here.

Usage

First, install the tool locally:

npm install json-live --save-dev

You first need to run the json-live server. You can run it directly from shell, like so:

./node_modules/.bin/json-live 

However, the preferred solution is to run the server with a package.json scripts field.

Then, include -t json-live as a transform argument when bundling.

browserify index.js -t json-live > bundle.js

For example, with wzrd your local scripts might look like this. You can optionally use garnish for pretty-printing in the terminal.

{
    "scripts": {
        "live": "json-live | garnish",
        "start": "wzrd index.js:bundle.js -- -t json-live | garnish",
        "build": "browserify index.js | uglifyjs -cm > bundle.js"
    }
}

Now, first you would npm run live to initiate the json-live server. Then in another process, npm run start for the development server. Note the build script doesn't include the transform, since it is not needed for production.

You can open localhost:9966 to see the resulting bundle, and start making changes to JSON files to see them updated during runtime.

Event Emitter

The default browser export for this module returns an event emitter which sends update events when the JSON changes. It sends the parameters (object, id), where object is the JSON data that has been updated, and id is a path to that JSON file.

var data = require('./foo.json')
 
var live = require('json-live')
live.on('update', function(object) {
    console.log(object === data) // should be true  
})

Without the transform included, the event emitter will simply not emit anything.

License

MIT, see LICENSE.md for details.