json-ui

v0.1.0

Published

4 years ago

A beautiful UI, editing JSON for EVERYONE!

0High
0Medium
0Low

chihsuan

json-ui

Json in editing in friendly UIs.

require

Install nodejs
Install npm

Usage

get js from ./dist/json_ui.js, css from ./app/css/json_ui.css and all views from app/views

Including files:

<link rel="stylesheet" href="./css/json_ui.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/json_ui.js"></script>

HTML structure

Set json-ui in page

<html ng-app="json.ui">
<body ng-controller="jsonUIController as jsonUI">

<div class="json-ui">
    <object class="root" id="json-ui" ng-init="jsonUI.config()">
    </object>
</div>

Set raw json editor in page

<div class="raw_json">
    <div id="editor"></div>
</div>

Set json-ui <-> raw-json buttons in page

<button class="to-json-raw" ng-click="jsonUI.toRawJson()">></button>
<button class="to-json-ui" ng-click="jsonUI.toJsonUI()"><</button>

Set export json link

 <a ng-href="{{jsonUI.jsonLink}}" download="jsonui.json" ng-click="jsonUI.getDownloadLink()">Export</a>

Initialization

Initialize Raw Json

var initJson =  {
                   "Name": "Robert",
                   "Family": ["Dad", "Mom", "Sister", "ME"],
                   "Home": {"Country": "Taiwan", "City": "Tainan"}
                };

editor.init(initJson);

Initialize json-ui

Default Initialization

angular.module('json.ui')
  .config(function (AppConfigProvider) {
    AppConfigProvider.set({
        id: '#json-ui'
    });
});

Alter options

angular.module('json.ui')
  .config(function (AppConfigProvider) {
    AppConfigProvider.set({
      initialSync : true
    });
});

###Options

| Options | value | default | explain |example| |-----------------|--------------|---------------------|--------------------------------------------|--------------------------------------------| | id | element id (string) | '#json-ui' | 'json-ui': set root object id || | initialSync | true / false | false | true: Json-ui and Raw json synchronization when page load ||

Develop

First run the following command (installing bower npm install -g bower)

$ bower install

start server (you should install npm install http-server -g first)

$ npm start

open the browser and type this http://localhost:8000/app/

compile scss file & js file

We are using browserify so you should install browserify in global first ( npm install -g browserify ).

$ npm install
$ gulp

deploy

$ ./deploy

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

json-ui

require

Usage

Including files:

HTML structure

Initialization

Develop

compile scss file & js file

deploy