bahrus / xtal-editor

JSON Editor Web Component

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

xtal-editor

Published on webcomponents.org

Playwright Tests

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/xtal-editor@0.0.154';
</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".

About

JSON Editor Web Component


Languages

Language:HTML 93.2%Language:JavaScript 3.3%Language:CSS 1.9%Language:TypeScript 1.6%