Skip to main content

JSON Visual Editor

JSON Editor

Tree View

root {}
"name":
"address": {}
"street":
"city":

Raw JSON

{
    "name": "John Doe",
    "address": {
        "street": "123 Main St",
        "city": "New York"
    }
}

Tree View

root {}
"users": []
{}
"id":
"name":
"address": {}
"street":
"city":

JSON Preview

Formatted

Line wrap 
{
    "users": [
        {
            "id": 1,
            "name": "John Doe",
            "address": {
                "street": "123 Main St",
                "city": "New York"
            }
        },
        {
            "id": 2,
            "name": "Jane Smith",
            "address": {
                "street": "456 Oak Ave",
                "city": "Los Angeles"
            }
        }
    ],
    "settings": {
        "theme": "dark",
        "notifications": true
    }
}

Minified

Size: 248 bytes 
{"users":[{"id":1,"name":"John Doe","address":{"street":"123 Main St","city":"New York"}},{"id":2,"name":"Jane Smith","address":{"street":"456 Oak Ave","city":"Los Angeles"}}],"settings":{"theme":"dark","notifications":true}}

Schema Information

Total Objects

5

Total Arrays

1

Nesting Level

3

JSON Validation

Validation Type

Schema Version

Validation Mode

JSON Schema

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "type": "object",
    "properties": {
        "users": {
            "type": "array",
            "items": {
                "type": "object",
                "required": ["id", "name"],
                "properties": {
                    "id": { "type": "number" },
                    "name": { "type": "string" }
                }
            }
        }
    }
}

Validation Results

Valid JSON Structure

All schema requirements are met

Optional Property Missing

Property 'address' is defined in schema but not present in data

Type Mismatch

Expected number for 'id', got string at /users/2/id

Settings

Editor Preferences

Theme
Font Size
Tab Size
Auto Format

Validation Settings

Real-time Validation
Schema Validation

Backup & Sync

Auto Save
Save Interval
Backup Location

Performance

Large File Support
Memory Limit

Documentation

Getting Started

JSON Visual Editor is a powerful tool that allows you to edit and validate JSON documents with support for multilevel nesting. This documentation will help you get started and master all features.

Before you begin, make sure you have the latest version installed and your system meets the minimum requirements.

Quick Start

npm install json-visual-editor
# or
yarn add json-visual-editor

Basic Usage

Example

import { JSONEditor } from 'json-visual-editor';

const editor = new JSONEditor({
    container: '#editor',
    data: initialData
});

Features

  • Multilevel nesting support
  • Real-time validation
  • Schema support

Requirements

  • Node.js ≥ 14.x
  • Modern browser

API Reference

Methods

setValue(json: object)

Sets the editor content with a new JSON object

getValue(): object

Returns the current JSON content

validate(): boolean

Validates the current JSON content against schema

Examples

Simple Object

{
    "name": "John Doe",
    "age": 30,
    "email": "john@example.com"
}

Nested Structure

{
    "user": {
        "profile": {
            "name": "Jane Smith",
            "location": {
                "city": "New York",
                "country": "USA"
            }
        }
    }
}

Array Collection

{
    "items": [
        { "id": 1, "name": "Item 1" },
        { "id": 2, "name": "Item 2" },
        { "id": 3, "name": "Item 3" }
    ]
}

Complex Structure

{
    "company": {
        "departments": [
            {
                "name": "Engineering",
                "teams": [
                    {
                        "name": "Frontend",
                        "members": []
                    }
                ]
            }
        ]
    }
}

Configuration

{
    "config": {
        "theme": {
            "dark": {
                "primary": "#000",
                "secondary": "#333"
            }
        }
    }
}

API Response

{
    "status": "success",
    "data": {
        "results": [
            {
                "id": "123",
                "details": {}
            }
        ],
        "pagination": {}
    }
}

Categories

Export

Export Format

Export Options

Indentation

Preview

{
    "users": [
        {
            "id": 1,
            "name": "John Doe",
            "email": "john@example.com",
            "preferences": {
                "theme": "dark",
                "notifications": {
                    "email": true,
                    "push": false
                }
            }
        },
        {
            "id": 2,
            "name": "Jane Smith",
            "email": "jane@example.com",
            "preferences": {
                "theme": "light",
                "notifications": {
                    "email": false,
                    "push": true
                }
            }
        }
    ],
    "settings": {
        "global": {
            "language": "en",
            "timezone": "UTC"
        }
    }
}

Recent Exports

Filename Format Size Date Actions
config-2024.json JSON 12.4 KB 2 mins ago
settings.yml YAML 8.2 KB 1 hour ago