{"id":51026849,"url":"https://github.com/gitstq/json-schema-visual-editor","last_synced_at":"2026-06-21T20:02:26.272Z","repository":{"id":357491352,"uuid":"1237202299","full_name":"gitstq/json-schema-visual-editor","owner":"gitstq","description":"🎨 A lightweight, browser-based JSON Schema visual editor with drag-and-drop interface, real-time preview, and multi-format export support.","archived":false,"fork":false,"pushed_at":"2026-05-13T01:16:20.000Z","size":19,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-13T03:16:37.961Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitstq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-13T01:14:43.000Z","updated_at":"2026-05-13T01:16:23.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gitstq/json-schema-visual-editor","commit_stats":null,"previous_names":["gitstq/json-schema-visual-editor"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/gitstq/json-schema-visual-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fjson-schema-visual-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fjson-schema-visual-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fjson-schema-visual-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fjson-schema-visual-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitstq","download_url":"https://codeload.github.com/gitstq/json-schema-visual-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitstq%2Fjson-schema-visual-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34623906,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-21T02:00:05.568Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-06-21T20:02:25.392Z","updated_at":"2026-06-21T20:02:26.266Z","avatar_url":"https://github.com/gitstq.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# 🎨 JSON Schema Visual Editor\n\n**A lightweight, browser-based JSON Schema visual editor with drag-and-drop interface, real-time preview, and multi-format export support.**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![GitHub Stars](https://img.shields.io/github/stars/gitstq/json-schema-visual-editor?style=social)](https://github.com/gitstq/json-schema-visual-editor/stargazers)\n[![GitHub Forks](https://img.shields.io/github/forks/gitstq/json-schema-visual-editor?style=social)](https://github.com/gitstq/json-schema-visual-editor/network/members)\n\n[🌐 简体中文](#简体中文) | [🌐 繁體中文](#繁體中文) | [🌐 English](#english)\n\n\u003c/div\u003e\n\n---\n\n## 简体中文\n\n### 🎉 项目介绍\n\nJSON Schema Visual Editor 是一款**纯浏览器端运行**的 JSON Schema 可视化编辑器，无需任何后端服务或安装依赖。通过直观的拖拽界面，您可以快速设计和编辑 JSON Schema，实时预览生成的 Schema 和示例数据。\n\n**灵感来源**：传统 JSON Schema 编辑工具要么过于复杂需要安装，要么功能简陋不够直观。本项目旨在提供一个**零依赖、开箱即用**的可视化解决方案。\n\n### ✨ 核心特性\n\n- 🎯 **零依赖** - 纯 HTML/CSS/JS 实现，无需 Node.js 或任何后端\n- 🖱️ **拖拽编辑** - 直观的拖拽式属性添加，支持 6 种数据类型\n- 👁️ **实时预览** - 实时生成 JSON Schema 和示例数据\n- 📋 **一键复制** - 快速复制生成的 Schema 到剪贴板\n- 📤 **导入导出** - 支持导入现有 Schema，导出为 JSON 文件\n- ↩️ **撤销重做** - 完整的操作历史管理\n- 🎨 **精美界面** - 现代化暗色主题设计\n- 📱 **响应式布局** - 适配不同屏幕尺寸\n\n### 🚀 快速开始\n\n#### 环境要求\n\n- 现代浏览器（Chrome、Firefox、Safari、Edge）\n- 无需任何运行时依赖\n\n#### 本地启动\n\n```bash\n# 克隆仓库\ngit clone https://github.com/gitstq/json-schema-visual-editor.git\n\n# 进入目录\ncd json-schema-visual-editor\n\n# 启动本地服务器（任选一种方式）\n# 方式1: Python\npython3 -m http.server 8080\n\n# 方式2: Node.js\nnpx serve .\n\n# 方式3: PHP\nphp -S localhost:8080\n\n# 在浏览器中打开 http://localhost:8080\n```\n\n#### 在线使用\n\n直接打开 `index.html` 文件即可使用，无需服务器！\n\n### 📖 详细使用指南\n\n#### 基本操作\n\n1. **添加属性**\n   - 点击\"添加属性\"按钮\n   - 或从左侧拖拽类型到画布\n\n2. **编辑属性**\n   - 点击属性右侧的 ✏️ 编辑按钮\n   - 设置名称、类型、描述、约束条件\n\n3. **删除属性**\n   - 点击属性右侧的 🗑️ 删除按钮\n\n4. **设置必填**\n   - 在编辑属性时勾选\"必填字段\"\n\n#### 支持的类型\n\n| 类型 | 图标 | 说明 | 额外约束 |\n|------|------|------|----------|\n| String | 📝 | 字符串 | 最小/最大长度 |\n| Number | 🔢 | 数字 | 最小/最大值 |\n| Integer | #️⃣ | 整数 | 最小/最大值 |\n| Boolean | ☑️ | 布尔值 | - |\n| Array | 📚 | 数组 | - |\n| Object | 📦 | 对象 | - |\n\n#### 导入导出\n\n- **导入**: 点击\"导入\"按钮，粘贴 JSON Schema\n- **导出**: 点击\"导出\"按钮，下载为 `.json` 文件\n- **复制**: 点击\"复制 JSON\"按钮，复制到剪贴板\n\n### 💡 设计思路与迭代规划\n\n#### 技术选型\n\n- **纯原生技术栈**: HTML5 + CSS3 + Vanilla JavaScript\n- **零构建工具**: 无需 Webpack、Vite 等构建工具\n- **无框架依赖**: 不依赖 React、Vue 等前端框架\n\n#### 设计原则\n\n1. **简单至上** - 保持代码简洁，易于理解和修改\n2. **开箱即用** - 下载即可使用，无需安装依赖\n3. **功能完整** - 覆盖 JSON Schema 核心功能\n\n#### 后续迭代计划\n\n- [ ] 支持嵌套对象和数组的深层编辑\n- [ ] 添加更多验证规则（正则、枚举等）\n- [ ] 支持 JSON Schema  draft-07/2019-09 规范\n- [ ] 添加主题切换功能\n- [ ] 支持从 JSON 数据反向生成 Schema\n\n### 🤝 贡献指南\n\n欢迎提交 Issue 和 Pull Request！请查看 [CONTRIBUTING.md](CONTRIBUTING.md) 了解详情。\n\n### 📄 开源协议\n\n本项目采用 [MIT License](LICENSE) 开源协议。\n\n---\n\n## 繁體中文\n\n### 🎉 專案介紹\n\nJSON Schema Visual Editor 是一款**純瀏覽器端運行**的 JSON Schema 可視化編輯器，無需任何後端服務或安裝依賴。通過直觀的拖拽介面，您可以快速設計和編輯 JSON Schema，即時預覽生成的 Schema 和範例資料。\n\n### ✨ 核心特性\n\n- 🎯 **零依賴** - 純 HTML/CSS/JS 實現，無需 Node.js 或任何後端\n- 🖱️ **拖拽編輯** - 直觀的拖拽式屬性添加，支援 6 種資料類型\n- 👁️ **即時預覽** - 即時生成 JSON Schema 和範例資料\n- 📋 **一鍵複製** - 快速複製生成的 Schema 到剪貼簿\n- 📤 **匯入匯出** - 支援匯入現有 Schema，匯出為 JSON 檔案\n- ↩️ **復原重做** - 完整的操作歷史管理\n- 🎨 **精美介面** - 現代化暗色主題設計\n- 📱 **響應式佈局** - 適配不同螢幕尺寸\n\n### 🚀 快速開始\n\n#### 環境要求\n\n- 現代瀏覽器（Chrome、Firefox、Safari、Edge）\n- 無需任何執行時依賴\n\n#### 本地啟動\n\n```bash\n# 克隆倉庫\ngit clone https://github.com/gitstq/json-schema-visual-editor.git\n\n# 進入目錄\ncd json-schema-visual-editor\n\n# 啟動本地伺服器\npython3 -m http.server 8080\n\n# 在瀏覽器中開啟 http://localhost:8080\n```\n\n### 📖 詳細使用指南\n\n#### 基本操作\n\n1. **添加屬性** - 點擊\"添加屬性\"按鈕或從左側拖拽類型\n2. **編輯屬性** - 點擊 ✏️ 編輯按鈕設定屬性詳情\n3. **刪除屬性** - 點擊 🗑️ 刪除按鈕\n4. **設定必填** - 在編輯屬性時勾選\"必填欄位\"\n\n### 💡 設計思路\n\n- **純原生技術棧**: HTML5 + CSS3 + Vanilla JavaScript\n- **零構建工具**: 無需 Webpack、Vite 等構建工具\n- **無框架依賴**: 不依賴 React、Vue 等前端框架\n\n### 📄 開源協議\n\n本專案採用 [MIT License](LICENSE) 開源協議。\n\n---\n\n## English\n\n### 🎉 Introduction\n\nJSON Schema Visual Editor is a **browser-based** visual editor for JSON Schema that requires no backend services or dependencies. With an intuitive drag-and-drop interface, you can quickly design and edit JSON Schemas with real-time preview of generated Schema and sample data.\n\n**Inspiration**: Traditional JSON Schema editing tools are either too complex to install or too simplistic to be intuitive. This project aims to provide a **zero-dependency, ready-to-use** visual solution.\n\n### ✨ Features\n\n- 🎯 **Zero Dependencies** - Pure HTML/CSS/JS, no Node.js or backend required\n- 🖱️ **Drag \u0026 Drop** - Intuitive drag-and-drop property addition with 6 data types\n- 👁️ **Real-time Preview** - Live generation of JSON Schema and sample data\n- 📋 **One-click Copy** - Quickly copy generated Schema to clipboard\n- 📤 **Import \u0026 Export** - Import existing Schemas, export as JSON files\n- ↩️ **Undo \u0026 Redo** - Complete operation history management\n- 🎨 **Beautiful UI** - Modern dark theme design\n- 📱 **Responsive Layout** - Adapts to different screen sizes\n\n### 🚀 Quick Start\n\n#### Requirements\n\n- Modern browser (Chrome, Firefox, Safari, Edge)\n- No runtime dependencies required\n\n#### Local Development\n\n```bash\n# Clone repository\ngit clone https://github.com/gitstq/json-schema-visual-editor.git\n\n# Enter directory\ncd json-schema-visual-editor\n\n# Start local server\npython3 -m http.server 8080\n\n# Open http://localhost:8080 in your browser\n```\n\n#### Online Usage\n\nSimply open the `index.html` file - no server required!\n\n### 📖 Usage Guide\n\n#### Basic Operations\n\n1. **Add Property** - Click \"Add Property\" button or drag types from sidebar\n2. **Edit Property** - Click ✏️ edit button to configure property details\n3. **Delete Property** - Click 🗑️ delete button\n4. **Set Required** - Check \"Required field\" when editing property\n\n#### Supported Types\n\n| Type | Icon | Description | Constraints |\n|------|------|-------------|-------------|\n| String | 📝 | String value | Min/Max length |\n| Number | 🔢 | Number value | Min/Max value |\n| Integer | #️⃣ | Integer value | Min/Max value |\n| Boolean | ☑️ | Boolean value | - |\n| Array | 📚 | Array value | - |\n| Object | 📦 | Object value | - |\n\n### 💡 Design Philosophy\n\n- **Pure Native Stack**: HTML5 + CSS3 + Vanilla JavaScript\n- **Zero Build Tools**: No Webpack, Vite or other build tools needed\n- **No Framework Dependencies**: No React, Vue or other frameworks\n\n### 🤝 Contributing\n\nContributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n### 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Made with ❤️ by JSON Schema Visual Editor Team**\n\n[⭐ Star this repo](https://github.com/gitstq/json-schema-visual-editor) | [🐛 Report Bug](https://github.com/gitstq/json-schema-visual-editor/issues) | [💡 Request Feature](https://github.com/gitstq/json-schema-visual-editor/issues)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fjson-schema-visual-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitstq%2Fjson-schema-visual-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitstq%2Fjson-schema-visual-editor/lists"}