DOCSEARCHbyAlgolia
Submit Docs

JSON Editor

repository·develop·Indexed 11 days ago

https://github.com/josdejong/jsoneditor

A web-based tool for viewing, editing, formatting, and validating JSON, version 10.4.3. It can be integrated into web applications as a component with multiple modes, including Tree, Code, Text, View, Form, and Preview. Features include JSON schema validation via Ajv, JMESPath transformations, and support for large documents up to 500 MiB in Preview mode.

Tokens
14K
Snippets
49
Records
64
Agent score
95%

What's inside JSON Editor

  1. Overview of JSON Editor modes

    develop

    JSON Editor supports several modes, each providing different capabilities:

    • Tree mode: A visual editor to change, add, move, remove, and duplicate fields. Includes sorting, JMESPath transformations, color picker, search/highlight, undo/redo, and JSON schema validation (via ajv).
    • Code mode: A code-centric editor powered by Ace. Includes syntax highlighting, JSON inspection, formatting, compacting, repairing, and JSON schema validation.
    • Text mode: A plain text interface for formatting, compacting, repairing, and JSON schema validation.
    • Preview mode: Optimized for viewing large JSON documents (up to 500 MiB). Supports JMESPath transformations, formatting, compacting, repairing, and JSON schema validation.

  3. Choose between the Full and Minimalist versions of JSON Editor

    develop

    JSON Editor provides two distribution versions depending on your requirements for features and bundle size:

    Full Version

    Use this version if you need the 'code' mode (powered by Ace), JSON schema validation (powered by Ajv), or the built-in color picker (powered by vanilla-picker).

    Required files for Full version:

    • jsoneditor.min.js
    • jsoneditor.min.css
    • img/jsoneditor-icons.svg
    • jsoneditor.map (optional, for debugging)

    Minimalist Version

    Use this version to reduce the minified and gzipped JavaScript size from ~210 kB to ~70 kB. This version excludes ace, ajv, and vanilla-picker.

    Choose the Minimalist version if:

    • You do not need 'code' mode or JSON schema validation.
    • You want to provide your own ace or ajv instances via configuration to avoid duplicate bundling.
    • You do not need the color picker or want to provide a custom one using the onColorPicker option.

    Required files for Minimalist version:

    • jsoneditor-minimalist.min.js
    • jsoneditor.min.css
    • img/jsoneditor-icons.svg
    • jsoneditor-minimalist.map (optional, for debugging)

  4. Load JSONEditor in a web application

    develop

    To use JSONEditor in a browser environment, include the compiled CSS and JavaScript files in the <head> of your HTML document. Ensure the paths point correctly to your local installation or a CDN.

    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>

  6. Use JSON Editor in a web application

    develop

    To use JSON Editor, include the jsoneditor.min.css and jsoneditor.min.js files in your HTML. You must provide a container element (e.g., a div) where the editor will be rendered. Initialize the editor using the JSONEditor constructor, passing the container element and an options object. You can then use .set(json) to load data and .get() to retrieve the current JSON state.

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script>
        // create the editor
        const container = document.getElementById("jsoneditor")
        const options = {}
        const editor = new JSONEditor(container, options)

        // set json
        const initialJson = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    </script>
</body>
</html>

  7. Build JSON Editor from source

    develop

    If you want to build the project from the ./src directory, follow these steps:

    1. Install dependencies: npm install
    2. Build the project: npm run build. This generates ./jsoneditor.js, ./jsoneditor.css, and minified versions in the dist folder.
    3. For development (auto-build on change): npm start. This updates the non-minified files in the dist folder on every change.
    npm install
npm run build
# or for development
npm start

  8. Format or compact JSON strings using native JSON methods

    develop

    When working with JSON data in conjunction with the editor, you can use the browser's built-in JSON object to transform data.

    To create a human-readable, indented string from a JSON object, use JSON.stringify(json, null, 2).

    To create a single-line, compacted string, use JSON.stringify(json).

    To convert a JSON string back into a JavaScript object, use JSON.parse(string).

    // Create a formatted string (indented with 2 spaces)
var formattedString = JSON.stringify(json, null, 2);

// Create a compacted string
var compactString = JSON.stringify(json);

// Parse a string to a JSON object
var json = JSON.parse(string);

  9. Initialize JSONEditor

    develop

    To initialize the editor, first create a container element (e.g., a <div>) in your HTML with a specific id and defined dimensions (width and height). Then, use the JSONEditor constructor in JavaScript, passing the container element and an optional configuration object.

    <!-- 1. Create the container -->
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>

<script>
// 2. Initialize the editor
var container = document.getElementById("jsoneditor");
var options = {
    mode: 'tree'
};
var editor = new JSONEditor(container, options);
</script>