188 lines
6.7 KiB
HTML
188 lines
6.7 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>JSON Editor Online - Documentation</title>
|
||
|
|
<link href="doc.css" rel="stylesheet" type="text/css">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<h1 id="documentation">JSON Editor Online - Documentation</h1>
|
||
|
|
|
||
|
|
<h2 id="introduction">Introduction</h2>
|
||
|
|
<p>
|
||
|
|
JSON Editor Online is a web-based tool to view, edit, and format JSON.
|
||
|
|
It shows your data side by side in a clear, editable treeview and in
|
||
|
|
formatted plain text.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 8+.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Website: <a href="http://jsoneditoronline.org" target="_blank">
|
||
|
|
http://jsoneditoronline.org</a>.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2 id="main_menu">Main menu</h2>
|
||
|
|
<p>
|
||
|
|
The applications main menu contains options to clear, load and save the
|
||
|
|
JSON contents of the application. Files can be loaded from disk or url,
|
||
|
|
and can be saved to disk.
|
||
|
|
</p>
|
||
|
|
<img src="img/main_menu.png" alt="Main menu">
|
||
|
|
|
||
|
|
<h2 id="panels">Application panels</h2>
|
||
|
|
<p>
|
||
|
|
The application contains two panels: a <b>JSON Formatter</b> on the left,
|
||
|
|
and a <b>JSON Editor</b> on the right.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
There is a splitter between the two panels, allowing to change the
|
||
|
|
width of both panels according to ones needs.
|
||
|
|
To copy the contents from one panel to an other, the two copy buttons
|
||
|
|
between the panels can be used.
|
||
|
|
</p>
|
||
|
|
<img src="img/splitter.png">
|
||
|
|
|
||
|
|
<h2 id="formatter">JSON Formatter</h2>
|
||
|
|
<p>
|
||
|
|
The JSON Formatter displays JSON data in plain text.
|
||
|
|
The JSON Formatter is capable of formatting and compacting JSON.
|
||
|
|
</p>
|
||
|
|
<img src="img/jsonformatter.png">
|
||
|
|
<p>
|
||
|
|
The menu of the JSON Formatter contains the following buttons:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<b>Format</b>.
|
||
|
|
Format the JSON data, make the data readable by applying indentation
|
||
|
|
and returns.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Compact</b>.
|
||
|
|
Compact the JSON data, remove all unnecessary characters like
|
||
|
|
whitespaces and returns.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2 id="editor">JSON Editor</h2>
|
||
|
|
<p>
|
||
|
|
The JSON Editor displays the JSON data in an editable tree.
|
||
|
|
The JSON Editor makes it easy to create, duplicate, remove fields,
|
||
|
|
and to edit the contents of the fields.
|
||
|
|
</p>
|
||
|
|
<img src="img/jsoneditor.png">
|
||
|
|
<p>
|
||
|
|
The menu of the JSONEditor contains the following functions:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<b>Expand all</b>. Expand all fields in the editor.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Collapse all</b>. Collapse all fields in the editor.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Undo</b>. Undo last action.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Redo</b>. Redo last action.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Search</b>. Search for text in the JSON editor.
|
||
|
|
Search results will be highlighted, and can be iterated by
|
||
|
|
repeatedly pressing Enter or Shift+Enter.
|
||
|
|
The right side of the search box two buttons to go to the next or
|
||
|
|
previous search result.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
The field values in the editor are editable input fields.
|
||
|
|
The fields can be dragged up and down using the dragarea
|
||
|
|
<img src="img/button_dragarea.png" class="icon">
|
||
|
|
on the left side of the fields. When a field is the last item of the
|
||
|
|
childs of an array or object, the field can also be dragged horizontally
|
||
|
|
to move it in or out of the array or object.
|
||
|
|
</p>
|
||
|
|
<img src="img/actions_menu.png" align="right" style="padding-left: 20px;">
|
||
|
|
<p>
|
||
|
|
Right from the dragarea is a button
|
||
|
|
<img src="img/button_actions_menu.png" class="icon">
|
||
|
|
to open the <b>actions menu</b>.
|
||
|
|
Depending on the type of field, the following functionality is
|
||
|
|
available in the actions menu:
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<b>Type</b>. Change the type of the field. Choose from:
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<b>auto</b> The field type is automatically determined from
|
||
|
|
the value and can be a string, number, boolean, or null.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>object</b> An unordered set of key/value pairs.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>array</b> An ordered collection of values.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>string</b> Field type is not determined from the value,
|
||
|
|
but always returned as string.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Sort</b>. Sort the childs of an array or object.
|
||
|
|
For an array, the values of the childs will be sorted. In case of
|
||
|
|
an object, the childs will be sorted by key.
|
||
|
|
Arrays and objects can be sorted ascending or descending.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Insert</b>. Insert a new field before current field.
|
||
|
|
Available types are auto (default), object, array, and string.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Append</b>. Insert a new field after current field.
|
||
|
|
Available types are the same as the insert action.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Duplicate</b>. Duplicate the field including all childs.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<b>Remove</b>. Remove the field including all childs.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2 id="shortcut_keys">Shortcut keys</h2>
|
||
|
|
<p>
|
||
|
|
JSON Editor supports shortcut keys for all available actions.
|
||
|
|
The editor can be used by just a keyboard.
|
||
|
|
The following short cut keys are available:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<tr><th>Key</th><th>Description</th></tr>
|
||
|
|
<tr><td>Alt+Arrows</td><td>Move the caret up/down/left/right between fields</td></tr>
|
||
|
|
<tr><td>Shift+Alt+Arrows</td><td>Move field up/down/left/right</td></tr>
|
||
|
|
|
||
|
|
<tr><td>Ctrl+D</td><td>Duplicate field</td></tr>
|
||
|
|
<tr><td>Ctrl+Del</td><td>Remove field</td></tr>
|
||
|
|
<tr><td>Ctrl+Ins</td><td>Insert a new field with type auto</td></tr>
|
||
|
|
<tr><td>Ctrl+Shift+Ins</td><td>Append a new field with type auto</td></tr>
|
||
|
|
<tr><td>Ctrl+E</td><td>Expand or collapse field</td></tr>
|
||
|
|
<tr><td>Alt+End</td><td>Move the caret to the last field</td></tr>
|
||
|
|
<tr><td>Ctrl+F</td><td>Find</td></tr>
|
||
|
|
<tr><td>F3, Ctrl+G<br></td><td>Find next</td></tr>
|
||
|
|
<tr><td>Shift+F3, Ctrl+Shift+G</td><td>Find previous</td></tr>
|
||
|
|
<tr><td>Alt+Home</td><td>Move the caret to the first field</td></tr>
|
||
|
|
<tr><td>Ctrl+M</td><td>Show actions menu</td></tr>
|
||
|
|
<tr><td>Ctrl+Z</td><td>Undo last action</td></tr>
|
||
|
|
<tr><td>Ctrl+Shift+Z</td><td>Redo</td></tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|