Repolode
提交项目
josdejong

josdejong/jsoneditor

一个基于网页的 JSON 查看与编辑组件，提供树形、代码、文本和预览四种模式。

在 GitHub 查看
Star
12,268
Fork
2,073
未关闭 Issue
256
最近提交
6天前

这是什么？

JSON Editor 是一个在浏览器中查看、编辑、格式化和校验 JSON 的工具。它提供多种模式：树形编辑器可以直观地修改字段和值，代码编辑器带语法高亮，文本编辑器适合纯文本操作，预览模式可处理最大 500 MiB 的大型文档。

树形模式支持添加、移动、复制和排序节点，并可使用 JMESPath 查询转换数据，还支持搜索高亮和撤销重做。各模式都支持基于 ajv 的 JSON Schema 校验，以及格式化、压缩和修复不规范的 JSON。

该项目以库的形式发布，可嵌入到自己的 Web 应用中。它支持 CommonJS、AMD 和普通脚本加载方式，可通过 npm 或 CDN 安装。

核心功能

  • 01树形模式可编辑、移动、复制和排序字段与值。
  • 02代码模式支持语法高亮、格式化和压缩。
  • 03预览模式可处理最大 500 MiB 的 JSON 文档。
  • 04各模式均支持基于 ajv 的 JSON Schema 校验。
  • 05支持使用 JMESPath 查询转换 JSON 数据。
  • 06可修复格式不规范的 JSON。

适用场景

  • 在 Web 管理后台或配置工具中嵌入 JSON 编辑器。
  • 在浏览器中查看并修正 API 响应或配置文件。
  • 保存用户提交的数据前，按 Schema 校验 JSON。
  • 使用预览模式查看较大的 JSON 文件。

快速上手

  1. 1

    使用 npm 安装该库

    npm install jsoneditor
  2. 2

    在 HTML 页面中引入 CSS 和 JS 文件，并在容器元素中创建编辑器

使用前须知

  • README 指出 svelte-jsoneditor 是其继任者，但新编辑器并非一对一的替代品。

标签

#json#editor#json-schema#web-component#tree-view#validation

常见问题

jsoneditor 是什么？
一个基于网页的 JSON 查看与编辑组件，提供树形、代码、文本和预览四种模式。 JSON Editor 是一个在浏览器中查看、编辑、格式化和校验 JSON 的工具。它提供多种模式：树形编辑器可以直观地修改字段和值，代码编辑器带语法高亮，文本编辑器适合纯文本操作，预览模式可处理最大 500 MiB 的大型文档。
jsoneditor 可以免费使用吗？用的什么许可证？
jsoneditor 以 Apache-2.0 许可证开源。用于商业产品前，请先确认许可证条款。
jsoneditor 还在维护吗？
活跃维护中。jsoneditor 最近一次提交是在 2026年11月1日。
jsoneditor 适合用来做什么？
在 Web 管理后台或配置工具中嵌入 JSON 编辑器。 在浏览器中查看并修正 API 响应或配置文件。 保存用户提交的数据前，按 Schema 校验 JSON。 使用预览模式查看较大的 JSON 文件。
jsoneditor 怎么安装和运行？
使用 npm 安装该库: npm install jsoneditor 在 HTML 页面中引入 CSS 和 JS 文件，并在容器元素中创建编辑器
在哪里获取 jsoneditor？
源代码和安装说明在 GitHub 上：https://github.com/josdejong/jsoneditor

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目