This webapp is based off https://github.com/josdejong/jsoneditor
Modified to edit firebase real time db with additional options available
- Sorting
- Find by ID
- Query filtering
- Seraching
- Duplicate objects
- Insert objects
- Change types
- and more
Make the necessary changes to index.hmtl
- Add firebase config
- Moidify [name_of_your_root] to match your json root in firebase realtime db
Find the api docs for jsoneditor.js at https://github.com/josdejong/jsoneditor/blob/master/docs/api.md
<!DOCTYPE HTML> <html> <head> <!-- when using the mode "code", it's important to specify charset utf-8 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <link href="jsoneditor.min.css" rel="stylesheet" type="text/css"> <link href="custom.css" rel="stylesheet" type="text/css"> <script src="jsoneditor.min.js"></script> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-app.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/6.0.2/firebase-database.js"></script> <script> var firebaseConfig = { //TODO , Add Firebase config here }; // Initialize Firebase firebase.initializeApp(firebaseConfig); </script> </head> <body> <div id="jsoneditor" style="width: 100%; height: 900px;"></div> <script> // create the editor var container = document.getElementById("jsoneditor"); var options = { //Fires when any of the the json in the json edidor changes onChangeJSON: function(json){ /* chnage [name_of_your_root] to match your json root in firebase realtime db*/ firebase.database().ref('/name_of_your_root').set(json); }, onChangeText: function(jsonString){ // Do something with the raw json } }; var json = {} /* chnage [name_of_your_root] to match your json root in firebase realtime db*/ var rootRef = firebase.database().ref('/name_of_your_root'); rootRef.once('value').then (function(snapshot) { json = snapshot.val() console.log(json) if(json){ var editor = new JSONEditor(container, options, json); // get json var json = editor.get(); } }); </script> </body> </html>