JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://unpkg.com/angular-jsoneditor@0.0.1/dist/angular-jsoneditor.js"></script>
<div ng-app="ngApp" ng-controller="ngCtrl" class="wrapper">
    <div class="col">
        <angular-jsoneditor ng-model="obj.data" options="obj.options" style="width: 100%; height: 400px;"></angular-jsoneditor>
    </div>

    <div class="col">
        <div class="pdL4">
            <button type="button" class="btn btn-primary" ng-click="changeData()"><i class="fa fa-check-circle"></i>
                change data
            </button>
            <button type="button" class="btn btn-primary" ng-click="changeOptions()"><i class="fa fa-check-circle"></i>
                change options
            </button>
            <pre>{{pretty(obj.data)}}</pre>
            <input type="text" ng-model="obj.data.String">
        </div>
    </div>
</div>
<script>

</script>

CSS

.wrapper {
            margin: 50px auto;
            width: 1000px;
        }

        .col {
            float: left;
            width: 50%
        }

        .pdL4 {
            padding-left: 40px;
        }

JavaScript

var json = {
        "Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123,
        "Object": {"a": "b", "c": "d"}, "String": "Hello World",
        "auto": "$Hello World"
    };
    angular.module('ngApp', ['angular-jsoneditor']).controller('ngCtrl', function ($scope) {
        $scope.obj = {data: json, options: {mode: 'tree'}};
        $scope.onLoad = function (instance) {
            instance.expandAll();
            this.options.mode = 'code';
            this.options.completer = [
                {value: "$sameer", score: 1000, meta: "custom"},
                {value: "$rathore", score: 1000, meta: "custom"}
            ];
        };
        $scope.changeData = function () {
            $scope.obj.data = {foo: 'bar'};
        };
        $scope.changeOptions = function () {
            $scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
        };
        $scope.pretty = function (obj) {
            return obj;
        };
    });