> [!NOTE]
> This README was generated by [SKILL](https://github.com/agenvoy/skill-readme-generate), get the ZH version from [here](./doc/README.zh.md).

***

<p align="center">
<picture>
<img src="./doc/cover.png" alt="NanoJSON">
</picture>
</p>

<p align="center">
<strong>A LIGHTWEIGHT VISUAL JSON EDITOR BUILT WITH PURE JAVASCRIPT</strong>
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@pardnchiu/nanojson"><img src="https://img.shields.io/npm/v/@pardnchiu/nanojson?include_prereleases&style=for-the-badge" alt="npm"></a>
<a href="https://www.jsdelivr.com/package/npm/@pardnchiu/nanojson"><img src="https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/nanojson?include_prereleases&style=for-the-badge" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/@pardnchiu/nanojson"><img src="https://img.shields.io/npm/l/@pardnchiu/nanojson?include_prereleases&style=for-the-badge" alt="License"></a>
</p>

***

> A pure JavaScript library with zero-dependency visual tree editing, per-node dynamic type switching, and full lifecycle hooks

## Table of Contents

- [Features](#features)
- [Preview](#preview)
- [Architecture](#architecture)
- [License](#license)
- [Author](#author)

## Features

> `npm install @pardnchiu/nanojson` · [Documentation](./doc/doc.md)

- **Zero-dependency visual editing** — A tree-based JSON editor built with pure JavaScript and native DOM APIs, no frontend framework required.
- **Per-node dynamic type switching** — Every node can switch live between string / number / boolean / object / array / null and re-render instantly.
- **Full lifecycle hooks** — Six hooks (beforeRender / rendered / beforeUpdate / updated / beforeDestroy / destroyed) with a 300ms debounce on updates.
- **Flexible data import/export** — Accepts a JavaScript object, a File object, or a URL string as the data source, plus one-click download of the current JSON.

## Preview

<p align="center">
<img src="./doc/preview.png" alt="NanoJSON editor preview">
</p>

## Architecture

> [Full Architecture](./doc/architecture.md)

```mermaid
graph TB
    A[JSON Input] --> B[JSONEditor]
    B --> C[JSONEditorNode Tree]
    C --> D[DOM Renderers]
    B --> E[Lifecycle Hooks]
    B --> F[Import / Export]
```

## License

This project is licensed under the [MIT LICENSE](LICENSE).

## Author

<img src="https://github.com/pardnchiu.png" align="left" width="96" height="96" style="margin-right: 0.5rem;">

<h4 style="padding-top: 0">邱敬幃 Pardn Chiu</h4>

<a href="mailto:hi@pardn.io">hi@pardn.io</a><br>
<a href="https://www.linkedin.com/in/pardnchiu">https://www.linkedin.com/in/pardnchiu</a>

***

©️ 2025 [邱敬幃 Pardn Chiu](https://www.linkedin.com/in/pardnchiu)