xtal-editor

Re-creation of flexi-json, taking some liberties, but as a web component.

Demo

xtal-editor is able to scale somewhat better for large JSON objects as compared to other alternative editors.

At least if a height is specified (if not, not very scalable).

API

Usage

Locally:

<xtal-editor style=height:350px;>
    <textarea>
        {
            "string":"foo",
            "number":5,
            "array":[1,2,3],
            "object":{
                "property":"value",
                "subobj":{
                    "arr":["foo","ha"],
                    "numero":1
                }
            }
        }
    </textarea>
</xtal-editor>
<script type=module>
    import 'xtal-editor/src/xtal-editor.js';
</script>

Reference API

Referencing via CDN

<script type=module crossorigin>
    import 'https://esm.run/[email protected]';
</script>

Running demos locally

To run locally (instructions may vary depending on OS):

1. Install node.js
2. Install git
3. Choose a directory where you would like the files to be placed, and open a command prompt from that location.
4. Issue command "git clone https://github.com/bahrus/xtal-editor" in the command window.
5. CD into the git clone directory.
6. Issue command "npm install"
7. When step 6 is completed, issue command "npm run start".