Lightweight JS JSON Editor for Web – NanoJSON

NanoJSON is a lightweight, JavaScript-powered JSON editor that provides a user-friendly way to import, view, modify, and export JSON data directly within a web page.

Features:

• Interactive Tree View: Displays JSON in a familiar, collapsible tree structure.
• In-Place Editing: Modify keys and values directly in the UI.
• Dynamic Type Conversion: Change a value’s type between string, number, boolean, object, or array.
• Node Management: Add new key-value pairs to objects or items to arrays.
• Node Deletion: Remove specific keys or array items.
• Import Functionality: Load JSON from a local file or a URL (optional button).
• Export Functionality: Download the current JSON structure as a .json file (optional button).
• Reset: Clear the editor to an empty object (optional button).
• Minimal Styling: Comes with basic CSS, automatically injected from a CDN.
• Lifecycle Hooks: Provides callbacks for beforeRender, rendered, beforeUpdate, updated, beforeDestroy, and destroyed events.

How to use it:

1. Install & download with NPM.

# NPM
$ npm install @pardnchiu/nanojson

2. Import NanoJSON into your project.

<script src="/dist/NanoJSON.js"></script>

// OR
import { JSONEditor } from "./dist/NanoJSON.esm.js";

3. Create an empty JSON editor inside the container you specify.

<div id="example"></div>

let jsoneditor = new JSONEditor({
  id: "example",
});

4. Initialize with existing JSON data:

let jsoneditor = new JSONEditor({
  id: "example",
  json: {}, // your JSON data here
});

5. Available options to customize the JSON editor.

• id: (String, required if not appending to body) The ID of the HTML element to host the editor.
• json: (Object | Array) Initial JSON data to load.
• file: (File) A File object (e.g., from an <input type="file">) to load JSON from.
• path: (String) A URL to fetch JSON data from.
• button: (Object) Configure the visibility of control buttons.
  • import: (Boolean, default: true) Show/hide the import (open file) button.
  • export: (Boolean, default: true) Show/hide the export (download) button.
  • reset: (Boolean, default: true) Show/hide the reset (clear) button.
• title: (String) An optional title displayed above the editor.
• description: (String) An optional description displayed below the title.
• fill: (Boolean, default: true) If true, applies a default background color. Set to false to remove it if you want a transparent background or to apply your own.
• when: (Object) An object mapping lifecycle event names to callback functions:
  • beforeRender: () => boolean | void
  • rendered: () => void
  • beforeUpdate: () => boolean | void
  • updated: () => void
  • beforeDestroy: () => boolean | void
  • destroyed: () => void

let jsoneditor = new JSONEditor({
    id: "example",
    json: { "message": "Hello World" },
    title: "My JSON Config",
    description: "Edit the settings below.",
    button: {
      import: true, // Show import button
      export: true  // Show export button
    },
    when: {
      rendered: () => console.log("Editor has been rendered!"),
      updated: () => console.log("Editor data has been updated.")
    }
});

6. API methods.

• render(isUpdate = false): Manually triggers a re-render of the editor. isUpdate flags if it’s an update or initial render for lifecycle hooks.
• insert(): Adds a new empty key-value pair at the root level of the JSON structure.
• get json(): A getter property that returns the current state of the JSON data as a formatted string.
• import(data): Asynchronously loads new JSON data. data can be a JavaScript object/array, a File object, or a URL string.
• reset(): Clears the editor and loads an empty object {}.
• export(): Triggers a browser download of the current JSON data as a .json file. Prompts for confirmation first.

FAQs

Q: How can I customize the appearance of NanoJSON?
A: NanoJSON injects its own stylesheet. To change its look, you’ll need to write CSS rules that override its default styles. Use your browser’s developer tools to inspect the elements and identify the selectors (e.g., .pd-json-editor, .pd-json-editor-child, .input-group). The fill: false option in the constructor can also be used to remove the default background if you want to style it completely yourself.

Q: What’s the performance like for very large JSON files?
A: It’s generally good for common JSON sizes (e.g., configuration files, typical API responses). However, because it directly manipulates the DOM for each node, extremely large or deeply nested JSON structures (many megabytes or tens of thousands of nodes) could lead to browser slowdowns during rendering and interaction. Always test with your specific data.

Q: How does the library handle data type changes for a node?
A: When you change a node’s type using the dropdown:

• If you change to `object` or `array`, the previous simple value is cleared, and you can start adding child nodes. If it was already an object/array, its children are preserved if possible (e.g., object to array might lose keys).
• If you change from an `object` or `array` to a simple type (string, number, boolean), its children are discarded, and the value field is usually reset or set to a default (e.g., `true` for boolean, empty string for string).
• If you change to `number`, it attempts to parse the current value using `parseFloat`. If it’s not a valid number, it might become an empty string or `NaN` which then displays as empty.
• For `boolean`, it usually defaults to `”true”`.

Q: Can I programmatically update the JSON data after the editor is initialized?
A: Yes, you can use the editor.import(yourNewDataObject) method. This will re-process the new data and re-render the editor.

Q: Does NanoJSON support JSON schema validation?
A: No, NanoJSON does not include built-in JSON schema validation. It focuses on the editing UI for well-formed JSON. If you need schema validation, you’d have to implement that separately, perhaps by validating the editor.json output before saving it.

The post Lightweight JS JSON Editor for Web – NanoJSON appeared first on CSS Script.