[!Note]
This content is translated by LLM. Original text can be found here
NanoJSON
A lightweight JSON editor built with pure JavaScript and native APIs. It features visual editing, dynamic type switching, and file import/export capabilities. Suitable for website embedding and JSON data editing.
This project transitioned to MIT license on 2025/07/06, with .git-crypt
encryption fully removed.


Key Features
No Third-Party Dependencies
Developed using native DOM APIs without any third-party dependencies, making it easy to integrate into any web project.
Visual JSON Editing Experience
Displays JSON data in a tree structure, supporting folding/unfolding, dynamic node addition/removal, and providing an intuitive editing interface.
Comprehensive Type Support
Supports five JSON data types (string
, number
, boolean
, array
, object
) with real-time type switching while maintaining data integrity.
Installation
Install via npm
npm install @pardnchiu/nanojson
Include via CDN
UMD Version
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson@[VERSION]/dist/NanoJSON.js"></script>
ES Module Version
import { JSONEditor } from "https://cdn.jsdelivr.net/npm/@pardnchiu/nanojson@[VERSION]/dist/NanoJSON.esm.js";
Initialization
const editor = new JSONEditor({
id: "json-editor-container",
title: "JSON Editor",
description: "Edit your JSON",
fill: true,
json: {
name: "NanoJSON",
version: "0.3.4",
features: ["Lightweight", "Pure JS", "Visual Editing"]
}
});
const advancedEditor = new JSONEditor({
id: "advanced-editor",
title: "Advanced JSON Editor",
description: "Full-featured JSON editor",
fill: 1,
button: {
import: true,
export: true,
reset: true
},
when: {
rendered: () => {
console.log("Editor rendered");
},
updated: () => {
console.log("Editor content updated");
}
}
});
const fileEditor = new JSONEditor({
id: "file-editor",
path: "/data/sample.json",
});
Configuration Overview
const config = {
id: "container-id",
title: "",
description: "",
fill: 1,
json: {},
file: null,
path: "",
button: {
import: true,
export: true,
reset: true
},
when: {
beforeRender: null,
rendered: null,
beforeUpdate: null,
updated: null,
beforeDestroy: null,
destroyed: null
}
};
Editor Features
Data Types
String
"Hello World"
Number
42
3.14159
-123
Boolean
true
false
Array
[
"item1",
"item2",
123,
true,
{
"nested": "object"
}
]
Object
{
"key1": "value1",
"key2": 456,
"nested": {
"deep": "value"
}
}
Available Functions
-
Get JSON Data
const jsonString = editor.json;
console.log(jsonString);
-
Import Data
await editor.import({
name: "New Data",
version: "1.0.0"
});
const fileInput = document.querySelector('input[type="file"]');
await editor.import(fileInput.files[0]);
await editor.import('/path/to/data.json');
-
Export File
editor.export();
-
Reset Editor
editor.reset();
-
Add Root Node
editor.insert();
-
Re-render
editor.render();
Lifecycle
const editor = new JSONEditor({
id: "editor",
when: {
beforeRender: () => {
console.log("About to render");
},
rendered: () => {
console.log("Render complete");
},
beforeUpdate: () => {
console.log("About to update content");
},
updated: () => {
console.log("Content updated");
},
beforeDestroy: () => {
console.log("About to destroy editor");
},
destroyed: () => {
console.log("Editor destroyed");
}
}
});
File Handling Mechanism
Supported Formats
- Only
.json
file format supported
- Automatically validates JSON syntax correctness
Export Functionality
- Automatically formats JSON (4-space indentation)
- File naming format:
JSONEditor-{timestamp}.json
License
This project is licensed under MIT.
Author
邱敬幃 Pardn Chiu
©️ 2025 邱敬幃 Pardn Chiu