← Back to Editor

#Schematic JSON Editor - User Guide

A keyboard-first JSON editor with optional JSON Schema validation, designed for developers who want to edit JSON efficiently.

#Quick Start

#Using as a CDN Module

Include the editor in your project using ES modules directly from the CDN:

Basic Editor (no schema)

<!DOCTYPE html>
<html>
<head>
  <style>
    json-editor { height: 400px; display: block; }
  </style>
</head>
<body>
  <json-editor></json-editor>

  <script type="module">
    import 'https://json-editor.devblanket.com/src/components/json-editor.js';

    const editor = document.querySelector('json-editor');
    editor.setValue({ hello: 'world' });
  </script>
</body>
</html>

Full IDE with Schema Panel

<!DOCTYPE html>
<html>
<head>
  <style>
    json-editor-schematic { height: 100vh; display: block; }
  </style>
</head>
<body>
  <json-editor-schematic padding-top="8" padding-left="12"></json-editor-schematic>

  <script type="module">
    import 'https://json-editor.devblanket.com/src/components/json-editor-schematic.js';

    const editor = document.querySelector('json-editor-schematic');
    editor.load({
      name: 'User Profile',
      document: {
        name: 'Jane Doe',
        email: 'jane@example.com',
        age: 28
      },
      schema: {
        type: 'object',
        properties: {
          name: { type: 'string' },
          email: { type: 'string', format: 'email' },
          age: { type: 'integer', minimum: 0 }
        },
        required: ['name', 'email']
      }
    });
  </script>
</body>
</html>

#Available Components

Component	Import Path	Description
`json-editor`	`/src/components/json-editor.js`	Basic JSON editor without schema
`json-editor-schema-wrapper`	`/src/components/json-editor-schema-wrapper.js`	JSON editor with schema validation
`json-editor-schematic`	`/src/components/json-editor-schematic.js`	Full IDE with data + schema panels

#Component Attributes

All editor components support these attributes:

Attribute	Type	Description
`padding-top`	number	Top padding in pixels for the tree content
`padding-left`	number	Left padding in pixels for the tree content

<json-editor padding-top="8" padding-left="12"></json-editor>

The editor uses a cursor-based navigation model. One node is always focused (highlighted with a colored border).

#Movement Keys

Key	Action
`↑` or `k`	Move cursor up
`↓` or `j`	Move cursor down
`←` or `h`	Fold current node (collapse children)
`→` or `l`	Unfold current node (expand children)
`[`	Go back to parent node
`Ctrl+↑`	Move item up in array
`Ctrl+↓`	Move item down in array

#Folding

Objects and arrays can be folded (collapsed) to hide their contents:

Press ← or h to fold the current container
Press → or l to unfold
Folded containers show a summary like object 3 properties or array 5 items

#Editing

#Starting an Edit

Key	Action
`Space`	Edit the current value
`-`	Auto-edit mode — edit with smart type inference
`Shift+Space`	Open info panel for current node
`Enter`	Add a sibling after current node
`Shift+Enter`	Add a sibling before current node
`Ctrl+Enter`	Add a child to current container
`r`	Rename the current key
`,`	Open type selector menu

#The `-` Key (Auto-Edit)

The - key is one of the most useful shortcuts. It opens an "auto-edit" mode that:

Infers the best type from what you type (string, number, boolean, etc.)
Shows type preview as you type so you know what you'll get
Supports property syntax — type name: value to create a new property
Handles containers — type {} or [] to create objects/arrays

This is the recommended way to edit values when you're not sure of the exact type, or when you want to quickly create new properties.

#Quick Type Changes

These keys instantly change the current value:

Key	Action
`t`	Set value to `true`
`f`	Set value to `false`
`,`	Open type selector menu
`-`	Switch to auto-edit mode
`{`	Convert to empty object `{}`
`[`	Convert to empty array `[]`

#In Edit Mode

When editing a value:

Key	Action
`Enter`	Commit the edit
`Escape`	Cancel the edit
`Tab`	Accept autocomplete suggestion (if shown)
`↑/↓`	Navigate autocomplete suggestions

#Type Coercion

The editor intelligently parses your input:

You type	Result
`hello`	`"hello"` (string)
`42`	`42` (number)
`3.14`	`3.14` (number)
`true` / `false`	boolean
`null`	null
`"quoted"`	`"quoted"` (explicit string)
`[1, 2, 3]`	array (parsed as JSON)
`{a: 1}`	object (relaxed JSON syntax)

#Property Syntax

When adding properties to objects, use the colon syntax:

name: John

This creates a property "name" with value "John".

For nested creation:

user: {name: Alice, age: 30}

#Array Item Syntax

When adding items to arrays, you can use bullet syntax:

* first item
* second item

Or just type the value directly.

#Selection & Clipboard

#Selection

Key	Action
`Shift+↑`	Extend selection upward
`Shift+↓`	Extend selection downward
`Cmd/Ctrl+A`	Select all nodes

#Clipboard

Key	Action
`Cmd/Ctrl+C`	Copy selected nodes
`Cmd/Ctrl+X`	Cut selected nodes
`Cmd/Ctrl+V`	Paste
`Backspace` or `Delete`	Delete selected nodes

#Undo/Redo

Key	Action
`Cmd/Ctrl+Z`	Undo
`Cmd/Ctrl+Y` or `Cmd/Ctrl+Shift+Z`	Redo
`z`	Undo (vim style)
`Z`	Redo (vim style)

The editor maintains a full history of changes. Each atomic operation (add, delete, edit) creates a snapshot.

#View Controls

Key	Action
`.`	Toggle status bar visibility
`J`	Scroll view down (keep cursor)
`K`	Scroll view up (keep cursor)

#Command Palette

Press ` (backtick) to open the command palette. Available commands:

Command	Description
`fold-all`	Collapse all nodes
`unfold-all`	Expand all nodes
`fold-level-1`	Collapse to depth 1
`fold-level-2`	Collapse to depth 2
`fold-level-3`	Collapse to depth 3
`select-all`	Select all nodes
`help`	Show keyboard shortcuts

#Search

Press / to start a search. Type your query and:

Key	Action
`Enter`	Go to first match
`n`	Next match
`N` (Shift+n)	Previous match
`Escape`	Clear search

Search matches are highlighted in the tree.

#Go to Path

Press $ to open path navigation. Type a JSON path:

$.users[0].name
users.0.name

The editor autocompletes paths as you type. Press Tab to accept a suggestion.

#Info Panel

Press Shift+Space to open the info panel for the current node. The info panel shows:

Type information - The JSON type of the value
Schema constraints - If a schema is loaded, shows validation rules
Validation errors - Any schema violations
Quick actions - Fix suggestions for common issues

#Marks Panel

Press Cmd/Ctrl+Shift+M to open the marks panel. This shows all validation errors and warnings in the document.

Click on a mark to navigate to that node.

#Schema Validation

When using json-editor-schema-wrapper or json-editor-schematic, the editor validates your data against a JSON Schema.

#Validation Indicators

Red dot - Validation error (value doesn't match schema)
Yellow dot - Warning or suggestion
Status bar - Shows total error count

#Schema-Aware Features

With a schema loaded:

Autocomplete - Property names and enum values are suggested
Type hints - The info panel shows expected types
Default values - "Fix" actions can apply schema defaults
Auto-extend - Arrays auto-expand when you navigate past the end

#Schematic Mode (Split View)

The json-editor-schematic component provides a full IDE experience with:

Data panel (left) - Edit your JSON data
Schema panel (right) - Edit the JSON Schema

#Layout Commands

Action	Description
Drag the divider	Resize panels
Double-click divider	Reset to 50/50

#Schematic API

const schematic = document.querySelector('json-editor-schematic');

// Load data and schema together
schematic.load({
  name: 'My Document',
  document: { hello: 'world' },
  schema: { type: 'object', properties: { hello: { type: 'string' } } }
});

// Get current state
const doc = schematic.getDocument();
const schema = schematic.getSchema();

// Infer schema from data
schematic.inferSchema();

// Generate sample data from schema
schematic.generateSample();

// Download files
schematic.download();        // Both as ZIP
schematic.downloadDocument(); // Just data
schematic.downloadSchema();   // Just schema

#API Reference

#json-editor

Basic editor for JSON data without schema validation.

const editor = document.querySelector('json-editor');

// Get/set the document
editor.setValue({ key: 'value' });
const data = editor.getValue();

// Cursor control
editor.setCursorPath(['users', 0, 'name']);
const path = editor.getCursorPath();

// Undo/redo
editor.undo();
editor.redo();

// Marks (annotations)
editor.setMark(['path', 'to', 'node'], {
  status: 'error',
  message: 'Invalid value'
});
editor.removeMark(['path', 'to', 'node']);
editor.clearAllMarks();

// State persistence
const state = editor.getState();  // Includes folds, cursor, etc.
editor.setState(state);

// Focus
editor.focus();

#json-editor-schema-wrapper

Editor with JSON Schema validation.

const editor = document.querySelector('json-editor-schema-wrapper');

// All json-editor methods, plus:

// Load a schema
editor.loadSchema({
  type: 'object',
  properties: {
    name: { type: 'string' }
  },
  required: ['name']
});

// Get current schema
const schema = editor.getSchema();

// Clear schema (disable validation)
editor.clearSchema();

// Manually trigger validation
editor.validate();

// Infer schema from current data
const inferredSchema = editor.inferSchema();

// Get schema-aware completions
const completions = editor.getCompletions(['path']);

#json-editor-schematic

Full IDE with data and schema panels.

const schematic = document.querySelector('json-editor-schematic');

// Load everything at once
schematic.load({
  name: 'Config',
  document: { port: 3000 },
  schema: { type: 'object', properties: { port: { type: 'integer' } } }
});

// Individual getters/setters
schematic.setDocument({ port: 8080 });
schematic.setSchema({ type: 'object' });
schematic.setName('New Name');

const doc = schematic.getDocument();
const schema = schematic.getSchema();

// Layout control
schematic.splitHorizontal();    // Show both panels
schematic.showSingle('data');   // Show only data
schematic.showSingle('schema'); // Show only schema

// Focus control
schematic.focus();       // Focus the component
schematic.focusData();   // Focus data panel
schematic.focusSchema(); // Focus schema panel

// Navigate to a path
schematic.goToPath('data', ['users', 0]);
schematic.goToPath('schema', ['properties', 'users']);

// Schema operations
schematic.inferSchema();    // Infer schema from data
schematic.generateSample(); // Generate data from schema

// File operations
schematic.download();         // Download as ZIP
schematic.downloadDocument(); // Download data.json
schematic.downloadSchema();   // Download schema.json
schematic.openFile();         // Open file dialog

#Events

All editors emit these events:

Event	Detail	Description
`document:change`	`{ document }`	Document was modified
`document:replace`	`{ document }`	Document was completely replaced
`cursor:move`	`{ path }`	Cursor moved to new path
`state:change`	`{ key, value }`	Editor state changed

json-editor-schematic also emits:

Event	Detail	Description
`document-change`	`{ document }`	Data panel document changed
`schema-change`	`{ schema }`	Schema was modified
`cursor-change`	`{ panel, path }`	Cursor moved in either panel

editor.addEventListener('document:change', (e) => {
  console.log('Document changed:', e.detail.document);
});

#Styling

The editor uses CSS custom properties for theming. Override these on the component or a parent:

json-editor {
  /* Colors */
  --color-bg: #1a1a1a;
  --color-fg: #e0e0e0;
  --color-string: #a8d08d;
  --color-number: #d4a656;
  --color-boolean: #6eb5ff;
  --color-null: #888888;

  /* Spacing */
  --tree-padding-top: 8px;
  --tree-padding-left: 12px;
}

#Tips & Tricks

#Efficient Editing

Use keyboard shortcuts - Avoid the mouse for common operations
Learn the colon syntax - name: value is faster than adding then editing
Use type shortcuts - t, f, n for booleans and null
Fold large sections - Press ← to collapse subtrees you're not editing

#Working with Schemas

Start with data - Write your JSON first, then infer a schema
Use autocomplete - Schema-defined properties appear in suggestions
Check the info panel - Shift+Space shows what the schema expects
Fix with defaults - Many validation errors have "Fix" buttons

#Large Documents

Fold to navigate - Collapse sections to reduce visual noise
Use path navigation - Press $ and type the path directly
Search - Press / to find values quickly
Marks panel - Cmd+Shift+M to see all issues at once

#Browser Support

The editor uses modern web standards:

ES Modules
Custom Elements (Web Components)
CSS Custom Properties
Shadow DOM

Supported browsers:

Chrome/Edge 88+
Firefox 78+
Safari 14+

#License

Permission is granted to use this software via the official CDN (json-editor.devblanket.com) for any purpose, including commercial use.

You may NOT:

Redistribute this software
Modify this software
Host copies of this software
Create derivative works

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.